<!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. ui7

    2016.9讲义 一．课程的主要内容和目的 二．课程所用工具软件——Photoshop CS6 1. Photoshop 的发展史 1990.2,ps1.0问世,1991.2,PS2.0发行,此后,进 ...

  2. Android之build.prop属性详解

    注:本篇文章是基于MSD648项目(AndroidTV)的prop进行说明. Android版本:4.4.4 内核版本:3.10.86 1.生成build.prop build.prop的生成是由ma ...

  3. 全面解析C#中参数传递

    一.引言 对于一些初学者(包括工作几年的人在内)来说,有时候对于方法之间的参数传递的问题感觉比较困惑的,因为之前在面试的过程也经常遇到参数传递的基础面试题,这样的面试题主要考察的开发人员基础是否扎实, ...

  4. 关于语法节点Tree、类型Type和符号Symbol

    每个语法节点Tree都有Type属性,部分的语法节点有Symbol属性,如下: 与Symbol类型与Type类型之间的关系如下: 下面是Symbol与Type之间的关系: (1)MethodSymbo ...

  5. 何为session？

    何为session 在计算机中,尤其是在网络应用中,称为"会话控制".session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 Web 页之间跳转时,存储 ...

  6. java的instanceof简单使用

    instanceof:是java中用来判断一个对象属于哪个类型的关键字 (instanceof是instance和of两个单词组成,但of并没有大写) eg: public class Test{   ...

  7. log4php0.9的详细配备实例说明

    一.什么是log4php: log4j在JAVA中可算是大名鼎鼎的日志开发包了,它为apche组织维护项目,VxR兄使用php来实现了log4j的功能, 目前log4php已经作为log4j的一个子项 ...

  8. 利用keepalived构建高可用MySQL-HA

    关于MySQL-HA,目前有多种解决方案,比如heartbeat.drbd.mmm.共享存储,但是它们各有优缺点.heartbeat.drbd配置较为复杂,需要自己写脚本才能实现MySQL自动切换,对 ...

  9. PTA (Advanced Level) 1016 Phone Bills

    Phone Bills A long-distance telephone company charges its customers by the following rules: Making a ...

  10. ORCLE报错解决（ora-01747:无效的用户.表.列，表.列）

    原因: 这个问题出现是因为表中存在关键字造成.