자 바스 크 립 트 모방 경 동 확대경 효과
말 이 많 지 않 으 니 코드 를 보십시오.
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body,div{margin: 0; padding: 0;}
#zhuti{
margin:50px;
position: relative;
}
#small{
width: 300px;
height: 187px;
border: 1px solid #000;
}
#big{
border: 1px solid #666;
overflow: hidden;
width: 300px;
height: 187px;
position: absolute;
left: 310px;
top: 0px;
display: none; /* */
}
#jingtou{
width: 50px;
height: 50px;
background: #666;
opacity: 0.4;
position: absolute;
display: none; /* */
}
#bigimg{
position: absolute;
}
</style>
</head>
<body>
<div id="zhuti">
<div id="small">
<div id="jingtou"></div>
<img src="img/ktm_small.jpg">
</div>
<div id="big">
<img src="img/ktm_big.jpg" id="bigimg">
</div>
</div>
<script type="text/JavaScript">
// (id )
function $(id) {
return document.getElementById(id);
}
var small =$('small');
var big =$('big');
var jingtou =$('jingtou');
var zhuti =$('zhuti');
var bigimg =$('bigimg');
// ( )
small.onmouseover = function(){
big.style.display='block';
jingtou.style.display='block';
}
small.onmouseout = function(){
big.style.display='none';
jingtou.style.display='none';
}
//
small.onmousemove = function(event){
// //
var left = event.clientX - zhuti.offsetLeft -jingtou.offsetWidth/2;
var top = event.clientY -zhuti.offsetTop - jingtou.offsetHeight/2;
// （ 0 ）
//
if(left<=0){
left =0;
}
//
if(top<=0){
top =0;
}
//
if(left >= small.offsetWidth-jingtou.offsetWidth){
left = small.offsetWidth-jingtou.offsetWidth;
}
//
if(top >= small.offsetHeight-jingtou.offsetHeight){
top = small.offsetHeight-jingtou.offsetHeight;
}
//
var smallX = left / (small.offsetWidth - jingtou.offsetWidth);
//var smallX = left / (small.offsetWidth - jingtou.offsetWidth);
var smallY = top / (small.offsetHeight - jingtou.offsetHeight);
//var smallY = top / (small.offsetHeight - jingtou.offsetHeight);
var bigX = -smallX * (bigimg.offsetWidth - big.offsetWidth);
var bigY = -smallY * (bigimg.offsetHeight - big.offsetHeight);
// a b
bigimg.style.left = bigX + 'px';
bigimg.style.top = bigY + 'px';
// ==
jingtou.style.left = left +'px';
jingtou.style.top = top +'px';
}
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
