求一段鼠标点击后图片翻转到背面的js代码！
注意是说一个图片点击后翻转到反面，背面是文字，类似于扑克牌翻转的效果，不要太复杂，翻过后也不用再停一段时间恢复。这是鼠标经过时发生效果的代码。求鼠标点击后时触发效果...
注意是说一个图片点击后翻转到反面，背面是文字，类似于扑克牌翻转的效果，不要太复杂，翻过后也不用再停一段时间恢复。
这是鼠标经过时发生效果的代码。求鼠标点击后时触发效果 展开
这是鼠标经过时发生效果的代码。求鼠标点击后时触发效果 展开
2个回答
展开全部
<!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>
追问
首先谢谢！再麻烦问一下，可以改成多张图片吗？因为需要做的效果是最少三张，所以。。。。。麻烦了，如果没有时间，就算了。
追答
代码太长,发成附件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
离开再翻回来怎么弄啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
