<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标悬浮图片放大特效</title><link rel="stylesheet" type="text/css" href="../../style/reset.css"><link rel="stylesheet" type="text/css" href="../../style/font-awesome.min.css"><script type="text/javascript" src="../../scripts/jquery-3.2.1.min.js"></script><style type="text/css"> #gallery{width: 1600px;margin: 100px auto;}#gallery>ul>li{width: 380px;height: 230px;float: left;margin: 0 10px;/*父元素相对定位*/position: relative;}#gallery>ul>li>a>img{width: 380px;height: 230px;z-index: 1;/*子元素绝对定位*/position: absolute;}#gallery>ul>li>a>img:hover{/*堆叠层级高于之前*/z-index: 2;}h1{clear:both;}</style></head><body><!--实现鼠标悬浮图片放大特效--><div id="gallery"><ul><li><a href="../../images/bvdk.jpg" class="tooltip" title="办公场景一"><img src="../../images/bvdk.jpg"/></a></li><li><a href="../../images/bxbt.jpg" class="tooltip" title="办公场景二"><img src="../../images/bxbt.jpg"/></a></li><li><a href="../../images/bxctr.jpg" class="tooltip" title="办公场景三"><img src="../../images/bxctr.jpg"/></a></li><li><a href="../../images/bxetc.jpg" class="tooltip" title="办公场景四"><img src="../../images/bxetc.jpg"/></a></li></ul> </div><script type="text/javascript">/*注意 坑-6-111.不宜使用 mouseover()和mouseout()方法2.stop()方法阻止了动画叠加行为3.z-index千万别写在动画里面，堆叠顺序一定要写正确4.margin值的计算方法为(430-380)/2和(280-230)/25.要正确使用position定位*/$(function(){$("#gallery>ul>li>a>img").mouseenter(function(){$(this).stop().animate({"width":"430px","height":"280px","margin":"-25px"},200);}).mouseleave(function(){$(this).stop().animate({"width":"380px","height":"230px","margin":"0"});});});</script></body></html>
