首页
所有分类
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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 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
swing(1) cudnn(1) SandBox(1) RTX 3050 ti(1) cudn(1) OpenFeign(1) 热力图(1) webpack(1) callback(1) Git(3)
You might like
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
前端性能优化及技巧
2016/05/06 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python计算信息熵实例
2020/06/18 Python
马来西亚时装购物网站：ZALORA马来西亚
2017/03/14 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌：Primitive Skateboarding
2019/10/29 全球购物
C#基础面试题
2016/10/17 面试题
2014年两会学习心得体会
2014/03/10 职场文书
语文教研活动总结
2014/07/02 职场文书
远程培训的心得体会
2014/09/01 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
vue中 this.$set的使用详解
2021/11/17 Vue.js
box-shadow单边阴影的实现
2023/05/21 HTML / CSS