怎么制作网站飘动广告(带关闭功能)

我们在做门户网站或者医院网站时,往往需要制作飘动广告,将网站的信息显示在飘动广告上面。效果如下图:

怎么制作网站飘动广告(带关闭功能)

方法/步骤

  1. 制作网站上的飘动广告需要使用jquery,所以第一步要在自己网站上引入jquery;代码放在</head>标签上面;
    <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
  2. 第二步就是放上飘动广告的HTML代码,这个代码可以放在</body>标签上面;
    <div id=”imgDiv” style=”position:absolute;left:50px;top:60px;”>
    <div id=”a” style=”width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;”>×</div>
    <!– <img src=”01.jpg” border=”0″ /> –>
    <div style=”width:180px;height:180px;background:red;”></div>
    </div>
  3. 最后一步就是放上控制飘动广告的JS代码了。也可以放在</body>标签上面;
    <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>

这样就可以制作网站上的飘动广告了。下面是网站飘动广告的全部代码合集:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>jquery漂浮广告代码</title>
<script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
<style>
</style>
</head>
<body>
<div id=”imgDiv” style=”position:absolute;left:50px;top:60px;”>
<div id=”a” style=”width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;”>×</div>
<!– <img src=”01.jpg” border=”0″ /> –>
<div style=”width:180px;height:180px;background:red;”></div>
</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>

</body>
</html>

 

分享到: 生成海报
avatar

热门文章

  • 一对一资讯网 为您提供可靠的服务

    一对一主机系统飞蝌云计算
    登录一对一资讯平台  

    登录

    忘记密码 ?