涉及到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. 1 如何使用pb文件保存和恢复模型进行迁移学习（学习Tensorflow 实战google深度学习框架）

    学习过程是Tensorflow 实战google深度学习框架一书的第六章的迁移学习环节. 具体见我提出的问题:https://www.tensorflowers.cn/t/5314 参考https:/ ...

  2. javax.swing.JComponent 调用顺序

    网上截取的,感觉挺有用,记录下来. http://bbs.csdn.net/topics/310041707 java swing 感觉好复杂啊…………一点都不想用但是作业要用到 >_<; ...

  3. salt 之 master and minion

    系统:centos7.2 master:192.168.1.41minion:192.168.1.46 注释: setenforce 0 --关闭selinux systemctl stop fire ...

  4. windows下安装jmeter

    windows下安装jmeter post by rocdk890 / 2012-8-19 16:08 Sunday windows技术 发表评论 JMeter是Apache软件基金会的产品,用于对静 ...

  5. angular2 应用 不同的environment 进行 build/serve

    文件目录如下: 命令行使用:ng serve --e=dev/offline/prod build 不同,像上面那样写没用.必须后面再加--prod 如: ng build --e=offline - ...

  6. c# 知识学习

    1.C#基础知识梳理系列 2.详解C#委托,事件与回调函数 3.C#制作Windows service

  7. npm创建react项目

    1:win+R 输入cmd ,打开cmd面板 2:安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3:安装r ...

  8. poj 3414 Pots 【BFS+记录路径 】

    //yy:昨天看着这题突然有点懵,不知道怎么记录路径,然后交给房教了,,,然后默默去写另一个bfs,想清楚思路后花了半小时写了120+行的代码然后出现奇葩的CE,看完FAQ改了之后又WA了.然后第一次 ...

  9. 泛型：上边界和通配符的使用以及对ArrayList的学习

      --------------- public class Wildcord { public static void main(String[] args) { /** * 类引用结构说明Pers ...

  10. Struts2注解开发

    Hibernate和spring框架的开发前边总结了,这次看一下流行的MVC流程框架Struts2的注解开发吧.Struts2主要解决了从JSP到Action上的流程管理,如何进行Uri和action ...