首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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));     
})();

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
js实现随机点名器精简版
Jun 29 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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
pytz(1) procedure(1) Tablespace(1) GoFrame(3) 内置函数(1) Navicat(1) V Rising(1) harbor(1) commit(1) 自定义函数(1)
You might like
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
php生成HTML文件的类方法
2019/10/11 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
js 实现 list转换成tree的方法示例（数组到树）
2019/08/18 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python实现文件信息进行合并实例代码
2018/01/17 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
浅析Python __name__ 是什么
2020/07/07 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
洛杉矶时尚女装系列：J.ING US
2019/03/17 全球购物
澳洲的UGG雪地靴超级市场：Uggs.com.au
2020/04/06 全球购物
门卫班长岗位职责
2013/12/15 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
《三峡》教学反思
2014/03/01 职场文书
优秀纪检干部材料
2014/08/27 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL