涉及到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. FiddLer模拟post不成功的解决办法

    开始用fiddler抓app包,后来想模拟一下post请求,发现一直接受不到,wtf? 默认的header是类似这样的 User-Agent: Fiddler Host: localhost Cont ...

  2. android启动应用

    private void openApp(String packageName) { PackageInfo pi = getPackageManager().getPackageInfo(packa ...

  3. shell编程报错：“syntax error near unexpected token `”

    今天写了个shell脚本,在自己机器上运行正常,给同事,运行报错syntax error near unexpected token `,左看右看shell脚本没有问题,没有办法google搜索,发现 ...

  4. 基于bootstrap的手机界面tab样式调整

    这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的): html结构为: <div class="tab" role="tabpan ...

  5. Java中short、int、long、float、double的取值范围

    一.基本数据类型的特点,位数,最大值和最小值.1.基本类型:short 二进制位数:16 包装类:java.lang.Short 最小值:Short.MIN_VALUE=-32768 (-2的15此方 ...

  6. SQL 查询：查询学生平均成绩

    编程萌新,因为遇到这么个SQL 查询的问题:在一张表A里有如下字段:学生姓名.学科名.学科成绩.写一条SQL 语句查出各科平均成绩并按学生姓名分组,按如下格式显示:学生姓名|语文|数学|英语.一开始遇 ...

  7. 使用Python批量合并PDF文件(带书签功能)

    网上找了几个合并pdf的软件,发现不是很好用,一般都没有添加书签的功能. 又去找了下python合并pdf的脚本,发现也没有添加书签的功能的. 于是自己动手编写了一个小工具,使用了PyPDF2. 下面 ...

  8. 【Leetcode】【Medium】Remove Duplicates from Sorted Array II

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...

  9. Memory Leak Detection in Embedded Systems

    One of the problems with developing embedded systems is the detection of memory leaks; I've found th ...

  10. 关于tcp状态及一些延展

    1.常用的三个状态是:ESTABLISHED 表示正在通信,TIME_WAIT 表示主动关闭,CLOSE_WAIT 表示被动关闭. TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断 ...