ホームページ > 記事 > ウェブフロントエンド > JavaScript虫眼鏡エフェクトを作ってみる_JavaScriptスキル
JavaScript虫眼鏡エフェクトを作ってみる_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:23:311269ブラウズ
この記事の例では、JavaScript に基づいて虫眼鏡効果を実装する原理とコードを紹介し、具体的な内容は次のとおりです。
原則:
A: 虫眼鏡 B: 小さな写真
C: 大きな画像表示領域
D: 全体像
マウスの位置は虫眼鏡の中心にある必要があるため、マウスの位置は次のようになります:
clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth;
clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight;
マウスの移動中: 虫眼鏡 A と大きな画像 D はマウスに比例して一緒に移動します。虫眼鏡 A の右端が小さな画像 B の右端と一致するように移動すると、大きな画像 D も移動するはずです。境界線は C の右側の境界線と重なるため、移動比率は : (D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a
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>
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>
以上がこの記事の全内容です。JavaScript の虫眼鏡効果を実現する上で皆様のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。