jQuery實(shí)現(xiàn)放大鏡案例
更新時(shí)間：2020年10月19日 17:02:39 作者：willard_cui
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)放大鏡案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
動(dòng)畫(huà)：
1、鼠標(biāo)移入顯示區(qū)圖片時(shí)，顯示選擇框；
2、放大鏡特效，將圖片位于選擇框內(nèi)的部分放大顯示；
3、點(diǎn)擊下方小圖片和左右移動(dòng)按鈕時(shí)正確的顯示圖片
實(shí)現(xiàn)方法：
1、放大效果：放大區(qū)的與顯示區(qū)使用相同的圖片，并設(shè)置放大區(qū)圖片的長(zhǎng)寬為顯示區(qū)的二倍；
2、選擇框拖動(dòng)效果：鼠標(biāo)移動(dòng)時(shí)獲得鼠標(biāo)的坐標(biāo)，并根據(jù)選擇框的和圖片的offset()屬性計(jì)算出選擇框的新位置。同時(shí)修改放大區(qū)圖片的位置，使其與選擇框內(nèi)的部分對(duì)應(yīng)；
3、點(diǎn)擊小圖片效果：修改小圖片的class改變其樣式，同時(shí)修改顯示區(qū)和放大區(qū)圖片的src顯示對(duì)應(yīng)的圖片；
4、左移按鈕：點(diǎn)擊時(shí)通過(guò)each函數(shù)找到當(dāng)前顯示的圖片，然后判斷是否為第一張圖片，如果是第一張圖片則將最后一張圖片設(shè)置為要顯示的圖片，修改其樣式，同時(shí)修改顯示區(qū)和放大區(qū)圖片的src顯示對(duì)應(yīng)的圖片。若果不是第一張圖片，則將前一張圖片設(shè)置為要顯示的圖片，修改其樣式，同時(shí)修改顯示區(qū)和放大區(qū)圖片的src顯示對(duì)應(yīng)的圖片；
5、右移按鈕：原理有左移按鈕相同。
（詳見(jiàn)下方代碼）
動(dòng)畫(huà)效果：
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>放大鏡</title> <script src="../jquery.min.js"></script> <link rel="stylesheet" href="style.css" > </head> <body> <div id="container"> <div class="box"> <div class="normal"><img src="images/1.jpg" alt="圖片"> <div class="kuang"></div> </div> <div class="small"> <div class="left"><img src="images/left.gif" alt="left"></div> <div class="right"><img src="images/right.gif" alt="right"></div> <div class="item"> <ul> <li class="selected"><img src="images/1.jpg" alt="圖片"></li> <li><img src="images/2.jpg" alt="圖片"></li> <li><img src="images/3.jpg" alt="圖片"></li> <li><img src="images/4.jpg" alt="圖片"></li> <li><img src="images/5.jpg" alt="圖片"></li> </ul> </div> </div> </div> <div class="big"><img src="images/1.jpg" alt="圖片"></div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
css代碼
*{
margin: 0;
padding: 0;
list-style: none;
}
#container{
margin: 50px auto;
width: 1000px;
}
.box{
position: relative;
float: left;
width: 400px;
height: 380px;
}
.normal{
position: relative;
width: 400px;
height: 300px;
}
.normal img{
width: 400px;
height: 300px;
}
.small{
margin-top: 10px;
width: 400px;
height: 60px;
}
.small .left{
position: relative;
float: left;
width: 10px;
height: 60px;
}
.small .right{
position: relative;
float: right;
width: 10px;
height: 60px;
}
.item ul li{
position: relative;
float: left;
margin-left: 5px;
padding: 1px;
width: 66px;
height: 40px;
border: 1px solid #ccc;
}
.item ul li img{
width: 100%;
height:100%;
}
.big{
display: none;
position: relative;
float: left;
margin-left: 20px;
width: 400px;
height: 300px;
overflow: hidden;
}
.big img{
position: relative;
left: 0;
top: 0;
width: 800px;
height: 600px;
}
.box .kuang{
display: none;
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 150px;
opacity: 0.5;
background: #00f;
}
.item ul .selected{
border: 1px solid orange;
}
jQuery代碼
$(document).ready(function () {
//當(dāng)鼠標(biāo)進(jìn)入圖片時(shí)顯示放大框和放大圖像
$(".normal").mouseenter(function () {
$(".kuang").show();
$(".big").show();
})
//當(dāng)鼠標(biāo)離開(kāi)圖片時(shí)隱藏放大框和放大圖像
$(".normal").mouseleave(function () {
$(".kuang").hide();
$(".big").hide();
})
//按下鼠標(biāo)拖動(dòng)放大框，右側(cè)放大顯示圖片位于放大框內(nèi)的部分
$(".kuang").mousedown(function (e) {
x=e.pageX-$(this).offset().left;
y=e.pageY-$(this).offset().top;
// console.log($(this).offset().top);
//console.log(y);
$(document).on("mousemove",function(e){
var _x=e.pageX-x-$(".box").offset().left;
var _y=e.pageY-y-$(".box").offset().top;
//設(shè)置_x和_y的范圍
if (_x<0){
_x=0;
}else if (_x>200){
_x=200;
}
if (_y<0){
_y=0;
} else if(_y>150){
_y=150;
}
$(".kuang").css({"left": _x, "top": _y});
$(".big img").css({"left":-2*_x,"top":-2*_y});
})
})
//鼠標(biāo)抬起時(shí)停止取消拖動(dòng)
$(document).mouseup(function () {
$(document).off("mousemove");
})
//點(diǎn)擊左側(cè)下方小圖片時(shí)，左側(cè)上方顯示相應(yīng)的圖片，且左側(cè)放大區(qū)也更改為與小圖片對(duì)應(yīng)的圖片
$(".item ul li img").click(function () {
$(this).parent().addClass("selected")
$(this).parent().siblings().removeClass("selected");
$(".normal img").attr("src",$(this).attr("src"));
$(".big img").attr("src",$(this).attr("src"));
});
//點(diǎn)擊向左按鈕，選中當(dāng)前顯示圖片的前一張圖片，小圖片樣式做相應(yīng)的修改。圖片顯示區(qū)和右側(cè)圖片放大區(qū)都改為前一張圖片
$(".left").click(function () {
$(".small li").each(function (index,value) {
if($(value).attr("class")=="selected"){
//如果當(dāng)前顯示第一張圖片，則點(diǎn)擊向左按鈕時(shí)顯示最后一張圖片
if(index==0){
$(value).removeClass("selected")
$(".small li").eq(4).addClass("selected");
$(".normal img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
$(".big img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
return false;
}
if (index>0) {
$(value).removeClass("selected").prev().addClass("selected");
console.log($(value).prev().children().eq(0).attr("src"));
$(".normal img").attr("src",$(value).prev().children().eq(0).attr("src"));
$(".big img").attr("src",$(value).prev().children().eq(0).attr("src"));
}
}
})
});
//點(diǎn)擊向右按鈕，選中當(dāng)前顯示圖片的下一張圖片，小圖片樣式做相應(yīng)的修改。圖片顯示區(qū)和右側(cè)圖片放大區(qū)都改為下一張圖片
$(".right").click(function () {
$(".small li").each(function (index,value) {
if($(value).attr("class")=="selected"){
//如果當(dāng)前顯示最后一張圖片，則點(diǎn)擊向右按鈕時(shí)顯示第一張按鈕
if(index==4){
$(value).removeClass("selected")
$(".small li").eq(0).addClass("selected");
$(".normal img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
$(".big img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
return false;
}
if (index<4) {
$(value).removeClass("selected").next().addClass("selected");
$(".normal img").attr("src",$(value).next().children().eq(0).attr("src"));
$(".big img").attr("src",$(value).next().children().eq(0).attr("src"));
return false;
}
}
})
});
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery中change事件用法,以實(shí)例形式分析了在匹配元素焦點(diǎn)變化時(shí)觸發(fā)事件使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
使用jquery+CSS3實(shí)現(xiàn)仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效
本文是基于jquery和css3實(shí)現(xiàn)的仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效，代碼超簡(jiǎn)單，感興趣的朋友一起看看吧2015-09-09
這篇文章主要介紹了jQuery設(shè)置內(nèi)容和屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Easyui和zTree兩種方式分別實(shí)現(xiàn)樹(shù)形下拉框
最近工作中需要用到樹(shù)形下拉框，因?yàn)轫?xiàng)目中樹(shù)形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達(dá)到了，但是風(fēng)格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺(tái)供大家參考2017-08-08
jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼(移動(dòng)端)
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼,適合用于移動(dòng)端。需要的朋友可以參考下2017-05-05
jQuery插件form-validation-engine正則表達(dá)式操作示例
這篇文章主要介紹了jQuery插件form-validation-engine正則表達(dá)式操作,結(jié)合實(shí)例形式分析了jQuery插件form-validation-engine進(jìn)行正則驗(yàn)證操作的相關(guān)技巧,需要的朋友可以參考下2017-02-02
jQuery focus和blur事件的應(yīng)用詳解
本篇文章主要是對(duì)jQuery中focus和blur事件的應(yīng)用進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效,需要的朋友可以參考下2015-03-03
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下，切換到中文輸入法，再輸入中文，是不能立即自動(dòng)查詢(xún)，需要按下其他按鍵，比如CTRL，后來(lái)，通過(guò)修改源代碼即可修復(fù)這個(gè)問(wèn)題2012-09-09