cari

Rumah >hujung hadapan web >tutorial js >如何实现淘宝放大镜实例

如何实现淘宝放大镜实例

一个新手
一个新手asal
2017-09-26 10:25:231179semak imbas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜</title>
 <link rel="stylesheet" type="text/css" href="style/css.css">
</head>
<script type="text/javascript">
	
</script>
<body>

<p id="p1">

    <p class="small_pic">
		<span class="mark"></span>
        <span class="float_layer"></span>
        <img src="images/b.jpg" alt="" longdesc="" />
    </p>

    <p class="big_pic">
		<img src="images/a.jpg" alt=""longdesc="" />
	</p>

</p>

</body>
<script src="./js/js.js"></script>	
</html>
function getByClass(oParent,sClass){
	var aEle=oParent.getElementsByTagName(&#39;*&#39;);
	var aTmp=[];
	var i=0;
	for(i=0;i<aEle.length;i++){
		if(aEle[i].className==sClass){
			aTmp.push(aEle[i]);
		}
	}
	return aTmp;

}
var op = document.getElementById(&#39;p1&#39;);
var oMark = getByClass(op,&#39;mark&#39;)[0];
var oFloat=getByClass(op,&#39;float_layer&#39;)[0];
var oBg=getByClass(op,&#39;big_pic&#39;)[0];
var oSm=getByClass(op,&#39;small_pic&#39;)[0];
var oImg=oBg.getElementsByTagName(&#39;img&#39;)[0];
oMark.onmouseover=function(){
	oFloat.style.display=&#39;block&#39;;
    oBg.style.display=&#39;block&#39;;
}
oMark.onmouseout=function(){
	oFloat.style.display=&#39;none&#39;;
	oBg.style.display=&#39;none&#39;;
}	
oMark.onmousemove=function(ev){
    var oEvent=ev||event;
    var disX=oEvent.clientX-op.offsetLeft-oSm.offsetLeft-oFloat.offsetWidth/2;
    var disY=oEvent.clientY-op.offsetTop-oSm.offsetTop-oFloat.offsetHeight/2;
    var l=disX, t=disY;
    l<0?l=0:l>(oMark.offsetWidth-oFloat.offsetWidth)?l=oMark.offsetWidth-oFloat.offsetWidth:l=disX;
    t<0?t=0:t>(oMark.offsetWidth-oFloat.offsetHeight)?t=oMark.offsetWidth-oFloat.offsetHeight:t=disY;
    // if(l<0){
    // 	l=0;
    // }else if(l>oMark.offsetWidth-oFloat.offsetWidth){
    // 	l=oMark.offsetWidth-oFloat.offsetWidth;
    // }
    // if(t<0){
    // 	t=0;
    // }else if(t>oMark.offsetWidth-oFloat.offsetHeight){
    // 	t=oMark.offsetWidth-oFloat.offsetHeight;
    // }
    oFloat.style.left=l+&#39;px&#39;;
    oFloat.style.top=t+&#39;px&#39;;
    var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
    var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
    oImg.style.left=-(oImg.offsetWidth-oBg.offsetWidth)*percentX +&#39;px&#39;;
  	oImg.style.top=-(oImg.offsetHeight-oBg.offsetHeight)*percentY +&#39;px&#39;;
}

Atas ialah kandungan terperinci 如何实现淘宝放大镜实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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：如何用js开发实现简单贪吃蛇游戏 Artikel seterusnya：JavaScript的闭包解析

Artikel berkaitan

Lihat lagi