好用的漂浮广告 jquery

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js" type="text/javascript" charset="utf-8"></script>
<div id="imgDiv" style="position:absolute;left:50px;top:43px;z-index: 100;">
<a href="http://xuanchuanbu.henau.edu.cn/plus/list.php?tid=27" target="_blank"><img src="/templets/default/images/ads2.jpg" border="0" width="345" height="72" /></a>
</div>
<script>
var xin = true,
yin = true;
var step = 1;
var delay = 10;
var $obj;
$(function() {
$obj = $("#imgDiv");
var time = window.setInterval("move()", delay);
$obj.mouseover(function() {
clearInterval(time)
});
$obj.mouseout(function() {
time = window.setInterval("move()", delay)
});
});

function move() {
var left = $obj.offset().left;
var top = $obj.offset().top;
var L = T = 0; //左边界和顶部边界
var R = $(window).width() - $obj.width(); // 右边界
var B = $(window).height() - $obj.height(); //下边界

//难点:怎样判断广告的4个边框有没有超出可视化范围!
if (left < L) {
xin = true; // 水平向右移动
}
if (left > R) {
xin = false;
}
if (top < T) {
yin = true;
}
if (top > B) {
yin = false;
}
//根据有没有超出范围来确定广告的移动方向
left += step * (xin == true ? 1 : -1);
top += step * (yin == true ? 1 : -1);
// 给div 元素重新定位
$obj.offset({
top: top,
left: left
})
}
//关闭
$(function() {
$("#a").click(function() {
var b = $("#a").parent();
$(b).remove();
})
})
</script>
<script>
$(".banshitab").mouseover(function(){
$('.banshitab').removeClass("cur");
$(this).addClass("cur");
var likey = $(".banshitab").index(this);

$('.banshi_box').addClass("hide").removeClass("block");
$(".banshi_box:eq("+likey+")").addClass("block").removeClass("hide");
});

$(".downtab").mouseover(function(){
$('.downtab').removeClass("cur");
$(this).addClass("cur");
var likey = $(".downtab").index(this);

$('.down_box').addClass("hide").removeClass("block");
$(".down_box:eq("+likey+")").addClass("block").removeClass("hide");
});
</script>

posted @ 2018-06-06 10:53  雪莉06  阅读(137)  评论(0编辑  收藏  举报