<!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. Spring Boot 学习系列（序）—Spring Boot

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring Boot? Spring Boot 是由pivotal团队提供的一个基于Spring的全新框架 ...

  2. hdoj5792 【树状数组】【未完待续】

    题意: 求有多少种四个数满足Aa < Ab,Ac > Ad,1 < =a < b < = n ,1 < = c < d < = n ; 思路: 只要找到 ...

  3. 当打开一个.h或.cpp文件时， Solution Explorer就自动展开文件所在的目录

    当打开一个.h或.cpp文件时,  Solution Explorer就自动展开文件所在的目录: 如果不想展开: Tools           -> Options           -&g ...

  4. UVA - 10564 Paths through the Hourglass

    传送门:https://vjudge.net/problem/UVA-10564 题目大意:给你一张形如沙漏一般的图,每一个格子有一个权值,问你有多少种方案可以从第一行走到最后一行,并且输出起点最靠前 ...

  5. jQuery笔记之工具方法

    jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 ...

  6. Centos 6.8 配置Lvs

    LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. 宗旨: 使 ...

  7. Lightoj 1038 - Race to 1 Again (概率DP)

    题目链接: Lightoj  1038 - Race to 1 Again 题目描述: 给出一个数D,每次可以选择数D的一个因子,用数D除上这个因子得到一个新的数D,为数D变为1的操作次数的期望为多少 ...

  8. 第02课 操作系统及Linux 系统介绍

    1.操作系统介绍 操作系统(Operating System,简称OS),是计算机系统中必不可少的基础系统软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心. 操作系统的作用是管 ...

  9. 【前端】html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  10. 关于发布WP 8.1应用信息不匹配问题的解决办法

    错误提示:   与此更新关联的程序包标识符与已上传程序包中的标识符不匹配: The package identity associated with this update doesn't match ...