如何用jquery做出放大镜效果

来源：保埃科技网

这次给大家带来如何用jquery做出放大镜效果，用jquery做出放大镜效果的注意事项有哪些，下面就是实战案例，一起来看一下。

jquery写的两种放大镜效果，没有使用到插件。调理和思路清晰。不是使用面向对象方式写的，初学者较容易看懂。废话不多说，看代码。图片这里就不上传了，大家自己找下。最好是找到比例的，这样效果比较好。

<body> 
 <p id="father"> 
 <p id="container"> 
 <img src="img/400_1.jpg" style="display: block;"> 
 <img src="img/400_2.jpg" > 
 <p class="shade"></p> 
 </p> 
 <p class="small first"><img src="img/50_1.jpg"></p> 
 <p class="small second"><img src="img/50_2.jpg"></p> 
 </p> 
 <p class="big"> 
 <img src="img/800_1.jpg" style="display: block;"> 
 <img src="img/800_2.jpg"> 
 </p> 
</body>

css代码

*{padding: 0; margin: 0;} 
 #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
 #father .second{left: 70px;} 
 .third{left: 140px;} 
 #father{position: relative; top: 100px; left: 50px; height: 460px;} 
 #container{position: absolute; width: 400px; height: 400px;} 
 #container img{position: absolute; display: none;} 
 
 .shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0; 
 left: 0; display: none;} 
 .big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;} 
 .big img{width: 800px; height: 800px; position: absolute; display: none;}

js代码

以上是常用的，下面这个是在原图基础上放大的

htm

<body> 
 <p id="father"> 
 <p id="container"> 
 <img src="img/400_1.jpg" style="display: block;"> 
 <img src="img/400_2.jpg" > 
 <img src="img/400_3.jpg" > 
 <p class="shade"> 
 <img src="img/800_1.jpg" style="display: block;"> 
 <img src="img/800_2.jpg"> 
 <img src="img/800_3.jpg"> 
 </p> 
 </p> 
 <p class="small first"><img src="img/50_1.jpg"></p> 
 <p class="small second"><img src="img/50_2.jpg"></p> 
 <p class="small third"><img src="img/50_3.jpg"></p> 
 </p> 
</body>

css代码

*{padding: 0; margin: 0;} 
 #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
 #father .second{left: 70px;} 
 .third{left: 140px;} 
 #father{position: relative; top: 100px; left: 50px; height: 460px;} 
 #container{position: absolute; width: 400px; height: 400px;} 
 #container img{position: absolute; display: none;} 
 .shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;} 
 .shade img{display: none; width: 800px; height: 800px; position: absolute;}

js代码

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！