<!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. pycharm连接数据库出现时区jdbc问题

    unrecognized or represents more than one time zone. You must configure either the server or JDBC dri ...

  2. 【性能测试】：操作NMON的shell脚本

    nmon是监控服务器的一个工具,可以自动生成快照,每次执行命令就可以了 这里写了一个小的shell脚本,练习一下 #!/bin/sh OSType=`uname` #判断系统类型,选择不同命令 if ...

  3. 物联网学习之路——IoT概况

    物联网IoT概念 IoT,Internet of Things,即物物相连的互联网.它包含两层意思:一,以互联网为基础:二,物物相连,实现信息的交换和通信.物联网通过智能感知.识别技术与普适计算等通信 ...

  4. Mac 10.12安装Git管理工具SourceTree

    说明:Git的GUI工具应该是这款最好用. 下载: (链接: https://pan.baidu.com/s/1mhRr35Y 密码: vv67)

  5. Mac 10.12安装专业抓包工具Wireshark

    说明:专业到不太会用. 下载: (链接: https://pan.baidu.com/s/1c570YE 密码: pkmr)

  6. jenkins创建构建任务

    构建项目类型 点击 Jenkins 首页 “创建一个新任务” 的链接, 输入任务名称 Jenkins 提供了六种类型的任务. 构建一个自由风格的软件项目 这是Jenkins的主要功能.Jenkins ...

  7. Scanner类中的nextToken()方法解读

    下面看一下nextToken()方法的源码实现. 1.Java中的控制字符 case ' ': // (Spec 3.6) case '\t': // (Spec 3.6) case FF: // ( ...

  8. Java中的异常Exception

    涉及到异常类相关的文章: (1)异常类不能是泛型的 http://www.cnblogs.com/extjs4/p/8888085.html (2)Finally block may not comp ...

  9. Table '.\gts\eventdata#P#p0' is marked as crashed and last (automatic?) repair failed

    修复数据表操 MYSQL数据表出现问题,提示:Error: Table './db_name/table_name' is marked as crashed and last (automatic? ...

  10. WindowsServer2008安装IIS相关服务

    控制面板->程序->打开或关闭Windows功能 添加角色,选择IIS服务器,选择以下角色服务,如果添加过就选择添加角色服务 如果出现500错误,这个跟程序没有多大关系,可以试一下以下操作 ...