涉及到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. html 标签 显示模式

    1.html 标签模式分为三类:块级标签,行内标签(内联),行内块标签 a. 块级标签 典型代表:div.h1~h6.p.ul.ol.li.dl.dt.dd等. 特点:可以设置宽高,独占一行 b.行内 ...

  2. scrum心得和团队作业

    一.学习scrum心得 敏捷的介绍 最近上课我们了解到了敏捷,很多人开始谈论敏捷开发.研究敏捷开发,那么究竟什么才是敏捷开发呢? 简单的说,敏捷开发是一种以人为核心.迭代.循序渐进的开发方法.在敏捷开 ...

  3. 如何一次性下载某个类库依赖的所有jar包"

    ** 经常碰到这种事情: ** 在一些非maven工程中(由于某种原因这种工程还是手工添加依赖的),需要用到某个新的类库(假设这个类库发布在maven库中),而这个类库又间接依赖很多其他类库,如果依赖 ...

  4. 【Leetcode】【Medium】Binary Tree Zigzag Level Order Traversal

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  5. .C#认证考试试题汇编：第一单元：1，11 第二单元：1,11

    第一单元1,11 好久没用异或都快忘了,就让我们一起来了解哈啥子事异或 说的这个,就不经意让我想起书上的几种交换值得方法了 我这儿说的交换的方法是,不使用第三个变量来交换,而是两个 实现条件是C a= ...

  6. Idea中Git的使用和两种类型的冲突解决

    一.Git冲突解决 在idea开发工具中使用Git时,主要用到的快捷按钮如下五个:   这五个按钮的使用说明及在idea中如何配置和使用git可参考https://github.com/DayThin ...

  7. January 27 2017 Week 4 Friday

    Procrastination is the thief of time. 拖延是时光之贼. Procrastination is the thief of time, besides, it is ...

  8. API Gateway微服务

    微服务中的 API 网关(API Gateway)   前言 又是很久没写博客了,最近一段时间换了新工作,比较忙,所以没有抽出来太多的时间写给关注我的粉丝写一些干货了,就有人问我怎么最近没有更新博客了 ...

  9. Intellij IDEA Organize Imports

    使用Eclipse进行开发时,我喜欢用Ctrl + Shift + O快捷键管理Java类的导入,它可以导入所需的Java类,去除不需要的Java类. Eclipse的Organize Imports ...

  10. CF13C Sequence

    嘟嘟嘟 偶然看到的这道题,觉得有点意思,就做了. 首先题里说修改后的数列只能出现修改前的数,那么状态之间的转移也就之可能在这些数之间. 令f[i][j]表示第 i 个数改成原序列第 j 小的数时的最小 ...