19
2017
08

活动代码:html如何实现鼠标移动到图片上图片自动放大?

 html如何实现鼠标移动到图片上图片自动放大?鼠标移开又自动还原,这个代码通常用于html页面的单个活动,这里荣帅分享下详细的代码和注释,完整版代码如下:

<!DOCTYPE html>  
<html>

<head> 
     <meta charset="utf-8"> 
     <meta name="keywords" content="html图片放大,html实现图片放大效果" />  
     <meta name="description" content="html如何实现鼠标移动到图片上图片自动放大?鼠标移开又自动还原,这个代码通常用于html页面的单个活动,这里荣帅分享下详细的代码和注释,完整版代码如下:" /> 
</head>
 
<style>
     *{margin:0;padding:0;}
     .yang{width:300px;height:300px;border:1px dashed #ccc;margin:80px auto;}
     .yang img{width:300px;height:300px;transition:all 0.5s;}/*图片放大过程的时间*/
     .yang img:hover{ 
             transform: scale(1.2);/*鼠标经过图片放大的倍数*/
         }
 
     .ziti{width:300px;height:40px;border:1px dashed red;text-align:center;margin:80px auto;}
</style>
 
<body>
    <!--transform:scale()可以实现按比例放大或者缩小功能。transition允许CSS的属性值在一定的时间区间内平滑过渡 可以调节放大倍数以及放大过程所用时间。-->
    <div style="width:400px;height:600px;border:1px solid red;margin:120px auto;">
        <div class="yang"><img src="http://www.c2bseo.com/zb_users/theme/metro/style/images/random/2.jpg" width="300px" height="300px" /></div>
        <div class="ziti"><span>鼠标放到图片上图片放大</span></div>
     </div> 
 
</body> 
</html>

 

如果感觉不错就点个赞吧!

 

2、如果要兼容的话需要在hover效果里面加上如下代码

             -webkit-transform: scale(1.2); /*Safari 和 Chrome*/
             -moz-transform: scale(1.2); /*Firefox*/
             -ms-transform: scale(1.2); /*IE9*/
             -o-transform: scale(1.2); /*Opera*/

 

 

3、在类yang中最好加入overflow,不然的话放大会溢出,挤压下面的div

overflow:hidden; /*overflow作用是溢出隐藏*/

 

« 上一篇: 织梦建站dede:productimagelist图集下实现数字自增 下一篇 »网站权重什么时候到1,如何优化网站权重到1
关闭广告
关闭广告

分享:

支付宝

微信