<!DOCTYPE?html><html?lang='zh-cn'>????<head>????????<title></title>????????<meta?charset="utf-8">????????<style?type="text/css">????????????*{????????????????margin:?0;????????????????padding:?0;????????????}????????????#demo{????????????????display:?block;????????????????width:?400px;????????????????height:?255px;????????????????margin:?50px;????????????????position:?relative;????????????????border:?1px?solid?#ccc;????????????}????????????#small-box{????????????????position:?relative;????????????????z-index:?1;????????????}????????????#float-box{????????????????display:?none;????????????????width:?160px;????????????????height:?120px;????????????????position:?absolute;????????????????background:?#fff;????????????????border:?1px?solid?#ccc;????????????????filter:?alpha(opacity=50);????????????????opacity:?0.5;????????????????cursor:?move;????????????}????????????#mark{????????????????position:?absolute;????????????????display:?block;????????????????width:?400px;????????????????height:?255px;????????????????z-index:?10;????????????????cursor:?move;????????????????background:?#fff;????????????????filter:?alpah(opacity=0);????????????????opacity:?0;????????????}????????????#big-box{????????????????display:?none;????????????????position:?absolute;????????????????top:?0;????????????????left:?460px;????????????????width:?400px;????????????????height:?300px;????????????????overflow:?hidden;????????????????border:?1px?solid?#ccc;????????????????z-index:?1;????????????}????????????#big-box?img{????????????????position:?absolute;????????????????z-index:?5;????????????}????????????#log{????????????????width:?80%;????????????????height:?300px;????????????????overflow:?hidden;????????????????word-wrap:?break-word;????????????}????????</style>????</head>????<body>????????<script?type="text/javascript">????????????window.onload=function(){????????????????var?objDemo=document.getElementById('demo');????????????????var?objSmallBox=document.getElementById('small-box');????????????????var?objMark=document.getElementById('mark');????????????????var?objFloatBox=document.getElementById('float-box');????????????????var?objBigBox=document.getElementById('big-box');????????????????var?objBigBoxImage=objBigBox.getElementsByTagName('img')[0];????????????????objMark.onmouseover=function(){????????????????????objFloatBox.style.display='block';????????????????????objBigBox.style.display='block';????????????????}????????????????objMark.onmouseout=function(){????????????????????objSmallBox.style.display='none';????????????????????objBigBox.style.display='none';????????????????}????????????????objMark.onmousemove=function(ev){????????????????????var?_event=ev||window.event;????????????????????????????????????????var?left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;????????????????????var?top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;????????????????????????????????????if(left<0){????????????????????????left=0;????????????????????}else?if(left>(objMark.offsetWidth-objFloatBox.offsetWidth)){????????????????????????left=objMark.offsetWidth-objFloatBox.offsetWidth;????????????????????}????????????????????if(top<0){????????????????????????top=0;????????????????????}else?if(top>(objMark.offsetHeight-objFloatBox.offsetHeight)){????????????????????????top=objMark.offsetHeight-objFloatBox.offsetHeight;????????????????????}????????????????????objFloatBox.style.left=left+'px';????????????????????objFloatBox.style.top=top+'px';????????????????????var?percentX=left/(objSmallBox.offsetWidth-objFloatBox.offsetWidth);????????????????????var?percentY=top/(objSmallBox.offsetHeight-objFloatBox.offsetHeight);????????????????????objBigBoxImage.style.left=-percentX*(objBigBoxImage.offsetWidth-objBigBox.offsetWidth)+"px";????????????????????objBigBoxImage.style.top=-percentY*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)+'px';????????????????}????????????}????????</script>????????<div?id="demo">????????????<div?id="small-box">????????????????<div?id="mark"></div>????????????????<div?id="float-box"></div>????????????????<img?src="macbook-small.jpg"?/>????????????</div>????????????<div?id="big-box">????????????????<img?src="macbook-big.jpg"?/>????????????</div>????????</div>????????<p?id="log"></p>????</body></html>
2021-12-18
打開調(diào)試F12看了沒有報錯放出來看一下
2021-10-15
你這個讓我怎么看，頭痛