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

 更新时间:2013年03月26日 09:16:13   转载 作者:  
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 toolbar与网页浮动工具条具体实现代码

    jquery toolbar与网页浮动工具条具体实现代码

    toolbar 网页浮动工具条非常实用的一个功能,下面为大家介绍下使用jquery如何快速做到
    2014-01-01
  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    文字逐行或多行滚动跑马灯插件,基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)
    2010-07-07
  • jQuery数据显示插件整合实现代码

    jQuery数据显示插件整合实现代码

    由于我们公司的产品涉及到很多的表格数据显示,而且每张表的字段数都很多,在工作过程中(几任同仁的努力),整合出一套自认为较为轻巧的方案
    2011-10-10
  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
    2008-06-06
  • Jquery实现鼠标移动放大图片功能实例

    Jquery实现鼠标移动放大图片功能实例

    这篇文章主要介绍了Jquery实现鼠标移动放大图片功能,实例分析了jQuery操作鼠标与图片的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    jQuery ajax仿Google自动提示SearchSuggess功能示例

    这篇文章主要介绍了jQuery ajax仿Google自动提示SearchSuggess功能,结合实例形式较为详细的分析了jQuery结合ajax与.net后台调用sql数据库实现搜索自动提示相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • jquery下实现overlay遮罩层代码

    jquery下实现overlay遮罩层代码

    下面是个应用的小例子用来统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换,当ajax出错时提示用户
    2010-08-08
  • jQuery动态移除和添加背景图片的方法详解

    jQuery动态移除和添加背景图片的方法详解

    这篇文章主要介绍了jQuery动态移除和添加背景图片的方法,结合实例形式分析了jQuery针对页面元素样式及事件响应的动态操作技巧,需要的朋友可以参考下
    2017-03-03
  • 读jQuery之五(取DOM元素)

    读jQuery之五(取DOM元素)

    使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。
    2011-06-06
  • jQuery取消特定的click事件

    jQuery取消特定的click事件

    这篇文章主要介绍了jQuery取消特定的click事件实现方法,结合实例形式分析了jQuery简单实现事件绑定及取消事件绑定的相关技巧,需要的朋友可以参考下
    2016-02-02

最新评论