首页 > 代码库 > css3和js实现鼠标滑过图片微移动 平滑过渡
css3和js实现鼠标滑过图片微移动 平滑过渡
<!doctype html><html><head><meta charset="utf-8"><title>index</title> <script src="http://www.mamicode.com/jquery-1.11.1.min.js"></script> <body><div class="item"> <a href=""> <img src="http://www.mamicode.com/11.jpg"> </a></div><div class="item"> <a href=""> <img src="http://www.mamicode.com/11.jpg"> </a></div><style type="text/css">.item{ position:relative; width:295px; height:190px; overflow:hidden; border:1px solid; margin:10px;}.item a{ display:block;width:295px; height:190px;}.item a img{ -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; position:absolute; left:0}.item a:hover img{ position:absolute; left:-10px;}</style><script>$(".item").bind("mouseenter", function(){ $(this).find("img").stop(!0).animate({"left": "-10px"});}).bind("mouseleave", function(){ $(this).find("img").stop(!0).animate({"left": "0px"});});</script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。