求一段鼠标点击后图片翻转到背面的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>
追问
首先谢谢!再麻烦问一下,可以改成多张图片吗?因为需要做的效果是最少三张,所以。。。。。麻烦了,如果没有时间,就算了。
追答
代码太长,发成附件
程经理
2024-10-11 广告
2024-10-11 广告
作为硕方科技(北京)有限公司的工作人员,关于移动智能标签打印机P50A设置放标签自动的步骤,通常涉及以下几个关键操作:1. **安装标签带**:首先,确保标签带已正确安装于打印机内,标签带需竖直放入,并确保标签带内标签已拉直,碳带不松弛。2...
点击进入详情页
本回答由程经理提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询