<!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;
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
})
}
//关闭
$(function() {
$("#a").click(function() {
var b = $("#a").parent();
$(b).remove();
})
})
</script>

</body>
</html>

JQuery漂浮广告代码的更多相关文章

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

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

  2. Js弹性漂浮广告代码

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

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

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

  4. js 漂浮广告

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

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

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

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

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

  7. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  8. JS使用cookie实现只出现一次的广告代码效果

    我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该 ...

  9. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

随机推荐

  1. leetcode-888-公平的糖果交换

    题目描述: 爱丽丝和鲍勃有不同大小的糖果棒:A[i] 是爱丽丝拥有的第 i 块糖的大小,B[j] 是鲍勃拥有的第 j 块糖的大小. 因为他们是朋友,所以他们想交换一个糖果棒,这样交换后,他们都有相同的 ...

  2. request.getSession(true/false)的区别

    javax.servlet.http.HttpServletRequest接口有两个方法:getSession(boolean)和getSession(). 具体什么区别,跟踪源码分析下,先摆出结论: ...

  3. STM32F103RE引脚功能整理

  4. centos 7 网站前端中文乱码分析、解决办法

    2019-03-28 1.网站前端中文文字乱码主要原因有两点: (1)mysql数据库内部存储的数据本身处于乱码状态 (2)前端与数据库传输数据的字符集与数据库内部字符集不一致导致 2.查找造成中文乱 ...

  5. vs2010启动越来越慢解决方法

    自己用的电脑中vs2010启动总是越来越慢,耽误时间,用了下面的方法试了一下,效果还不错,如果你的vs2010也是,遇到这种问题不妨试一试: 1.重新设置了vs2010的环境(在vs2010命令提示符 ...

  6. [Xamarin.Android]使用Java Bindings Libary專案 Binding Java元件(.jar) 與Metadata.xml、型別對應 (转帖)

    使用Xamarin開發Android APP時, 如果已經有原本就用Java寫好的套件(.jar), 就可以利用Xamarin提供的Java Bindings Libary將他變成C#可使用的元件. ...

  7. 下载windows版本apache网页服务器

    1.进入apache服务器官网http://httpd.apache.org/,这里我们以下载稳定版的httpd 2.4.25为例,点击download. 2.点击链接Files for Micros ...

  8. git --mixed --soft --hard之间的区别

    git reset --mixed:此为默认方式,不带任何参数的git reset,即时这种方式,它回退到某个版本,只保留源码,回退commit和add信息git reset --soft:回退到某个 ...

  9. WPF Lambda

    lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算符 " => ",可以叫他,“转到”或者 “成为”.运算符将表达式分为两部分,左边指定 ...

  10. Leetcode 483. Smallest Good Base

    For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...