你的位置:首页 > 软件开发 > 网页设计 > css3 transition 实现图片放大缩小

css3 transition 实现图片放大缩小

发布时间:2015-07-22 19:00:02
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> < ...
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style>    .img-content{width: 500px;height: 300px;margin: 0 auto;position: relative}    .img-content img{      position: absolute;      cursor: pointer;      transition: transform 2s;      -moz-transition: -moz-transform 2s;      -webkit-transition: -webkit-transform 2s;      -o-transition: -o-transform 2s;    }    .big{      z-index: 2;      transform:scale(2,2);      -ms-transform:scale(2,2); /* IE 9 */      -moz-transform:scale(2,2); /* Firefox */      -webkit-transform:scale(2,2); /* Safari and Chrome */      -o-transform:scale(2,2); /* Opera */    }    .normal{      transform:scale(1,1);      -ms-transform:scale(1,1); /* IE 9 */      -moz-transform:scale(1,1); /* Firefox */      -webkit-transform:scale(1,1); /* Safari and Chrome */      -o-transform:scale(1,1); /* Opera */    }  </style>  <script src='/images/loading.gif' data-original="../jquery/jquery.min.js"></script>  <script>    $(function(){      $('.img-content img').off().on('mouseover',function(){        $(this).addClass('big').removeClass('normal')      }).on('mouseout',function(){        $(this).addClass('normal').removeClass('big')      })    })  </script></head><body><div class="img-content">  <img src='/images/loading.gif' data-original="../images/tags1.png"  style="top: 10px;left: 50px;"/>  <img src='/images/loading.gif' data-original="../images/tags2.png"  style="top: 10px;left: 200px;"/>  <img src='/images/loading.gif' data-original="../images/tags3.png"  style="top: 10px;left: 350px;"/>  <img src='/images/loading.gif' data-original="../images/tags4.png"  style="top: 150px;left: 50px;"/>  <img src='/images/loading.gif' data-original="../images/tags5.png"  style="top: 150px;left: 200px;"/>  <img src='/images/loading.gif' data-original="../images/tags6.png"  style="top: 150px;left: 350px;"/></div></body></html>

原标题:css3 transition 实现图片放大缩小

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。