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>