涉及到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. Oracle数据库中设置表字段为自动序列

    --创建序列 increment ; --创建触发器 create or replace trigger zonecode_trigger before insert on org_HospitalZ ...

  2. 常用APDU指令错误码

    状态码 性质 错误解释 9000 正常 成功执行 6200 警告 信息未提供 6281 警告 回送数据可能出错 6282 警告 文件长度小于Le 6283 警告 选中的文件无效 6284 警告 FCI ...

  3. SQL Server ->> Enable Instant File Initialization(开启文件及时初始化)

    我们在安装SQL Server的时候会在指定SQL Server各个服务的运行启动账户的账户的时候看到底下有一个选项写着“Grant Perform Volume Maintenance Task p ...

  4. 代码分析工具推荐Understand

    之前看ogitor ,第一次看到那么多代码~~不知道从哪里下手,而且好多东西都不会Ogre什么的都不是很清楚,对ogitor的代码结构的了解就更不用提了.晕头转向的 不知道从哪里下手,一点点的看起来好 ...

  5. WPF DatePicker日期控件只显示年月

    1.需要引用2个类,第一个类DatePickerCalendar public class DatePickerCalendar { public static readonly Dependency ...

  6. 爬虫入门之Scrapy框架基础框架结构及腾讯爬取(十)

    Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据. 如果安装了 IPyth ...

  7. Master的注册机制和状态改变管理解密

    本课主题 Master 接收 Worker, Driver, Application 注册 Master 处理 Driver 狀态变换 Master 处理 Executor 狀态变换 Master 接 ...

  8. Hystrix请求熔断与服务降级

    Hystrix请求熔断与服务降级 https://www.cnblogs.com/huangjuncong/p/9026949.html SpringCloud实战-Hystrix请求熔断与服务降级 ...

  9. [转]删除MSSQL所有的约束及表格

    --删除所有约束.表.视图等SQL脚本 --############################################### --删除所有外键约束 --################# ...

  10. [USACO11DEC]Umbrellas for Cows

    嘟嘟嘟 我dp真是太弱了,这么简单dp都不会. 令dp[i]表示前 i 头牛头被遮住了的最低成本.则dp[i] = min{dp[i], dp[j - 1] + c[a[i] - a[j] + 1]} ...