Cuba buat kemahiran effect_javascript kaca pembesar javascript-tutorial js-php.cn

Cuba buat kemahiran effect_javascript kaca pembesar javascript

WBOY

Lepaskan： 2016-05-16 15:23:31

asal

1331 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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