涉及到offset等有关获取各种尺寸问题下

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>广告</title>

<style>

    *{

        padding: 0;

        margin: 0;

    }

    #ad{

        width: 300px;

        height: 200px;

        background: url(images/400.jpg) no-repeat;

        position: absolute;

        left: 0;

        top: 0;

    }

    #close{

        width: 20px;

        height: 20px;

    }

</style>

</head>

<script type="text/javascript">

    window.onload = function(){

        var ad= document.getElementById("ad");

        var close = document.getElementById("close");

        // 获得可视区域的宽高

        var  win_height = document.documentElement.clientHeight;

        var  win_width = document.documentElement.clientWidth;

        // 计算可以到达的最大top和left值

        var max_top = win_height - ad.offsetHeight;//屏幕高度减去图片高度

        var max_left = win_width - ad.offsetWidth;

        var x = 2;y = 5;//xy均为移动速度

        //设置函数控制怎么移动

        function run(){

            // 获得旧的left和top

            var old_left = ad.offsetLeft;

            var old_top = ad.offsetTop;

            // 计算新的

            var new_left = old_left + x;//加上移动速度x,y

            var new_top = old_top + y;

            // 需要判断超出，控制速度及其方向

            if (new_top>max_top) {//加速到屏幕边沿时，设置new_top = max_top;即速度为0就停下

                new_top = max_top;

            }

            if (new_left>max_left) {

                new_left = max_left;

            }

            if (new_left<0) {

                new_left = 0

            }

            if (new_top<0) {

                new_top = 0

            }

            // 赋值

            ad.style.left = new_left + 'px';

            ad.style.top = new_top + 'px';

            //当new_top = max_top;即速度为0，此时速度设为相反方向即可

            if (new_top == max_top) {

                y = -2;

            }

            if (new_top == 0) {

                y = 2;

            }

            if (new_left == max_left) {

                x = -2;

            }

            if (new_left == 0) {

                x = 2;

            }

        }

        // 设置定时器，每隔一段时间就改变一下left top

        var timer = setInterval(run,3);

        // 定时器结束

        //给ad加鼠标移入事件

        ad.onmouseover = function(){

            // 停止定时器

            clearInterval(timer)

        };

        // 给ad加鼠标移出事件

        ad.onmouseout = function(){

            //重启定时器

            timer = setInterval(run,3)

        };

        //点击关闭广告

        close.onclick = function(){

            ad.style.display = 'none';

        };

        // 窗口改变事件

        window.onresize = function(){//window.onresize = function(){....}浏览器尺寸变化响应事件

            //广告归位

            //重新将广告放到左上角

            ad.style.left = 0;

            ad.style.top = 0;

            // 将他的速度重新定义

            x = 2;

            y = 5;

            // 重新获得可视区域的宽高

            win_height = document.documentElement.clientHeight;

            win_width = document.documentElement.clientWidth;

            // 重新计算可以到达的最大top和left值

            max_top = win_height - ad.offsetHeight;

            max_left = win_width - ad.offsetWidth;

        }

    }

</script>

<body>

<div id="ad">

    <img src="data:images/X.jpg" id="close">

</div>

</body>

</html>

次总结

js之广告的更多相关文章

  1. Js浮动广告效果实现

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...

  2. js 添加广告

    需要调用广告的页面 <script type="text/javascript">    var xzname="巨蟹座";</script& ...

  3. js添加广告模块，随页面移动而移动

    实现如下的效果,一般用于广告, 这是通过运动来实现的,大家可以先自己写写,再看看和小编我写的是不是同一个思想 <style> #div1{ width:100px; height:100p ...

  4. js屏蔽广告

    最近遇到有些广告的问题,首先是在手机端,可能是用户访问了一些小网站的,(你懂得),然后在访问我的网站时,会带小广告过来,通常是wifi被dns劫持的情况下导入到广告脚本, 1.处理这些要知道广告的根源 ...

  5. js之广告弹出自动关闭

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js 漂浮广告

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. js漂浮广告实现代码（合集经典）

    <html> <head> <title>漂浮广告</title> <body> <div id="codefans_net ...

  8. JS动态广告浏览

    <script language="JavaScript"> function addEventSimple(obj,evt,fn){ if(obj.addEventL ...

  9. js对联广告代码，兼容性高

    var browser = { ie6: function () { return ((window.XMLHttpRequest == undefined) && (ActiveXO ...

随机推荐

  1. ajax 请求调用问题

    http://localhost/dev/list 和  http://127.0.0.1/dev/list 最近在架构整体常规通用系统的解决方案,遭遇AJAX请求不执行的问题,刚开始以为Spring ...

  2. restful课程凌杂知识点

      request.post:字典形式数据 request.body:收到的是源数据

  3. myeclipse 下载 checkstyle 引入后不显示问题

    参照这篇博客,http://blog.csdn.net/zzq900503/article/details/42003499 下载最新的checkstyle版本后,在本地导入后一直不显示,步骤什么的也 ...

  4. python numpy+mkl+scipy win64 安装

    用pip在windows下安装numpy,scipy等库时一般来说都不会很顺利比较好的方式是自己下载对应的whl文件pip install 话不多说上链接 http://www.lfd.uci.edu ...

  5. Session、Cookie详解（2）

    session是web开发里一个重要的概念,在大多数web应用里session都是被当做现成的东西,拿来就直接用,但是一些复杂的web应用里能拿来用的session已经满足不了实际的需求,当碰到这样的 ...

  6. Visio2010新建E-R图

    visio2010没有内置E-R图的模板,需要自己配置模具.步骤如下: 1.文件->新建->基本流程图->右键菱形->添加到新模具->命名为E-R图. 2.更多形状-&g ...

  7. 线程 Z

    原文:http://www.albahari.com/threading/part5.aspx 专题:C#中的多线程 1并行编程Permalink 在这一部分,我们讨论 Framework 4.0 加 ...

  8. M-wordL-图

    典型的需要使用图模型 将start 和 end 以及字典一同构建成图,然后探究从start到end的最短路径

  9. zookeeper 的监控工具

    zookeeper 的监控工具         公司很多产品会使用zookeeper,比如Meta消息中间件,在测试的过程中,我们经常需要查询zookeeper里面的信息来精确定位问题.目前项目中有开 ...

  10. mysql5.7

    原文  http://imysql.com/2015/07/08/mysql-57-new-feature-part-3.shtml 主题 MySQL 本文将和大家一起分享下5.7的新特性,不过我们要 ...