- <html>
- <head>
- <style type="text/css">
- body{background-image:url(images/body_bg.jpg);}
- div#container{margin:100px auto;width:400px;height:255px;
- border:1px dashed blue;}
- </style>
- <script>
- window.onload = function()
- {
- var oDiv = document.getElementById('container');
- var oImg = document.getElementById('img1');
- var picNum = 0;
- run();
- oDiv.onmouseover = function(ev)
- {
- clearInterval(oDiv.timer);
- var oEv = ev || window.event;
- var disX = oEv.clientX;
- var disY = oEv.clientY;
- oDiv.onmousemove = function(ev)
- {
- var oEv = ev || window.event;
- var moveX = Math.abs(oEv.clientX - disX);
- picNum = Math.round(moveX/10)%18+1;
- oImg.src = 'images/image1_'+picNum+'.jpg';
- document.title = picNum;
- }
- oDiv.onmouseout = function(ev)
- {
- run();
- }
- }
- function run()
- {
- clearInterval(oDiv.timer);
- oDiv.timer = setInterval(function(){
- oImg.src = 'images/image1_'+(picNum%18+1)+'.jpg';
- document.title = picNum%18+1;
- picNum++;
- },300);
- }
- }
- </script>
- </head>
- <body>
- <div id="container">
- <img id="img1" src="images/image1_1.jpg" />
- </div>
- </body>
- </html>
|
|
收藏
淘帖
踩
