首页
所有分类
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节点知识
Jan 31 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
React中使用Vditor自定义图片详解
Dec 25 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
欢迎词(65) 证婚词(21) 道歉信(39) 演讲稿(869) 表扬信(62) 心得体会(660) 介绍信(57) 创业计划书(312) 职业生涯规划书(234) 思想汇报(404)
You might like
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
用户注册常用javascript代码
2009/08/29 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
python实现二叉树的遍历
2017/12/11 Python
Python双向循环链表实现方法分析
2018/07/30 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python 切分数组实例解析
2019/11/07 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python短信轰炸的代码
2020/03/25 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
老板电器官方购物商城：老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
工程部经理岗位职责
2013/12/08 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
python自动化测试之Selenium详解
2022/03/13 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
Golang日志包的使用
2022/04/20 Golang