Rumah >hujung hadapan web >tutorial js >Cuba buat kemahiran effect_javascript kaca pembesar javascript

Cuba buat kemahiran effect_javascript kaca pembesar javascript

WBOYasal: 2016-05-16 15:23:311329semak imbas

Contoh dalam artikel ini memperkenalkan prinsip dan kod merealisasikan kesan kaca pembesar berdasarkan JavaScript, dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut:

Prinsip:

A: Kaca pembesar B: Gambar kecil

C: Kawasan boleh dilihat gambar besar

D: Gambar besar

Kedudukan tetikus hendaklah berada di tengah-tengah kaca pembesar, jadi kedudukan tetikus ialah:

clientX=A.offsetLeft() B.offsetLeft 1/2*A.offsetWidth;

klienY=A.offsetTop() B.offsetTop 1/2*A.offsetHeight;

Semasa pergerakan tetikus: Kaca pembesar A dan gambar besar D bergerak bersama-sama mengikut kadar tetikus, kerana apabila sempadan kanan kaca pembesar A bergerak bertepatan dengan sempadan kanan gambar kecil B, gambar besar D juga harus bergerak ke kanan Sempadan bertindih dengan sempadan kanan C, jadi nisbah pergerakannya ialah : (D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a

Bahagian HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>放大镜效果</title>

<style>

*{
margin:0;
padding:0; 
}

#demo{
position: relative;
margin:30px 50px;
width: 1000px;
height: 600px;
border: 1px solid #000;
}

#zhezhao{
position: absolute;
z-index:2;
background:red;
width:402px;
height:402px;
left: 20px;
top:20px;
opacity: 0;
}

#small{
position: absolute;
width:402px;
height:402px;
left: 20px;
top:20px;
border: 1px solid #000;
z-index: 1;
}


#small img{
position: absolute;

}


#big{
position: relative;
top: 20px;
left: 460px;
width:500px;
height:500px;
border: 1px solid #000;
overflow: hidden;
display: none;
z-index: 1;
}


#big img{
position: absolute;

}


#glass{
position: absolute;
width:100px;
height: 100px;
opacity: 0.3;
background:orange;
display: none;
}

</style>


</head>


<body>
<div id='demo'>
<div id='zhezhao'> </div> 
<!-- 在ie浏览器中，当鼠标在放大镜上是，浏览器并不认为鼠标同样在小图的div上，所以加个遮罩层 兼容ie-->


<div id='small'> 
<img src='images/small.png' alt=''>
<div id='glass'></div>
</div>
<div id='big'>
<img src='images/big.jpg' alt='' >

</div>

</div>



</body>

</html>

bahagian js:

<script>

window.onload=function(){
var demo =document.getElementById('demo');
var small =document.getElementById('small');
var big =document.getElementById('big');
var glass =document.getElementById('glass')
var image =document.getElementById('big').getElementsByTagName('img')[0];
var zhezhao=document.getElementById('zhezhao');

zhezhao.onmouseover=function(){
glass.style.display='block'
big.style.display='block'
}
zhezhao.onmouseout=function(){
glass.style.display='none'
big.style.display='none'
}

//弄清楚clientX，offsetLeft，left的关系，注意区分
zhezhao.onmousemove=function(ev){
var event=ev
var left=event.clientX-demo.offsetLeft-small.offsetLeft-glass.offsetWidth/2;
var top =event.clientY-demo.offsetTop -small.offsetTop -glass.offsetHeight/2;
if(left<0){
left=0;
}else if(left>(small.offsetWidth-glass.offsetWidth)){
left=small.offsetWidth-glass.offsetWidth
}

if(top<0){
top=0;
}else if(top>(small.offsetHeight- glass.offsetHeight)){
top=small.offsetHeight- glass.offsetHeight
}
glass.style.left =left+'px';
glass.style.top =top+'px';

 

var percent=(image.offsetWidth-big.offsetWidth)/(small.offsetWidth-glass.offsetWidth)

image.style.left=-percent*left+'px'
image.style.top =-percent*top+'px'



}
}

</script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang dalam merealisasikan kesan kaca pembesar javascript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Berkongsi maklumat berguna: Benarkan anda mempelajari penutupan javascript dalam kemahiran minutes_javascriptArtikel seterusnya：Berkongsi maklumat berguna: Benarkan anda mempelajari penutupan javascript dalam kemahiran minutes_javascript

Artikel berkaitan

Lihat lagi