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的商品展示放大镜
直接上代码吧(一共也才100来行,小东西) 复制代码 代码如下: $(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; _el(&
-
关于Jqzoom的使用心得 jquery放大镜效果插件
下面是完整的代码 jqzoom打包下载地址 复制代码 代码如下: <html> <head> <title>JQzoom Demo</title> <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js"
-
Jquery实现图片放大镜效果的思路及代码(自写)
网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个.大笑 算法: 第一步: 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比 第二部: 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间. 效果图: 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html>
-
jquery图片放大镜效果
昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件, 基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x,y)然后计算 x/小图的宽度*大图得宽度/2 y/小图的高度*大图得高度/2 计算出来的两个结果即为大图得左右偏移距离 /2是为了让右边区域不会出现空白. 经过测试,ie7以上以及主流浏览器都可以用,代码如下: <div class="wrap"> <div class="small">
-
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi
-
基于Jquery插件开发之图片放大镜效果(仿淘宝)
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
-
使用jquery实现放大镜效果
实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中. 首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框:显示框里面存放大图对象.当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果. 接下来,让我们定义Index.html页
-
jquery放大镜效果超漂亮噢
这个放大镜的代码挺简单滴效果也不错. 复制代码 代码如下: <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.4, cursor: "move", // 大图外层样式 layerwidth: 4
-
用JQuery模仿淘宝的图片放大镜显示效果
如图 今天我做的是利用JQuery模拟这个效果 源码如下 复制代码 代码如下: <head> <script type="text/javascript" src="Js/jquery-1.4.1.js"></script> <script type="text/javascript"> //假设data是从数据库取到的数据 var data = {"images/1_small.jpg&
-
基于jquery的放大镜效果
核心代码: 复制代码 代码如下: $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的X百分比 var perY = 0; //移动的Y百分比 var bigLeft