사진 확대경
3744 단어 그림
<body onload="init()">
<div id="snapDiv">
<img src="Lighthouse.jpg" />
<span id="zoomSpan" style="display: none;"></span>
<div id="mask" class="show"></div>
</div>
<div style="display: none;" id="viewDiv">
<img id="bigImg" src="Lighthouse.jpg" />
</div>
</body>
#snapDiv { width:300px; height:300px; position:relative; margin:30px;}
#snapDiv img{width:300px;/* height:300px;*/}
#snapDiv span {
width:100px; height:100px;
background:#f00;
left:0px;top:0px;
position:absolute;
display:none;
filter:alpha(opacity:20); opacity:0.2;
}
.show {
width:100%;
height:100%;
position:absolute;
z-index:10;
cursor:move;
left:0px; top:0px;
filter:alpha(opacity:1);
opacity:0.01;
/*IE background border ， onmouseover */
background-color:#fff;
}
#viewDiv {
width:300px; height:300px;
border:1px solid #000;
top:10px;right:10px;
position:absolute; display:none; overflow:hidden;}
#viewDiv img { position:absolute;}
function init() {
var oDiv = document.getElementById('snapDiv');
var oShow = document.getElementById('mask');
var oSpan = document.getElementById('zoomSpan');
var oImg = document.getElementById('bigImg');
var snapPic = oDiv.getElementsByTagName('img')[0];
var viewDiv = document.getElementById('viewDiv');
/* */
oShow.style.width = snapPic.width + 'px';
oShow.style.height = snapPic.height + 'px';
oShow.onmouseover = function() {
oSpan.style.display = 'block';
viewDiv.style.display = 'block';
/* ， 。
* oSpan ， viewDiv 。 viewDiv.style.width = viewDiv.style.height*/
viewDiv.style.width = oSpan.offsetWidth*oImg.offsetWidth/snapPic.width + 'px';
viewDiv.style.height = oSpan.offsetHeight*oImg.offsetHeight/snapPic.height + 'px';
};
oShow.onmouseout = function() {
oSpan.style.display = 'none';
viewDiv.style.display = 'none';
};
oShow.onmousemove = function(ev) {
var oEvent = ev || event;
var x = oEvent.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
var y = oEvent.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;
if (x < 0) {
x = 0;
} else if (x > oShow.offsetWidth - oSpan.offsetWidth) {
x = oShow.offsetWidth - oSpan.offsetWidth;
}
if (y < 0) {
y = 0;
} else if (y > oShow.offsetHeight - oSpan.offsetHeight) {
y = oShow.offsetHeight - oSpan.offsetHeight;
}
oSpan.style.left = x + 'px';
oSpan.style.top = y + 'px';
var percentX = x / (oShow.offsetWidth - oSpan.offsetWidth);
var percentY = y / (oShow.offsetHeight - oSpan.offsetHeight);
oImg.style.left = -percentX
* (oImg.offsetWidth - viewDiv.offsetWidth) + 'px';
oImg.style.top = -percentY
* (oImg.offsetHeight - viewDiv.offsetHeight) + 'px';
};
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[Processing] 클릭 포인트를 저장하고 아트 작품 그리기라고해도 가볍게 동작 설명을 마우스를 클릭하면 점이 기울어집니다. 첫 번째 점은 마우스의 위치를 목표로 계속 움직입니다. 선두 이외의 점은 1개전의 (선배에 해당하는 점)의 위치를 목표로 합니다 ⇒항상 움직이는 아트...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
