圖片的每點選一次旋轉90度, filter和css3屬性
阿新 • • 發佈：2019-02-17
<!DOCTYPE html>
<html>
<head>
<title> ImageRotation </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--這是專案上的一個meta標籤,用的是IE8渲染的 所以在IE10以上測試的版本號是8.0-->
<meta http-equiv="X-UA-Compatible" content="IE=8,10;chrome=1"/>
<style type="text/css">
#container {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
}
.thin {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -175px;
z-index: -1;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");
}
</style>
</head>
<body>
<div id="container" style="">
<a href=""></a>
<img id="rotateImg" class="thin" src="img/11.jpg" width="500" height="350" />
</div>
<button class="zoomIn">放大按鈕</button>
<button class="rota_btn">旋轉按鈕</button>
<script src="js/jquery-1.7.2.min.js" type="text/javascript">
</script>
<script>
// 1.在Ie9以下是可以用的,但是IE10和11不能用,ie9+以上不支援濾鏡,開始支援css3高版本了,
// 2,<!--這是專案上的一個meta標籤,用的是IE8渲染的 所以在IE10以上測試的版本號是8.0-->
// <meta id="IE10" http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>
// 目前的問題是: 無法把Ie10和Ie8區分開了
var currentDeg = 0;
function rotateImg(){
currentDeg = (currentDeg + 90) % 360;
//判斷是否IE
function myBrowser() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串
var isOpera = userAgent.indexOf("Opera") > -1;
//判斷是否IE瀏覽器
if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
if(userAgent.indexOf('MSIE 10.0')>-1){
return 'IE10';
}
return "IE";
};
//判斷是否IE瀏覽器
if(userAgent.indexOf("Trident") > -1) {
if(userAgent.indexOf('rv:11.0')>-1){
return 'IE11';
}
return "Edge";
}
// if(Number(navigator.userAgent.match(/msie (\d+\.\d+)/i)[1])>=10.0){
// return "IE10";
// }
}
// var IE10transform=navigator.userAgent.match(/msie (\d+\.\d+)/i)[1]>=10.0;
var sinDeg = 0,cosDeg = 0;
target = document.getElementById('rotateImg');
$target = $('.thin');
if((myBrowser()==="IE"||myBrowser()==="Edge")&&myBrowser()!="IE10") { // IE 瀏覽器進行的旋轉，IE不提供transform，所以得自己計算位置
cosDeg = Math.cos(currentDeg * Math.PI / 180);
sinDeg = Math.sin(currentDeg * Math.PI / 180);
with(target.filters.item(0)) {
M11 = M22 = cosDeg;
M12 = -(M21 = sinDeg);
}
$target.css({
'left': "50%",
'top': "50%",
"marginLeft": -$target.width() / 2,
"marginTop": -$target.height() / 2
});
}else{
$target.css({
'transform': "rotate(" + currentDeg + "deg)"
});
}
//else if(target.style.MozTransform !== undefined) {
// target.style.MozTransform = 'rotate(' + currentDeg + 'deg)';
// } else if(target.style.OTransform !== undefined) {
// target.style.OTransform = 'rotate(' + currentDeg + 'deg)';
// } else if(target.style.webkitTransform !== undefined) {
// target.style.webkitTransform = 'rotate(' + currentDeg + 'deg)';
// } else if(target.style.MsTransform !== undefined) {
// target.style.MsTransform = 'rotate(' + currentDeg + 'deg)';
// } else {
// target.style.transform = "rotate(" + currentDeg + "deg)";
// }
};
$('.rota_btn').click(function() {
rotateImg();
})
$('.zoomIn').click(function() {
ZoomIn(1.05);
})
function ZoomIn(parm1) {
var $img = $('.thin');
var wid = $img.width() * parm1;
var hig = $img.height() * parm1;
var img_width = parseInt(wid) / 2;
var img_height = parseInt(hig) / 2;
$('.thin').css({
'left': "50%",
'top': "50%",
"marginLeft": -img_width,
"marginTop": -img_height
});
if($img.width() >= $img.height()) {
$('.thin').css('width', wid + 'px');
$('.thin').css('height', hig + 'px');
} else {
$('.thin').css('width', hig + 'px');
$('.thin').css('height', wid + 'px');
}
}
</script>
</body>
</html>
<html>
<head>
<title> ImageRotation </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--這是專案上的一個meta標籤,用的是IE8渲染的 所以在IE10以上測試的版本號是8.0-->
<meta http-equiv="X-UA-Compatible" content="IE=8,10;chrome=1"/>
<style type="text/css">
#container {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
}
.thin {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -175px;
z-index: -1;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");
}
</style>
</head>
<body>
<div id="container" style="">
<a href=""></a>
<img id="rotateImg" class="thin" src="img/11.jpg" width="500" height="350" />
</div>
<button class="zoomIn">放大按鈕</button>
<button class="rota_btn">旋轉按鈕</button>
<script src="js/jquery-1.7.2.min.js" type="text/javascript">
</script>
<script>
// 1.在Ie9以下是可以用的,但是IE10和11不能用,ie9+以上不支援濾鏡,開始支援css3高版本了,
// 2,<!--這是專案上的一個meta標籤,用的是IE8渲染的 所以在IE10以上測試的版本號是8.0-->
// <meta id="IE10" http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>
// 目前的問題是: 無法把Ie10和Ie8區分開了
var currentDeg = 0;
function rotateImg(){
currentDeg = (currentDeg + 90) % 360;
//判斷是否IE
function myBrowser() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串
var isOpera = userAgent.indexOf("Opera") > -1;
//判斷是否IE瀏覽器
if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
if(userAgent.indexOf('MSIE 10.0')>-1){
return 'IE10';
}
return "IE";
};
//判斷是否IE瀏覽器
if(userAgent.indexOf("Trident") > -1) {
if(userAgent.indexOf('rv:11.0')>-1){
return 'IE11';
}
return "Edge";
}
// if(Number(navigator.userAgent.match(/msie (\d+\.\d+)/i)[1])>=10.0){
// return "IE10";
// }
}
// var IE10transform=navigator.userAgent.match(/msie (\d+\.\d+)/i)[1]>=10.0;
var sinDeg = 0,cosDeg = 0;
target = document.getElementById('rotateImg');
$target = $('.thin');
if((myBrowser()==="IE"||myBrowser()==="Edge")&&myBrowser()!="IE10") { // IE 瀏覽器進行的旋轉，IE不提供transform，所以得自己計算位置
cosDeg = Math.cos(currentDeg * Math.PI / 180);
sinDeg = Math.sin(currentDeg * Math.PI / 180);
with(target.filters.item(0)) {
M11 = M22 = cosDeg;
M12 = -(M21 = sinDeg);
}
$target.css({
'left': "50%",
'top': "50%",
"marginLeft": -$target.width() / 2,
"marginTop": -$target.height() / 2
});
}else{
$target.css({
'transform': "rotate(" + currentDeg + "deg)"
});
}
//else if(target.style.MozTransform !== undefined) {
// target.style.MozTransform = 'rotate(' + currentDeg + 'deg)';
// } else if(target.style.OTransform !== undefined) {
// target.style.OTransform = 'rotate(' + currentDeg + 'deg)';
// } else if(target.style.webkitTransform !== undefined) {
// target.style.webkitTransform = 'rotate(' + currentDeg + 'deg)';
// } else if(target.style.MsTransform !== undefined) {
// target.style.MsTransform = 'rotate(' + currentDeg + 'deg)';
// } else {
// target.style.transform = "rotate(" + currentDeg + "deg)";
// }
};
$('.rota_btn').click(function() {
rotateImg();
})
$('.zoomIn').click(function() {
ZoomIn(1.05);
})
function ZoomIn(parm1) {
var $img = $('.thin');
var wid = $img.width() * parm1;
var hig = $img.height() * parm1;
var img_width = parseInt(wid) / 2;
var img_height = parseInt(hig) / 2;
$('.thin').css({
'left': "50%",
'top': "50%",
"marginLeft": -img_width,
"marginTop": -img_height
});
if($img.width() >= $img.height()) {
$('.thin').css('width', wid + 'px');
$('.thin').css('height', hig + 'px');
} else {
$('.thin').css('width', hig + 'px');
$('.thin').css('height', wid + 'px');
}
}
</script>
</body>
</html>