recherche

Maison >interface Web >js tutoriel >Comment mettre en œuvre un exemple de loupe Taobao

Comment mettre en œuvre un exemple de loupe Taobao

一个新手
一个新手original
2017-09-26 10:25:231176parcourir

<!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;;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment développer et implémenter un jeu de serpent simple en utilisant jsArticle suivant：Comment développer et implémenter un jeu de serpent simple en utilisant js

Articles Liés

Voir plus