<!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. SCUT - 249 - A piece of Cake - 组合数学

    https://scut.online/contest/25/I 由结论:d维物体切n刀分成的部分=sum(C(n,0)~C(n,d)),直接算就行了.

  2. Codeforces 711B 【模拟】

    比赛的时候绝壁打麻烦了... 考虑的好麻烦...wa7...还要判断出来的是不是positive的... 好吧..认了.. #include<cstdio> #include <ma ...

  3. 跳马~~~HDU1372

    基础BFS,水过就好~手写队列优化~~ #include <iostream> #include <stdio.h> #include <string.h> #in ...

  4. python 面向对象十二 元类

    一.类也是对象 只要使用关键字class,Python解释器在执行的时候就会创建一个对象.下面的代码段: class ObjectCreator(object): pass 将在内存中创建一个对象,名 ...

  5. docker系列（一）：docker基础与安装笔记

    1 什么是docker docker是基于GO语言编写的开源容器项目,诞生于2013年初,到目前为止,已经经历了6年的发展演变.现如今,docker已经非常火爆,特别是在一线IT企业,部署.运维等工作 ...

  6. 【数据结构(C语言版)系列三】 队列

    队列的定义 队列是一种先进先出的线性表,它只允许在表的一端进行插入,而在另一端删除元素.这和我们日常生活中的排队是一致的,最早进入队列的元素最早离开.在队列中,允许插入的一端叫做队尾(rear),允许 ...

  7. 题解报告：hdu 6441 Find Integer（费马大定理+智慧数）

    Problem Description people in USSS love math very much, and there is a famous math problem .give you ...

  8. ADB over Wi-Fi

    ADB over Wi-Fi 1.root $adb root 2.设置tcp端口并重启tcpip服务 $adb shell setprop persist.adb.tcp.port &&am ...

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

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

  10. 529 Minesweeper 扫雷游戏

    详见:https://leetcode.com/problems/minesweeper/description/ C++: class Solution { public: vector<ve ...