仿淘宝/京东商城的产品局部放大特效,放大镜效果

2017-12-09 建站知识 浏览 手机预览
文章来源:http://www.dedecmsok.com/html/n173.html

特点:
1、兼容大多数浏览器(测试 IE6+, Firefox, Chrome, Opera, Safari)
2、6KB(缩小的)脚本
3、色调、柔焦和内变焦功能
4、正常降级,使用Javascript关闭特效

首先引入jquery-1.8.2.min.js文件【点击下载】,如果你的网站已经加载了jquery-1.8.2.min.js文件或更高的版本,忽略此步。

然后引入特效所需要的JS文件【点击下载】(不能引入到jquery的前面),就像这样:

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="zoom.min.js"></script>

CSS代码如下:

<style type="text/css">
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
.cloud-zoom{border:2px solid #CCC;}
.cloud-zoom-big{border:4px solid #ccc;overflow:hidden;}
.cloud-zoom-lens{border:4px solid #888;margin:-4px;background-color:#fff;cursor:move;}
.cloud-zoom-gallery{text-decoration:none!important;}
</style>

HTML代码如下:

<div class="zoom-small-image">

  <a href="默认图片地址" class="cloud-zoom" id="zoom1" rel="adjustX:10, adjustY:-4">
    <img src="默认图片地址" width="260" height="260"/>
  </a>
	  	
  <div style="padding:5px;">
    <a href="图片地址-1" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-1'">
      <img class="zoom-tiny-image" src="图片地址-1" width="50" height="50">
    </a>
    <a href="图片地址-2" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-2'">
      <img class="zoom-tiny-image" src="图片地址-2" width="50" height="50">
    </a>
    <a href="图片地址-3" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-3'">
      <img class="zoom-tiny-image" src="图片地址-3" width="50" height="50">
    </a>
    <a href="图片地址-4" class="cloud-zoom-gallery" rel="useZoom:'zoom1',smallImage: '图片地址-4'">
      <img class="zoom-tiny-image" src="图片地址-4" width="50" height="50">
    </a>
  </div>
  
</div>


原文地址:http://www.dedecmsok.com/html/n173.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知