鼠标经过或点击时图片变大
2015-04-25 09:56:02
在淘宝上的商品展示的都是缩略图，有的当鼠标经过时图片变大，为的是让顾客看的更清楚，同时又能节省网页空间，这是一种非常方便的方法。我来给大家介绍一种方法，当鼠标经过的时候图片放到，如果放到手机上时，当你用手点击图片的时候图片放大，下面来看一下代码。
<html>
<head>
<title></title>
<style type="text/css">
#img {
<!--设置图片从小变到大所需要的时间-->
transition: transform 0.8s;
}
#img:hover {
<!--设置图片变大的倍数，数值越大图片越大-->
transform: scale(1.5);
}
</style>
</head>
<body>
<div style="left:30%;top:30%;margin:0;padding:0;position:absolute;">
<img id="img" src="img/weixin.jpg" />
</div>
</body>
</html>代码非常的简单，并且关键部位有注释，相信大家都能看懂，想看效果的可以点击下面的演示查看。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读