您的位置：首页 > Web前端 > JQuery

jquery广告滚动框

2016-06-27 11:07 471 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 广告广告滚动框

相关文章推荐

新的分享

章节导航