<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery漂浮广告代码</title>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<style>

</style>

</head>

<body>

<div id="imgDiv" style="position:absolute;left:50px;top:60px;">

    <div id="a" style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>

    <!-- <img src="01.jpg" border="0" /> -->

    <div style="width:180px;height:180px;background:red;"></div>

</div>

<script>

var xin = true,

    yin = true;

var step = 1;

var delay = 10;

var $obj;

$(function() {

    $obj = $("#imgDiv");

    var time = window.setInterval("move()", delay);

    $obj.mouseover(function() {

        clearInterval(time)

    });

    $obj.mouseout(function() {

        time = window.setInterval("move()", delay)

    });

});

function move() {

    var left = $obj.offset().left;

    console.log(left)

    var top = $obj.offset().top;

    var L = T = 0; //左边界和顶部边界

    var R = $(window).width() - $obj.width(); // 右边界

    var B = $(window).height() - $obj.height(); //下边界

    //难点:怎样判断广告的4个边框有没有超出可视化范围!

    if (left < L) {

        xin = true; // 水平向右移动

    }

    if (left > R) {

        xin = false;

    }

    if (top < T) {

        yin = true;

    }

    if (top > B) {

        yin = false;

    }

    //根据有没有超出范围来确定广告的移动方向

    left += step * (xin == true ? 1 : -1);

    top  += step * (yin == true ? 1 : -1);

    // 给div 元素重新定位

    $obj.offset({

        top: top,

        left: left

    })

}

</script>

</body>

</html>

　　

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>jquery漂浮广告代码</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<divid="imgDiv"style="position:absolute;left:50px;top:60px;">
<divid="a"style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>
<!-- <img src="01.jpg" border="0" /> -->
<divstyle="width:180px;height:180px;background:red;"></div>
</div>
<script>
var xin =true,
yin =true;
var step =;
var delay =;
var $obj;
$(function() {
$obj =$("#imgDiv");
var time =window.setInterval("move()", delay);
$obj.mouseover(function() {
clearInterval(time)
});
$obj.mouseout(function() {
time =window.setInterval("move()", delay)
});
});
functionmove() {
var left =$obj.offset().left;
console.log(left)
var top =$obj.offset().top;
varL=T=; //左边界和顶部边界
varR=$(window).width() -$obj.width(); // 右边界
varB=$(window).height() -$obj.height(); //下边界
//难点:怎样判断广告的4个边框有没有超出可视化范围!
if (left <L) {
xin =true; // 水平向右移动
}
if (left >R) {
xin =false;
}
if (top <T) {
yin =true;
}
if (top >B) {
yin =false;
}
//根据有没有超出范围来确定广告的移动方向
left += step * (xin ==true?:-);
top += step * (yin ==true?:-);
// 给div 元素重新定位
$obj.offset({
top: top,
left: left
})
}
</script>
</body>
</html>

js 漂浮广告的更多相关文章

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

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

  2. Js浮动广告效果实现

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

  3. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  4. JS全屏漂浮广告、移入光标停止移动

    点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  5. Js弹性漂浮广告代码

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

  6. [转]javascript对联广告、漂浮广告封装类，多浏览器兼容

    封装的JS方法: function $$(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.l ...

  7. 漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码

    原文:漂浮广告代码兼容ie.firefox,多个漂浮不冲突,调用只需两行代码 将广告内容放在div中,设置一个id,然后用下面方法调用var adcls=new AdMove("div的id ...

  8. JQuery漂浮广告代码

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

  9. js 添加广告

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

随机推荐

  1. Eclipse中快速重写(Override)基类方法的技巧（转载)

    转自:http://blog.csdn.net/guolin_blog/article/details/11952435 在Android开发过程中会引用大量的标准库,还要通过Override基类函数 ...

  2. $.ajax与$.post、$.get的一点区别

    后台代码: [HttpPost] public string DoLogin(string username,string password) { return "success" ...

  3. SpringBoot整合Spring Data Solr

    此文不讲solr相关,只讲整合,内容清单如下 1. maven依赖坐标 2. application.properties配置 3. Java Config配置 1. maven坐标 <depe ...

  4. c++继承汇总（单继承、多继承、虚继承、菱形继承）

    多重继承中,一个基类可以在派生层次中出现多次,如果一个派生类有多个直接基类,而这些直接基类又有一个共同的基类,则在最终的派生类中会保留该间接共同基类数据成员的多分同名成员.C++提供虚基类的方法使得在 ...

  5. nginx添加模块

    [root@VM_0_3_centos nginx]# ./sbin/nginx -V nginx version: nginx/1.12.2 built by gcc 4.8.5 20150623 ...

  6. UWP 剪贴板

    一:剪贴板 一般的复制,用户自己光标选中文本,crtl +c复制就可以了.但是有时候也需求有一个复制的按钮,当用户点击复制按钮,就可以把当前的某些内容复制到剪贴板里. 这里就用到了DataPackag ...

  7. Codeforces 1144G（dp）

    据说这题是种dp的套路?然后被我国红名神仙(南大Roundgod)贪心了,不过思路上非常相近了,故而可贪吧. 设的dp[i][0]是:如果把第i个数放在上升序列里了,那么下降序列结尾的那个最大是多少: ...

  8. Helga Hufflepuff's Cup CodeForces - 855C

    Helga Hufflepuff's Cup CodeForces - 855C 题意:给一棵n个节点的树,要给每一个节点一个附加值,附加值可以为1-m中的一个整数.要求只能有最多x个节点有附加值k. ...

  9. 初探Hibernate3源码--读取配置文件

    依照个人推测,要实现ORM框架,关键是如何拼凑sql语句再通过jdbc来进行对数据库的访问,另外将数据库返回的数据记录封装成对应的类也是必不可少的. 那么实现ORM框架的基本思路如下: 1,读取xml ...

  10. JavaScript入门2

    5.document对象:Document对象是window对象的一个对象属性,代表浏览器窗口中装载的整个HTML文档.文档中的每个HTML元素对应着JavaScript对象. 因为document代 ...