jquery图片放大镜功能的实例代码


Posted in Javascript onMarch 26, 2013

jquery图片放大镜功能的实例代码

/*放大镜*/ 
.ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;} 
.ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;} 
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:195px; height:195px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);} 
.ZoomMain .zoomDetail{display:none;border:1px solid #DCDDDD;width:393px; height:393px; position:absolute;right:-405px;top:0px; overflow:hidden;} 
.littleImg {margin-top:10px;height:54px;overflow:hidden;position:relative;} 
.littleImg span {position: absolute;display:block;width:10px;height:55px;background:#999;cursor:pointer;} 
.littleImg span em {display: none;width:10px;height:55px;} 
.littleImg span.btnL {left:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;} 
.littleImg span.btnL em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;} 
.littleImg span.btnR em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;} 
.littleImg span.btnR {right:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;} 
.littleImg span.hover em {display:block;} 
.littleImg .slideMain {width:343px;height:55px;margin-left:26px;overflow:hidden;position:relative;} 
.littleImg .slideMain ul {position:absolute;left:0;width:355px;padding-top:1px;} 
.littleImg .slideMain ul li {float:left;margin-right:6px;cursor:pointer;width:50px;height:50px;border:1px solid #dbdbdb;} 
.littleImg .slideMain ul li.selected {border-color:#999;} 
.littleImg .slideMain ul li img {float:left;width:50px;height:50px;} 
/*放大镜end*/ 
</style> 
</head> 
<body> 
<!--放大镜-->
<div class="ZoomMain"> 
  <div class="zoom"> 
         <span class="move"></span> 
         <img width="393" height="390"  src="1347000569971.jpg" /> 
  </div> 
  <div class="littleImg"> 
       <span class="btnL"><em></em></span> 
       <span class="btnR"><em></em></span> 
        <div class="slideMain"> 
              <ul class="clearfix"> 
                <li class="selected"><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
                <li><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
                <li><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
                <li><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
                <li><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
                <li><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
                <li><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> 
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000590691.jpg" large-img="1347000590691.jpg" /></li> 
              </ul> 
        </div> 
  </div> 
  <div class="zoomDetail"> 
            <img width="701" height="701" src="1347000569971.jpg" /> 
  </div> 
</div> 
<!--放大镜end--> 


?<script type="text/javascript"> 
/** 
@开发:杨永 
@功能:实现细节放大,图片对应切换,自由定义css样式实现自由铺满视口等功能 
@说明:基于jQ的放大镜插件,可根据需要自由调整布局来适应各种设计效果 
*/
(function(){ 
        function Zoom(object){ 
                this.zoomArea=$(".zoom",object);//保存促发放大效果的区域 
                this.moveArea=$(".move",object);//保存移动区域 
                this.zoomDetail=$(".zoomDetail",object);//保存放大镜区域 
                this.zoomDetailImg=$("img",this.zoomDetail);//保存放大镜里面的图 
                this.zoomAreaWidth=this.zoomArea.width(); 
                this.moveAreaWidth=this.moveArea.width(); 
                this.zoomAreaHeight=this.zoomArea.height(); 
                this.moveAreaHeight=this.moveArea.height(); 
                this.zoomDetailWidth=this.zoomDetail.width(); 
                this.zoomDetailHeight=this.zoomDetail.height(); 
                this.zoomAreaOffset=this.zoomArea.offset();//初始化放大区域在视口中的相对偏移; 
                this.XY=null;//初始化鼠标相对于放大区域的偏移偏移值 
                this.moveBili=null;// 
                var _this_=this; 
                this.zoomArea.mousemove(function(e){//当鼠标在放大区域移动的时候执行 
                                                 _this_.move(e.pageX,e.pageY);    
                                        }).mouseover(function(){ 
                                            _this_.moveArea.show(); 
                                            _this_.zoomDetail.show(); 
                                            }).mouseout(function(){ 
                                                _this_.moveArea.hide(); 
                                                _this_.zoomDetail.hide();                                                
                                                }); 
                this.calculate();//初始化并计算出需要的比例值 
                //以下是小图部分的功能实现 
                this.l=0; 
                this.scrollObj=$(".slideMain ul",object);//保存ul滚动对象 
                this.lis=this.scrollObj.children();//保存小图片列表 
                this.btnR=$(".btnR",object);//保存右边按钮 
                this.btnL=$(".btnL",object);//保存左边边按钮 
                this.lis.click(function(){ 
                                        _this_.changeImgSrc(this); 
                                        }); 
                if(this.lis.length>6){//判断图片数是否超出显示区域,是的话就注册滚动事件 
                    this.s=this.lis.length-6;//获取多余出来的图片数 
                    this.scrollObj.width(60*this.lis.length+"px");//当图片数超出默认值时,设置ul的宽度 
                    this.btnL.click(function(){_this_.scrollRight();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");}); 
                    this.btnR.click(function(){_this_.scrollLeft();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");});; 
                } 
              }; 
        Zoom.prototype={ 
            scrollLeft:function(){ 
                if(Math.abs(this.l)==this.s){return}; 
                this.l--; 
                this.scrollObj.animate({left:this.l*58+"px"},"fast");    
                }, 
            scrollRight:function(){ 
                if(this.l==0){return}; 
                this.l++; 
                this.scrollObj.animate({left:this.l*58+"px"},"fast"); 
                }, 
            changeImgSrc:function(o){ 
                //改变标识样式 
                $(o).addClass("selected").siblings().removeClass("selected"); 
                this.zoomArea.find("img").attr("src",$(o).find("img").attr("medium-img")); 
                this.zoomDetailImg.attr("src",$(o).find("img").attr("medium-img")); 
                }, 
            move:function(x,y){//鼠标在放大区域移动的时候执行的函数 
                    this.XY=this.mousePosAndSetPos(x,y);//计算出鼠标相对于放大区域的x,y值 
                    //设置滑块的位置 
                    this.moveArea.css({ 
                                      left:this.XY.offsetX+"px", 
                                      top:this.XY.offsetY+"px"
                                      }); 
                    //设置大图在细节位置 
                    this.zoomDetailImg.css({ 
                                           marginLeft:-this.XY.offsetX*this.moveBili+"px", 
                                           marginTop:-this.XY.offsetY*this.moveBili+"px"
                                           }); 
                }, 
            mousePosAndSetPos:function(x,y){//实时计算并设置滑块的位置 
                x=x-this.zoomAreaOffset.left-this.moveArea.width()/2; 
                y=y-this.zoomAreaOffset.top-this.moveArea.height()/2; 
                x=x<0?0:x; 
                y=y<0?0:y; 
                x=x>(this.zoomAreaWidth-this.moveAreaWidth)?this.zoomAreaWidth-this.moveAreaWidth:x; 
                y=y>(this.zoomAreaHeight-this.moveAreaHeight)?this.zoomAreaHeight-this.moveAreaHeight:y; 
                return { 
                        offsetX:x, 
                        offsetY:y 
                        };   
                }, 
            calculate:function(){//计算函数 
                    var widthBili,heightBili; 
                    //计算移动的滑块与放大镜铺面显示的比例宽高 
                    widthBili=(this.zoomAreaWidth*this.zoomDetailWidth)/this.moveAreaWidth; 
                    heightBili=(this.zoomAreaHeight*this.zoomDetailHeight)/this.moveAreaHeight; 
                    //把比出来的宽高 
                    this.zoomDetailImg.css({width:widthBili+"px",height:heightBili+"px"}); 
                    //返回移动的比例 
                    this.moveBili=(widthBili-this.zoomDetailWidth)/(this.zoomAreaWidth-this.moveAreaWidth); 
                } 
            }; 
          var zoom=new Zoom($(".ZoomMain").eq(0));     
})();
Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
javascript学习之闭包分析
Dec 02 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 #Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 #Javascript
JS上传前预览图片实例
Mar 25 #Javascript
js实现杯子倒水问题自动求解程序
Mar 25 #Javascript
js实现上传图片之上传前预览图片
Mar 25 #Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 #Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 #Javascript
You might like
图象函数中的中文显示
2006/10/09 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP7新增函数
2021/03/09 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python多线程和队列操作实例
2015/06/21 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
职业规划书如何设计?
2014/01/09 职场文书
《小池塘》教学反思
2014/02/28 职场文书
节能减耗标语
2014/06/21 职场文书
软件测试专业推荐信
2014/09/18 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
小学生学习保证书
2015/02/26 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL