좀 스크립트가 길긴해도 적용하기 쉽고 효과보기가 쉬운 소스입니다.
마우스를 따라 크로스가 된 선이 따라다닙니다. 얼마전에 유행했던거죠.
태그연습장에서 해보세요...^^ 이 소스를 복사하면 됩니다.
<html>
<head>
<title></title>
<script language="JavaScript1.2">
<!--
if (document.all&&!window.print) {
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers) {
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1() {
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e) {
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers) {
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate() {
window.location.reload()
}
function regenerate2() {
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2
//-->
</script>
<style>
<!--
#leftright, #topdown {position:absolute;left:0;top:0;width:1px;height:1px;background-color:#0066ff;z-index:100;font-size:1px;}
-->
//background-color는 크로스의 색입니다. 맘껏 바꾸세요.
</style>
<head>
<body>
어때요? 머찌죠?
<div style="width:expression(document.body.clientWidth-2)" id="leftright"></div>
<div style="height:expression(document.body.clientHeight-2)" id="topdown"></div>
</body>
</html>
마우스를 따라 크로스가 된 선이 따라다닙니다. 얼마전에 유행했던거죠.
태그연습장에서 해보세요...^^ 이 소스를 복사하면 됩니다.
<html>
<head>
<title></title>
<script language="JavaScript1.2">
<!--
if (document.all&&!window.print) {
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers) {
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1() {
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e) {
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers) {
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate() {
window.location.reload()
}
function regenerate2() {
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2
//-->
</script>
<style>
<!--
#leftright, #topdown {position:absolute;left:0;top:0;width:1px;height:1px;background-color:#0066ff;z-index:100;font-size:1px;}
-->
//background-color는 크로스의 색입니다. 맘껏 바꾸세요.
</style>
<head>
<body>
어때요? 머찌죠?
<div style="width:expression(document.body.clientWidth-2)" id="leftright"></div>
<div style="height:expression(document.body.clientHeight-2)" id="topdown"></div>
</body>
</html>
반응형
'인터넷정보' 카테고리의 다른 글
| 브라우저 돌리기 (0) | 2007.10.17 |
|---|---|
| 브라우저 돌리기 (0) | 2007.10.17 |
| 작은 그림 클릭시 큰 그림이 나오게하자.(갤러리방) (0) | 2007.10.17 |
| 작은 그림 클릭시 큰 그림이 나오게하자.(갤러리방) (0) | 2007.10.17 |
| 크로스마우스 만들기 (0) | 2007.10.17 |
| 그림이 아래로 떨어지게 하는 효과2 (0) | 2007.10.17 |
| 그림이 아래로 떨어지게 하는 효과2 (0) | 2007.10.17 |
| 그림이 아래로 떨어지게 하는 효과1 (0) | 2007.10.17 |
| 그림이 아래로 떨어지게 하는 효과1 (0) | 2007.10.17 |
| 이미지 랜덤 모드 (0) | 2007.10.17 |