jquery圖片放大鏡功能的實(shí)例代碼
/*放大鏡*/
.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">
/**
@開發(fā)：楊永
@功能：實(shí)現(xiàn)細(xì)節(jié)放大，圖片對(duì)應(yīng)切換，自由定義css樣式實(shí)現(xiàn)自由鋪滿視口等功能
@說(shuō)明：基于jQ的放大鏡插件，可根據(jù)需要自由調(diào)整布局來(lái)適應(yīng)各種設(shè)計(jì)效果
*/
(function(){
function Zoom(object){
this.zoomArea=$(".zoom",object);//保存促發(fā)放大效果的區(qū)域
this.moveArea=$(".move",object);//保存移動(dòng)區(qū)域
this.zoomDetail=$(".zoomDetail",object);//保存放大鏡區(qū)域
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();//初始化放大區(qū)域在視口中的相對(duì)偏移;
this.XY=null;//初始化鼠標(biāo)相對(duì)于放大區(qū)域的偏移偏移值
this.moveBili=null;//
var _this_=this;
this.zoomArea.mousemove(function(e){//當(dāng)鼠標(biāo)在放大區(qū)域移動(dòng)的時(shí)候執(zhí)行
_this_.move(e.pageX,e.pageY);
}).mouseover(function(){
_this_.moveArea.show();
_this_.zoomDetail.show();
}).mouseout(function(){
_this_.moveArea.hide();
_this_.zoomDetail.hide();
});
this.calculate();//初始化并計(jì)算出需要的比例值
//以下是小圖部分的功能實(shí)現(xiàn)
this.l=0;
this.scrollObj=$(".slideMain ul",object);//保存ul滾動(dòng)對(duì)象
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){//判斷圖片數(shù)是否超出顯示區(qū)域，是的話就注冊(cè)滾動(dòng)事件
this.s=this.lis.length-6;//獲取多余出來(lái)的圖片數(shù)
this.scrollObj.width(60*this.lis.length+"px");//當(dāng)圖片數(shù)超出默認(rèn)值時(shí)，設(shè)置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){
//改變標(biāo)識(shí)樣式
$(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){//鼠標(biāo)在放大區(qū)域移動(dòng)的時(shí)候執(zhí)行的函數(shù)
this.XY=this.mousePosAndSetPos(x,y);//計(jì)算出鼠標(biāo)相對(duì)于放大區(qū)域的x,y值
//設(shè)置滑塊的位置
this.moveArea.css({
left:this.XY.offsetX+"px",
top:this.XY.offsetY+"px"
});
//設(shè)置大圖在細(xì)節(jié)位置
this.zoomDetailImg.css({
marginLeft:-this.XY.offsetX*this.moveBili+"px",
marginTop:-this.XY.offsetY*this.moveBili+"px"
});
},
mousePosAndSetPos:function(x,y){//實(shí)時(shí)計(jì)算并設(shè)置滑塊的位置
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(){//計(jì)算函數(shù)
var widthBili,heightBili;
//計(jì)算移動(dòng)的滑塊與放大鏡鋪面顯示的比例寬高
widthBili=(this.zoomAreaWidth*this.zoomDetailWidth)/this.moveAreaWidth;
heightBili=(this.zoomAreaHeight*this.zoomDetailHeight)/this.moveAreaHeight;
//把比出來(lái)的寬高
this.zoomDetailImg.css({width:widthBili+"px",height:heightBili+"px"});
//返回移動(dòng)的比例
this.moveBili=(widthBili-this.zoomDetailWidth)/(this.zoomAreaWidth-this.moveAreaWidth);
}
};
var zoom=new Zoom($(".ZoomMain").eq(0));
})();
相關(guān)文章
Jquery Ajax Error 調(diào)試錯(cuò)誤的技巧
jquery在程序開發(fā)ajax應(yīng)用程序時(shí)提高了效率，減少了需要兼容性的問題，當(dāng)我們?cè)赼jax項(xiàng)目中，遇到ajax異步獲取數(shù)據(jù)出錯(cuò)該怎么解決呢，我們可以通過(guò)捕捉error事件來(lái)獲取出錯(cuò)的信息，本文給大家介紹jquery ajax error調(diào)試錯(cuò)誤的技巧，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
本篇文章主要是對(duì)jQuery中Dom的基本操作進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
jQuery實(shí)現(xiàn)限制文本框的輸入長(zhǎng)度
本文分享了jQuery實(shí)現(xiàn)限制文本框的輸入長(zhǎng)度的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法,涉及jQuery針對(duì)頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2016-02-02
JQuery 國(guó)際象棋棋盤 實(shí)現(xiàn)代碼
前些時(shí)候?yàn)榱耸煜?guó)際象棋的各種開局，隨手寫了一個(gè)很簡(jiǎn)單的國(guó)際象棋棋盤（實(shí)在找不到現(xiàn)成的）。2009-06-06
jquery對(duì)象和DOM對(duì)象的任意相互轉(zhuǎn)換
這篇文章主要介紹了jquery對(duì)象和DOM對(duì)象的任意相互轉(zhuǎn)換的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
本文主要介紹了字太多用...代替的兩種方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
通過(guò)jQuery源碼學(xué)習(xí)javascript(一)
最近在做日志統(tǒng)計(jì)程序，發(fā)現(xiàn)對(duì)方的程序是在Jquery基礎(chǔ)上進(jìn)行開發(fā)的，而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼，故決定研究Jquery源碼，模擬它的方法2012-12-12
用jQuery技術(shù)實(shí)現(xiàn)Tab頁(yè)界面之二
這個(gè)tab頁(yè)是把數(shù)據(jù)全部取回來(lái)再顯示，所以沒有數(shù)據(jù)緩存的特點(diǎn)。但是因?yàn)閿?shù)據(jù)全部是顯示的html代碼，所以對(duì)搜索引擎是友好的，也許對(duì)seo有好處。2009-09-09
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。2014-07-07