jquery实现鼠标移入移出图片放大缩小的效果
和大家分享一个最近我用到的jquery实现图片的放大缩小的特效。具体效果是鼠标移动到图片上，图片自动缩到左上角，右下角出现文字说明，鼠标移走后图片恢复，文字被图片遮挡。非常不错的一个图片特效功能。贴一下效果图：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ margin: 50px auto; } .dd{ width: 1100px; } .tt{ background-color:darkgrey; width:325px; height:260px; overflow:hidden; margin:5px; float:left; } .cc{ margin-left:10px; font-family:arial; padding:3px; } .cc h2{ color: darkcyan; } .cc p{ color: darkmagenta; } .clear{ clear:both; margin-top:10px; } </style> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.tt').hover( function(){ $(this).find('img').animate({width:100, marginTop:10, marginLeft:10}, 500); }, function(){ $(this).find('img').animate({width:325, marginTop:0, marginLeft:0},300); }); }); </script> </head> <body> <div class="dd"> <div class="tt"> <img width="325" height="260" src="https://www.qiquanji.com/data/img/dmj/201907251564026339179503.jpg" /> <div class="cc"> <h2>01</h2> <p> 第一张图 </p> </div> </div> <div class="tt"> <img width="325" height="260" src="https://www.qiquanji.com/data/img/dmj/201907251564026339258015.jpg" /> <div class="cc"> <h2>02</h2> <p> 第二张图 </p> </div> </div> <div class="tt"> <img width="325" height="260" src="https://www.qiquanji.com/data/img/dmj/201907251564026339573702.jpg" /> <div class="cc"> <h2>03</h2> <p> 第三张图 </p> </div> </div> </div> </body> </html> 效果：
原文链接：https://www.qiquanji.com/post/8142.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知