首页
所有分类
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 相关文章推荐
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JSONP跨域请求
Mar 02 Javascript
详谈Angular 2+ 的表单（一）之模板驱动型表单
Apr 25 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
详解Vite的新体验
Feb 22 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
Sqlite(2) 多线程(6) 多维数组(1) ICF-5900W(2) IDEA(2) EventBus(1) muduo(1) Spring-Retry(1) Spring Boot(5) Fragment(1)
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php中关于换行的实例写法
2019/09/26 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
socket.io与pm2（cluster）集群搭配的解决方案
2017/06/02 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python实现批量监控网站
2016/09/09 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
美国最大的万圣节服装网站：HalloweenCostumes.com
2017/10/12 全球购物
Skyscanner新西兰：全球领先的旅游搜索网站
2019/08/26 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
计算机学生求职信范文
2014/01/30 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
企业管理标语
2014/06/10 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
四大名著读书笔记
2015/06/25 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
演讲稿：​快乐，从不抱怨开始！
2019/04/02 职场文书
Nginx配置使用详解
2022/07/07 Servers