jQuery放大镜插件_仿淘宝图片放大浏览效果
2015-06-24 09:00:17  By: dwtedx

本Demo是一款jQuery图片放大镜插件、是一款简单实用的jQuery图片放大镜效果、点击缩略图可以切换大图、鼠标划过大图出现放大镜图片、可拖动放大镜区域查看图片细节、类似淘宝放大镜代码、适用于电子商务网站使用、效果非常不错、以前也增分享过一款类似的插件、在右上上方搜索关键词就可以了、可以对比一下、看你用那个更合适

jquery放大镜效果


HTML代码

<div class="con-FangDa" id="fangdajing">
  <div class="con-fangDaIMg">
  	<!-- 正常显示的图片-->
  	<img src="images/big/1.jpg">
    <!-- 滑块-->  
    <div class="magnifyingBegin"></div>
    <!-- 放大镜显示的图片 -->
    <div class="magnifyingShow">
		<img src="images/big/1.jpg">
	</div>
  </div>
  
  <ul class="con-FangDa-ImgList">
    <!-- 图片显示列表 -->
    <li class="active">
		<img src="images/thumb/1.jpg" 
			data-bigimg="images/big/1.jpg">
	</li>
    <li>
		<img src="images/thumb/2.jpg" 
			data-bigimg="images/big/2.jpg">
	</li>
    <li>
		<img src="images/thumb/3.jpg" 
			data-bigimg="images/big/3.jpg">
	</li>
    <li>
		<img src="images/thumb/4.jpg" 
			data-bigimg="images/big/4.jpg">
	</li>
    <li>
		<img src="images/thumb/5.jpg" 
			data-bigimg="images/big/5.jpg">
	</li>
  </ul>
</div>


JS和CSS代码已经写好了、直接引用即可

<link rel="stylesheet" type="text/css" href="css/zzsc.css">

<script type="text/javascript" class="library" 
	src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" class="library" 
	src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" class="library" 
	src="js/zzsc.js"></script>


最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1pYNoE 密码: q7yx

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+