jQuery實現(xiàn)放大鏡案例
更新時間：2020年10月19日 17:02:39 作者：willard_cui
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)放大鏡案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
動畫：
1、鼠標移入顯示區(qū)圖片時，顯示選擇框；
2、放大鏡特效，將圖片位于選擇框內(nèi)的部分放大顯示；
3、點擊下方小圖片和左右移動按鈕時正確的顯示圖片
實現(xiàn)方法：
1、放大效果：放大區(qū)的與顯示區(qū)使用相同的圖片，并設置放大區(qū)圖片的長寬為顯示區(qū)的二倍；
2、選擇框拖動效果：鼠標移動時獲得鼠標的坐標，并根據(jù)選擇框的和圖片的offset()屬性計算出選擇框的新位置。同時修改放大區(qū)圖片的位置，使其與選擇框內(nèi)的部分對應；
3、點擊小圖片效果：修改小圖片的class改變其樣式，同時修改顯示區(qū)和放大區(qū)圖片的src顯示對應的圖片；
4、左移按鈕：點擊時通過each函數(shù)找到當前顯示的圖片，然后判斷是否為第一張圖片，如果是第一張圖片則將最后一張圖片設置為要顯示的圖片，修改其樣式，同時修改顯示區(qū)和放大區(qū)圖片的src顯示對應的圖片。若果不是第一張圖片，則將前一張圖片設置為要顯示的圖片，修改其樣式，同時修改顯示區(qū)和放大區(qū)圖片的src顯示對應的圖片；
5、右移按鈕：原理有左移按鈕相同。
（詳見下方代碼）
動畫效果：
<!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 () {
//當鼠標進入圖片時顯示放大框和放大圖像
$(".normal").mouseenter(function () {
$(".kuang").show();
$(".big").show();
})
//當鼠標離開圖片時隱藏放大框和放大圖像
$(".normal").mouseleave(function () {
$(".kuang").hide();
$(".big").hide();
})
//按下鼠標拖動放大框，右側(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;
//設置_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});
})
})
//鼠標抬起時停止取消拖動
$(document).mouseup(function () {
$(document).off("mousemove");
})
//點擊左側(cè)下方小圖片時，左側(cè)上方顯示相應的圖片，且左側(cè)放大區(qū)也更改為與小圖片對應的圖片
$(".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"));
});
//點擊向左按鈕，選中當前顯示圖片的前一張圖片，小圖片樣式做相應的修改。圖片顯示區(qū)和右側(cè)圖片放大區(qū)都改為前一張圖片
$(".left").click(function () {
$(".small li").each(function (index,value) {
if($(value).attr("class")=="selected"){
//如果當前顯示第一張圖片，則點擊向左按鈕時顯示最后一張圖片
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"));
}
}
})
});
//點擊向右按鈕，選中當前顯示圖片的下一張圖片，小圖片樣式做相應的修改。圖片顯示區(qū)和右側(cè)圖片放大區(qū)都改為下一張圖片
$(".right").click(function () {
$(".small li").each(function (index,value) {
if($(value).attr("class")=="selected"){
//如果當前顯示最后一張圖片，則點擊向右按鈕時顯示第一張按鈕
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;
}
}
})
});
})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jQuery中change事件用法,以實例形式分析了在匹配元素焦點變化時觸發(fā)事件使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
使用jquery+CSS3實現(xiàn)仿windows10開始菜單的下拉導航菜單特效
本文是基于jquery和css3實現(xiàn)的仿windows10開始菜單的下拉導航菜單特效，代碼超簡單，感興趣的朋友一起看看吧2015-09-09
這篇文章主要介紹了jQuery設置內(nèi)容和屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框，因為項目中樹形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達到了，但是風格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺供大家參考2017-08-08
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)一組圖片循環(huán)滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了jQuery實現(xiàn)簡單的滑動導航代碼,適合用于移動端。需要的朋友可以參考下2017-05-05
jQuery插件form-validation-engine正則表達式操作示例
這篇文章主要介紹了jQuery插件form-validation-engine正則表達式操作,結(jié)合實例形式分析了jQuery插件form-validation-engine進行正則驗證操作的相關技巧,需要的朋友可以參考下2017-02-02
本篇文章主要是對jQuery中focus和blur事件的應用進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Jquery實現(xiàn)仿騰訊娛樂頻道焦點圖(幻燈片)特效
這篇文章主要介紹了Jquery實現(xiàn)仿騰訊娛樂頻道焦點圖(幻燈片)特效,需要的朋友可以參考下2015-03-03
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下，切換到中文輸入法，再輸入中文，是不能立即自動查詢，需要按下其他按鍵，比如CTRL，后來，通過修改源代碼即可修復這個問題2012-09-09