ホームページ > 記事 > ウェブフロントエンド > 画像ズームを実現するcss3遷移_html/css_WEB-ITnose
画像ズームを実現するcss3遷移_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:361825ブラウズ
rreee
画像サイズ 128 * 128
<!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="../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/tags1.png" alt="" style="top: 10px;left: 50px;"/> <img src="../images/tags2.png" alt="" style="top: 10px;left: 200px;"/> <img src="../images/tags3.png" alt="" style="top: 10px;left: 350px;"/> <img src="../images/tags4.png" alt="" style="top: 150px;left: 50px;"/> <img src="../images/tags5.png" alt="" style="top: 150px;left: 200px;"/> <img src="../images/tags6.png" alt="" style="top: 150px;left: 350px;"/></div></body></html> transition 定义过度效果，1、可同时设置几个css样式，2、可定义transform（2d 3d 转换）的过度效果
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。