1. js把圖片旋轉後如何用代碼對其進行保存
保存什麼,保存頁面旋轉裝太的話,就把css保存了
如果是把圖片修改的話,把旋轉角度和圖片路徑發給後台,後台對圖片做相應的旋轉處理,然後替換原圖
2. 通過js旋轉圖片後在頁面顯示
<!DOCTYPEhtml>
<html>
<head>
<title>css顛倒圖片</title>
<styletype="text/css">
img.upside-down
{
filter:progid:dximagetransform.microsoft.basicimage(rotation:2);
transform:rotateX(180deg);/*css3*/
}
</style>
</head>
<body>
<imgclass="upside-down"src="http://www..com/img/bdlogo.gif"/>
</body>
</html>
如果要使用js就是對其class的刪除與添加
3. javaScript如何實現層(或層裡面內容)的旋轉
我想,jquery及其插件jQueryRotate.js能夠完全滿足你的需要,不但可以90度,任意度都行.還帶動畫效果.
=========
下面是演示代碼.
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" ></meta>
<head>
<title>
demo
</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jQueryRotate.js" type="text/javascript"></script>
<script>
function demo_rotate(){
//$("#demo_r").rotate(90);
$('#demo_r').rotate({maxAngle:25,minAngle:-55,
bind:
[
{"mouseover":function(){$(this).rotateAnimation(85);}},
{"mouseout":function(){$(this).rotateAnimation(-35);}}
]
});
}
</script>
</head>
<body>
<div id="showTime">
<table class='itable' width='100%' id='timetable' >
<tr>
<td class="test_c" id="one">
<img src="1.jpg" id="demo_r">
</td>
</tr>
<tr>
<td>
<input type="button" value="demo" onclick="demo_rotate();">
</td>
</tr>
</table>
</div>
</body>
</html>
你要找不到兩個js文件,請聯系我.給我留言.
4. 求一段滑鼠點擊後圖片翻轉到背面的js代碼!
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<style>
div{
border:solidred1px;
}
#mdiv{
width:171px;
height:134px;
line-height:134px;
background:url("6.jpg")no-repeat;
text-align:center;
}
#mspan{
display:none;
}
</style>
</head>
<body>
<divid="mdiv"><spanid="mspan">內容</span></div>
<scriptsrc="jquery-2.1.1.min.js"></script>
<script>
vardiv=$('#mdiv')
varisFirst=true;
div.click(function(){
if(isFirst){
isFirst=false;
div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)","-webkitTransition":"all0.6s"});
setTimeout(function(){
$('#mspan').show();
$('#mspan').css({'transform':'rotateY(180deg)','display':'block'});
div.css('background','none')
},700);
setTimeout(function(){
div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(180deg)","-webkitTransition":"all0.6s"});
},800);
}
});
</script>
</body>
</html>