<!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 |
|