求一段鼠标点击后图片翻转到背面的js代码!

注意是说一个图片点击后翻转到反面,背面是文字,类似于扑克牌翻转的效果,不要太复杂,翻过后也不用再停一段时间恢复。这是鼠标经过时发生效果的代码。求鼠标点击后时触发效果... 注意是说一个图片点击后翻转到反面,背面是文字,类似于扑克牌翻转的效果,不要太复杂,翻过后也不用再停一段时间恢复。
这是鼠标经过时发生效果的代码。求鼠标点击后时触发效果
展开
 我来答
JIA丨XIAN
推荐于2017-09-10 · TA获得超过630个赞
知道小有建树答主
回答量:475
采纳率:20%
帮助的人:319万
展开全部
<!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 广告
作为硕方科技(北京)有限公司的工作人员,关于移动智能标签打印机P50A设置放标签自动的步骤,通常涉及以下几个关键操作:1. **安装标签带**:首先,确保标签带已正确安装于打印机内,标签带需竖直放入,并确保标签带内标签已拉直,碳带不松弛。2... 点击进入详情页
本回答由程经理提供
百度网友30b2191
2017-11-08
知道答主
回答量:1
采纳率:0%
帮助的人:925
展开全部
离开再翻回来怎么弄啊
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式