溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)js怎么實(shí)現(xiàn)圖片局部放大效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
HTMl結(jié)構(gòu)如下：
<body> <div class="choose"> <div class="content"> <img src="images/small1.jpg" id = "small"> <div class="shadow"></div> </div> <ul id = "listshow"> <li class="selected"> <img src="images/small1.jpg" data-img = "images/big1.jpg" > </li> <li> <img src="images/small2.jpg" data-img = "images/big2.jpg" > </li> <li> <img src="images/small3.jpg" data-img = "images/big3.jpg" > </li> <li> <img src="images/small4.jpg" data-img = "images/big4.jpg" > </li> </ul> </div> <div class="larger"> <img src="images/big1.jpg" id = "big"> </div> </body>
在這個(gè)時(shí)候，將靜態(tài)頁面按常規(guī)方式進(jìn)行布局，給予css樣式如下：
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.choose{
width: 400px;
height: 600px;
float: left;
margin:50px 0 0 50px;
}
.content{
width: 400px;
height: 400px;
position: relative;
}
.content img {
width: 400px;
height: 400px;
}
#listshow{
width: 400px;
height: 100px;
margin-top: 20px;
}
#listshow li{
width: 98px;
height: 100px;
float: left;
border:1px solid #666;
}
#listshow li img{
width: 98px;
height: 100px;
}
#listshow .selected{
border-color: brown;
}
.larger{
width: 400px;
height: 400px;
position: absolute;
top: 50px;
left: 500px;
float: left;
overflow: hidden;
display: none;
}
#big{
width: 800px;
height: 800px;
position: absolute;
left: 0;
top: 0;
}
.shadow{
width: 200px;
height: 200px;
background-color: rgba(145,200,200,.4);
position: absolute;
left: 0;
top: 0;
z-index: 10;
display: none;
}
</style>那么這個(gè)時(shí)候，開始寫js樣式，分布書寫的話，第一步要考慮到左邊的選項(xiàng)卡。選項(xiàng)卡我采用直接使用src賦值的方法，將滑過的圖片對應(yīng)的src給大圖，代碼呈現(xiàn)：
for(var i = 0;i<showli.length;i++){
var showitem = showli[i];
showitem.onmouseover =showitem.onclick = function(e){
let evt = window.event||e;
for(var j =0;j<showli.length;j++){
showli[j].className = "";
}
var showimg = this.getElementsByTagName("img")[0];
var imgsrc = showimg.src;
small.src = imgsrc;
var bigsrc = showimg.getAttribute("data-img");
big.src = bigsrc;
this.className = "selected";
}
}這樣就可以成功實(shí)現(xiàn)選項(xiàng)卡功能，比較簡單粗暴的一種方式，當(dāng)然，大家使用selected結(jié)合點(diǎn)擊下標(biāo)和大圖下標(biāo)相等的這一點(diǎn)，也一樣可以做出來。
接下來要考慮到，鼠標(biāo)在大圖上移動(dòng)時(shí)，遮罩層的移動(dòng)效果。值得一提的時(shí)候，這個(gè)地方其實(shí)存在一個(gè)視覺上的誤區(qū)，看起來是在滑動(dòng)遮罩層，其實(shí)是鼠標(biāo)的滑動(dòng)，而遮罩層通過獲取鼠標(biāo)的clientX，clientY來確定自己的位置，遮罩層位置獲取代碼：
content.onmousemove = function (e) {
var evt = window.event||e;
larger.style.display = "block";
shadow.style.display = "block";
var clientX = evt.clientX;
var clientY = evt.clientY;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var X = clientX+scrollLeft-chooseMarginL-shadowW/2;
var Y = clientY+scrollTop-chooseMarginT-shadowH/2;
if(X<=0){
X = 0;
}
if(X>=maxX){
X = maxX;
}
if(Y<=0){
Y = 0;
}
if(Y>=maxY){
Y = maxY;
}
// 防止遮罩層粘滯，跟隨鼠標(biāo)一起滑出大圖位置
var bigX = X*bigW/contentW;
var bigY = Y*bigH/contentH;
// bigX / bigW = X / contentW,主圖和遮罩層之間存在兩倍關(guān)系，放大圖和原圖之間也有兩倍關(guān)系
shadow.style.left = X+"px";
shadow.style.top = Y+"px";
big.style.left = -bigX+"px";
big.style.top = -bigY+"px";
}感謝各位的閱讀！關(guān)于“js怎么實(shí)現(xiàn)圖片局部放大效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼