点击图片缩小后恢复原状

直接贴代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        .on{
            transform:scale(0.8,0.8);
        }
        /*.myimg:hover{
            transform:scale(0.8,0.8);
        }*/
    </style>
    <!-- <link rel="stylesheet" type="text/css" href="css/base.css"> -->
</head>
<body>
    <img src="img/wf3-big_1f69073.png" class="myimg" style="width:100px;height:100px;transition: all 0.3s linear">
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(".myimg").click(function(){
        $(this).addClass("on");
        setTimeout(()=>{
            $(this).removeClass("on");
        },300)
    })

</script>
</html>

如果不是点击,是鼠标移入移除触发图片大小改变,直接用纯css就能搞定

.myimg:hover{transform:scale(0.8,0.8)}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • 你说。 很高兴成为你的男朋友,请多指教。 新的一年,我们不再是单身狗。 意料之中,意料之外。
    还想再听你的故事阅读 212评论 0 0
  • 镜里管他人已老,半世平生,何惧匆匆了。我自咿哦从未少,句中深意谁知晓?每每得来多别调,不尽殷勤,终竟能回报。只为当...
    雪窗_武立之阅读 197评论 0 3
  • 知道自己想要什么,就会留意和它相关的讯息,一个新闻或是一篇文章,一个理论可以被翻成十个版本来变相推广,毫无选择的接...
    薄暮之春阅读 406评论 0 0