零基础学做网站培训介绍

当前位置:

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

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

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

下面就跟着学建站网来学习一下怎么制作网站上的飘动广告吧。

方法/步骤

  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>

相关阅读:

如何屏蔽网站统计后台的垃圾广告(适用百度、站长、51la统计)

广告投放 广告位招租

如何制作网站右下角弹出广告(附代码)

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 广州全璟皮革制品有限公司网站,本公司是一家细致印花厂家,集数码印花、服装印花、数码直喷、印花加工等设计、生产、销售。全璟数码印花公司网站由
  • 我们在做门户网站或者医院网站时,往往需要制作飘动广告,将网站的信息显示在飘动广告上面。效果如下图:下面就跟着学建站网来学习一下怎么制
  • 广告投放 广告位招租 图文教程 (15038 次浏览)
    如果大家有一些好的软件,资源,商品等想在网上做宣传,可以与学做网站论坛合作,学做网站论坛广告投放请联系客服QQ:2399118408首页广告位
  • 平时我们在调用优酷上面的视频的时候,视频都是有一个广告时间的,是不是看着特别不爽?如何去除优酷视频广告呢?下面汇总了网上流传的几个方法,
  • 对于很多娱乐性网站中,经常在网页中出一个随意飘浮的广告窗口,当你拉动网页时,它也会随着你的拉动飘移,始终不离开你的视线.除非你将它关闭。如下图:
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 在做网站时,我们需要安装wampservicer服务来搭建本地环境,然后在本地环境下制作自己的网站。有的学员在搭建PHP+MySQL本地环境却没有显示课程中显示
  • 问:在学淘客网站制作过程中,在使用DW修改里面的产品内容时,dreamweaver总是一打开只是闪了一下,接着就自动关闭了,无法启动Dreamweaver cs5,
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工