green.html
플래시로는 있는데.. 이게 아이패드에서 안돌아가 방법을 찾던중 일단 기초 작업으로 만들어 본것..
JQuery 를 사용하는 방법도 있으나..
이상하게도 라이브러리 가져다 쓰는걸 싫어라 해서리..
직접 간단히 만들어 보았다..
물론 좀더 수정은 필요하지만...
<html>
<head>
<script language="javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.ontouchstart = getMouseXY;
document.ontouchmove = getMouseXY;
document.ondragstart = getMouseXY;
document.ondragover = getMouseXY;
var tempX = 0;
var tempY = 0;
var j = 0;
var MouseX, MouseY;
function btnnow() {
if ((document.getElementById('TouchIn').value=='1' || document.getElementById('NowIn').value=='1') && (document.getElementById("MouseX").value <= 439 && document.getElementById("MouseX").value >= 61))
{
document.getElementById("slidebtn").style.left = (parseInt(document.getElementById("MouseX").value) - 61) + "px";
}
}
function getMouseXY(e) {
try
{
event.preventDefault();
var touch = event.touches[0];
}
catch (e)
{
}
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
if (document.getElementById('NowIn').value=='1')
{
document.getElementById("MouseX").value = tempX;
document.getElementById("MouseY").value = tempY;
} else {
document.getElementById('TouchIn').value = "1";
document.getElementById("MouseX").value = touch.pageX;
document.getElementById("MouseY").value = touch.pageY;
}
btnnow();
return true;
}
function rFalse(event)
{
if (typeof window.event != "undefined")
event = window.event;
if (event)
{
if (typeof event.preventDefault!= 'undefined')
event.preventDefault(); // W3C
else
event.returnValue = false; // IE
if (event.stopPropagation)
event.stopPropagation();
else
event.cancelBubble = true;
}
// safey for handling DOM Level 0
return false;
};
function TouchInon() {
document.getElementById('TouchIn').value='1';
}
function TouchInoff() {
document.getElementById('TouchIn').value='0';
}
function NowInon() {
document.getElementById('NowIn').value='1';
}
function NowInoff() {
document.getElementById('NowIn').value='0';
}
</script>
</head>
<body>
point x : <input type="text" id="MouseX" name="MouseX"><br>
point y : <input type="text" id="MouseY" name="MouseY"><br>
Mouse Over : <input type="text" id="NowIn" name="NowIn" value="0"><br>
Touch Over : <input type="text" id="TouchIn" name="TouchIn" value="0"><br>
<div style="position:relative;width:800px;height:500px;">
<div id="silderbar" name="sliderbar" style="width:400px;height:25px;background-color:#a8d64f;" ontouchstart="TouchInon();" ontouchmove="TouchInon();" ontouchend="TouchInoff();" ondragstart="NowInon();" ondragover="NowInon();" ondragend="NowInoff();" onmouseover="NowInon();" onmouseout="NowInoff();">
<div style="background-color:#afb0b2;width:400px;height:1px;position:absolute;top:0px;left:0px;font-size:0px;"></div>
<div style="background-color:#afb0b2;width:1px;height:25px;position:absolute;top:0px;left:0px;font-size:0px;"></div>
<div id="slidebtn" style="width:22px;height:22px;position:absolute;top:2px;left:1px;background-color:#000000;"><img src="./btn.gif"></div>
</div>
</div>
</body>
</html>
'dev > webDev' 카테고리의 다른 글
| iframe 페이지 자동 늘리기 소스 (0) | 2010.10.29 |
|---|---|
| 애플 Macbook Air 사이트 메인 페이지 구성.. (0) | 2010.10.21 |
| Windows IIS 상에 Movable Type 설치 (0) | 2010.10.06 |
| 동서식품 맥심 그랑누아 홈페이지... (0) | 2010.09.06 |
| 검정색 바탕화면을 가진 홈페이지 내부 페이지 이동간 화면 깜박임 제거. (0) | 2010.09.03 |
