俄罗斯的一款商品图片放大镜jquery插件，类似于淘宝商品在鼠标悬停上去，右侧显示细节放大镜窗口。zoomsl插件兼容IE8+、Chrome 1+、Firefox 2+、safari 2+浏览器。商业许可及个人许可均免费。

插件官网：http://zoomsl.sergeland.ru/

演示下载：http://zoomsl.sergeland.ru/example/

插件教程

基础应用

HTML代码结构：

<img class="my-foto" src="/images/image1-small.jpg"  data-large="/images/image1-big.jpg" >
<img class="my-foto" src="/images/image2-small.jpg"  data-large="/images/image2-big.jpg" >
<img class="my-foto" src="/images/image3-small.jpg"  data-large="/images/image3-big.jpg" >

jquery代码：

<script src="js/jquery.min.js"></script>
<script src="js/zoomsl-3.0.min.js"></script>
<script>
   jQuery(function(){   
      $(".my-foto").imagezoomsl({        
         zoomrange: [3, 3]
      });
   });   
</script>

画廊应用

HTML代码：

//当前图片
<img class="my-foto-container" src="/images/image1-small.jpg"  data-large="/images/image1-big.jpg" >

//小图
<img class="my-foto" src="/images/image1-small.jpg"  data-large="/images/image1-big.jpg" >
<img class="my-foto" src="/images/image2-small.jpg"  data-large="/images/image2-big.jpg" >
<img class="my-foto" src="/images/image3-small.jpg"  data-large="/images/image3-big.jpg" >

jQuery代码：

jQuery(function(){
	$(".my-foto-container").imagezoomsl();
	$(".my-foto").click(function(){
	   var that = this;
	   $(".my-foto-container").fadeOut(600, function(){
		 $(this).attr("src",              $(that).attr("src"))              
				.attr("data-large",       $(that).attr("data-large")) 
				
				//.attr("data-title",       $(that).attr("data-title"))      
				//.attr("data-help",        $(that).attr("data-help"))        
				//.attr("data-text-bottom", $(that).attr("data-text-bottom")) 
				
				.fadeIn(1000);				
	   });
   });	  
});   

参数说明

IMG标签属性：

插件参数

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。