<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告滚动框</title> <style type="text/css"> *{margin:0px;padding:0px;} #ad{width:150px;height:150px;background:orange;position:absolute;border-radius:50%;} </style> </head> <body> <div id="ad"></div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> var stepX = 3;//广告移动步进 var stepY = 2;//广告移动步进 var inte = null; //自动运行函数封装 function autoRun(){ inte = setInterval(function(){ var ad = $(‘#ad‘); //获取元素相对于父级元素的偏移量 var _l = $(‘#ad‘).position().left; var _t = $(‘#ad‘).position().top //计算新的left var newLeft = _l + stepX; var newTop = _t + stepY; //计算最大的left var maxLeft = $(window).width()-$(‘#ad‘).width(); var maxTop = $(window).height()-$(‘#ad‘).height(); //检测是否越界 500 499+3 = 502 if(newLeft >= maxLeft-2 || newLeft <= 0){ stepX = -stepX; changeBg(); } if(newTop >= maxTop-2 || newTop <= 0){ stepY = -stepY; changeBg(); } //设置样式 $(‘#ad‘).css("left",newLeft+‘px‘); $(‘#ad‘).css(‘top‘,newTop+‘px‘); }, 1) } autoRun(); //改变背景颜色 function changeBg(){ var r = rand(0,255); var g = rand(0,255); var b = rand(0,255); $(‘#ad‘).css(‘background‘,‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘); } //随机数获取 function rand(m,n){ return Math.ceil(Math.random()*(n-m+1))+m-1; } // $(‘#ad‘).mouseover(function(){ // clearInterval(inte); // }) // $(‘#ad‘).mouseout(function(){ // autoRun(); // }) $(‘#ad‘).hover(function(){ clearInterval(inte); }, function(){ autoRun(); }) </script> </body> </html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>广告滚动框</title> <style type="text/css"> *{margin:0px;padding:0px;} #ad{width:150px;height:150px;background:orange;position:absolute;border-radius:50%;} </style></head><body> <div id="ad"></div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> var stepX = 3;//广告移动步进 var stepY = 2;//广告移动步进 var inte = null; //自动运行函数封装 function autoRun(){ inte = setInterval(function(){ var ad = $(‘#ad‘); //获取元素相对于父级元素的偏移量 var _l = $(‘#ad‘).position().left; var _t = $(‘#ad‘).position().top //计算新的left var newLeft = _l + stepX; var newTop = _t + stepY; //计算最大的left var maxLeft = $(window).width()-$(‘#ad‘).width(); var maxTop = $(window).height()-$(‘#ad‘).height(); //检测是否越界 500 499+3 = 502 if(newLeft >= maxLeft-2 || newLeft <= 0){ stepX = -stepX; changeBg(); } if(newTop >= maxTop-2 || newTop <= 0){ stepY = -stepY; changeBg(); } //设置样式 $(‘#ad‘).css("left",newLeft+‘px‘); $(‘#ad‘).css(‘top‘,newTop+‘px‘); }, 1) } autoRun(); //改变背景颜色 function changeBg(){ var r = rand(0,255); var g = rand(0,255); var b = rand(0,255); $(‘#ad‘).css(‘background‘,‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘); } //随机数获取 function rand(m,n){ return Math.ceil(Math.random()*(n-m+1))+m-1; } // $(‘#ad‘).mouseover(function(){ // clearInterval(inte); // }) // $(‘#ad‘).mouseout(function(){ // autoRun(); // }) $(‘#ad‘).hover(function(){ clearInterval(inte); }, function(){ autoRun(); }) </script></body></html> |
原文：http://www.cnblogs.com/xiaoguoblog/p/5025270.html