求一段鼠标点击后图片翻转到背面的js代码!
发布网友
发布时间：2022-04-26 00:44
共2个回答
热心网友
时间：2022-04-25 20:18
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border: solid red 1px;
}
#mdiv{
width: 171px;
height: 134px;
line-height: 134px;
background: url("6.jpg") no-repeat;
text-align: center;
}
#mspan{
display: none;
}
</style>
</head>
<body>
<div id="mdiv"><span id="mspan">内容</span></div>
<script src="jquery-2.1.1.min.js"></script>
<script>
var div = $('#mdiv')
var isFirst = true;
div.click(function(){
if(isFirst){
isFirst = false;
div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)", "-webkitTransition":"all 0.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":"all 0.6s"});
},800);
}
});
</script>
</body>
</html>
追问首先谢谢！再麻烦问一下，可以改成多张图片吗？因为需要做的效果是最少三张，所以。。。。。麻烦了，如果没有时间，就算了。
追答
代码太长,发成附件
热心网友
时间：2022-04-25 21:36
离开再翻回来怎么弄啊
