<!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. 改造u3d第一人称控制器，使之适合Cardboard+蓝牙手柄控制

    一.在u3d编辑器中删除FPSController游戏对像中自带的Camera: 二.在u3d编辑器中将CardBoardMain游戏对像添加到FPSController的子物体: 三.修改脚本: 1 ...

  2. 51nod1256【exgcd求逆元】

    思路: 把k*M%N=1可以写成一个不定方程,(k*M)%N=(N*x+1)%N,那么就是求k*M-N*x=1,k最小,不定方程我们可以直接利用exgcd,中间还搞错了: //小小地讲一下exgcd球 ...

  3. lightoj 1125【01背包变性】

    题意: 从n个数里选出m个来,还要使得这m个数之和被d整除. 给一个n和q,再给n个数,再给q个询问,每个询问包含两个数,d,m; 对于每个case输出每个q个询问的可行的方案数. 思路: 每个数只能 ...

  4. dfs，bfs的二分匹配模板（模板题hdu1150）

    如果不懂匈牙利算法,请点击:该趣味算法http://blog.csdn.net/dark_scope/article/details/8880547 模板: //DFS版本下的二分匹配算法 http: ...

  5. bzoj 1060: [ZJOI2007]时态同步【树形dp】

    可能算不上dp,大概是个树形模拟 先一遍dfs算出f[u]为每个点最深的叶子到u的距离,然后再dfs一下,ans加上f[u]-f[e[i].to]-e[i].va,f[u]-f[e[i].to]是这条 ...

  6. CF1045G AI robots（动态开点线段树）

    题意 火星上有$N$个机器人排成一行,第$i$个机器人的位置为$x_{i}$,视野为$r_{i}$,智商为$q_{i}$.我们认为第$i$个机器人可以看到的位置是$[x_{i}-r_{i},x_{i} ...

  7. （2）javascript的基本语法、数据结构、变量

    本篇学习资料主要讲解javascript的基本语法.数据结构.变量      无论是传统的编程语言,还是脚本语言,都具有数据类型.常量和变量.运算符.表达式.注释语句.流程控制语句等基本元素构成,这些 ...

  8. GraphicsLab Project学习项目

    作者:i_dovelemon 日期:2016 / 05 / 30 主题:3D,Graphics 引言 进公司以来,主要在学习的就是如何保证代码的质量,以前热爱的图形学也放置了.但是,作为游戏程序员,特 ...

  9. 如果没有intelliJ 编译器？

    刚刚是了一晚上的用记事本来写代码,脱离编译器,发现自己完全废了. 写了好多个类,在命令行编译失败,上网查错误,说编码问题, 编码问题解决后,命令行还是编译失败,粘贴到编译器 发现完全是自己代码能力太弱 ...

  10. hdu 3461 Code Lock 并查集(有点难想到)★★

    #include<stdio.h> #include<math.h> ]; int count; #define mod 1000000007 int find(int x) ...