<!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. 怎么让普通用户达到root用户也可以拥有权限修改文件（CentOS系统）

    为什么会提出这个问题呢? 答:因为啊,比如我们在大数据集群搭建的时候,经常会需要配置环境变量,如/etc/profile.那么,问题来了,每次必须得都切换到root用户才能,但是呢,如何可以在普通用户 ...

  2. WIN7 64位操作系统 无法找到Access驱动

    为了更充分的利用硬件资源,我想很多人都开使用64位操作系统了,同时你可以也发现了在64位操作系统上ODBC的驱动找不到了,所以ODBC的东西都没法用了. 因为2007以前版本的Office只有32位版 ...

  3. UOJ #35 后缀排序 哈希做法

    题面 http://uoj.ac/problem/35 题解 后缀数组当然可以 这里用哈希做 首先排序的问题在哪里 在于比较两个后缀的复杂度是O(length)的 但是我们可以通过找LCP来优化比较 ...

  4. iOS7改变状态栏文字颜色

    1在Info.plist中设置UIViewControllerBasedStatusBarAppearance 为NO2 在需要改变状态栏颜色的 AppDelegate中在 didFinishLaun ...

  5. cpp extern 关键字用法

    语法说明: extern 可以置于变量或者函数前,以标示变量或者函数的在别的文件中定义,提示编译器遇到此变量和函数后,在其他模块中寻找其定义.此外extern也可用来进行链接指定. 即 extern ...

  6. Linux下cpu过高问题排查

    原文地址:https://blog.csdn.net/chenjunan888/article/details/80447800 在服务器报cpu过高时,可使用以下命令,快速导出堆栈信息,以方便查看具 ...

  7. 134 Gas Station 加油站

    在一条环路上有 N 个加油站,其中第 i 个加油站有汽油gas[i].你有一辆油箱容量无限的的汽车,从第 i 个加油站前往第 i+1 个加油站需要消耗汽油 cost[i].你从其中一个加油站出发,开始 ...

  8. TPS763xxDBV线性稳压器

    DC DC converter 是直流变换器,因为直流不能通过变压器改变电压,要将直流电压通过振荡变成交流电压,再通过变压器或斩波器将电压升高或降低,再经滤波变成所需的电压.而voltage regu ...

  9. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  10. PHP的加密方式

    1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str  --  原始字符串. raw_output  --  ...