JS 제어 그림 드래그 확대 축소 회전
2315 단어 JavaScriptfunctioninputdivbutton
<html>
<head>
<script Language="javascript">
//
function imgToSize(oBool) {
var oImg = document.all('oImg');
oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 2 : -2) + '%';
}
//
var oArcSize = 1;
function imgRoll() {
var oImg = document.all('oImg');
oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ oArcSize +')';
oArcSize += 1;
oArcSize = oArcSize==4 ? 0 : oArcSize ;
}
//
function imgReverse(arg) {
var oImg = document.all('oImg');
oImg.style.filter = 'Flip' + arg;
}
//
var oBoolean = false, oLeftSpace = 0, oTopSpace = 0;
function mStart() {
oBoolean = true;
if (oBoolean) {
var oImg = document.all('oImg');
oLeftSpace = window.event.clientX - oImg.style.pixelLeft;
oTopSpace = window.event.clientY - oImg.style.pixelTop;
}
}
function mEnd() {
oBoolean = false;
}
function document.onmousemove() {
if (window.event.button==1 && oBoolean) {
var oImg = document.all('oImg');
oImg.style.pixelLeft = window.event.clientX - oLeftSpace;
oImg.style.pixelTop = window.event.clientY - oTopSpace;
return false;
}
}
</script>
</head>
<body>
<div align="center">
<img id="oImg"
src="images/map.jpg" style="position:relative; zoom:100%; cursor:move;" onMouseDown="mStart();" onMouseUp="mEnd();"><br><br>
</div>
<div style="position:relative; z-index:1000;">
<input type="button" value=" " onClick="imgToSize(1);">
<input type="button" value=" " onClick="imgToSize(0);">
<input type="button" value=" " onClick="imgRoll();">
<input type="button" value=" " onClick="imgReverse('H');">
<input type="button" value=" " onClick="imgReverse('V');">
</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
