<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js" type="text/javascript" charset="utf-8"></script>
<div id="imgDiv" style="position:absolute;left:50px;top:43px;z-index: 100;">
<a href="http://xuanchuanbu.henau.edu.cn/plus/list.php?tid=27" target="_blank"><img src="/templets/default/images/ads2.jpg" border="0" width="345" height="72" /></a>
</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>
<script>
$(".banshitab").mouseover(function(){
$('.banshitab').removeClass("cur");
$(this).addClass("cur");
var likey = $(".banshitab").index(this);

$('.banshi_box').addClass("hide").removeClass("block");
$(".banshi_box:eq("+likey+")").addClass("block").removeClass("hide");
});

$(".downtab").mouseover(function(){
$('.downtab').removeClass("cur");
$(this).addClass("cur");
var likey = $(".downtab").index(this);

$('.down_box').addClass("hide").removeClass("block");
$(".down_box:eq("+likey+")").addClass("block").removeClass("hide");
});
</script>

好用的漂浮广告 jquery的更多相关文章

  1. JQuery漂浮广告代码

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

  2. js 漂浮广告

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

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

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

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

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

  5. [转]javascript对联广告、漂浮广告封装类,多浏览器兼容

    封装的JS方法: function $$(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.l ...

  6. Js弹性漂浮广告代码

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

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

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

  8. js漂浮广告实现代码(合集经典)

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

  9. jQuery网站顶部定时折叠广告

    效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

随机推荐

  1. HTML 中的 href\src\url

    1. 2. -------from Stack Overflow <a><link>使用 href; <img><script>使用 src;

  2. spring的作用是减低耦合,从编译器降低,例如不直接通过new方式 而是通过工厂方式获取对象

    spring的作用是减低耦合,从编译器降低,例如不直接通过new方式 而是通过工厂方式获取对象

  3. linux缺失gcc的安装方法

    linux安装gcc操作 1.查看linux是否有gcc文件 这个是没有挂载的 2. 使用df,查看系统光盘的挂载位置 3.卸载分区 umount /dev/sr0 4.将redhat系统光盘重新载入 ...

  4. [NOIP2017] 逛公园 【最短路】【强连通分量】

    题目分析: 首先考虑无数条的情况.出现这种情况一定是一条合法路径经过了$ 0 $环中的点.那么预先判出$ 0 $环中的点和其与$ 1 $和$ n $的距离.加起来若离最短路径不超过$ k $则输出$ ...

  5. Codeforces Round #530 (Div. 2) A,B,C,D

    A. Snowball 链接:http://codeforces.com/contest/1099/problem/A 思路:模拟 代码: #include<bits/stdc++.h> ...

  6. composer阿里云短信服务不支持传参为数值--为2017年短信接口,2018阿里云有更新http://www.cnblogs.com/q1104460935/p/8916096.html

    composer 阿里云短信服务使用 xuying/aliyun_mns     更新到2017年初,不再更新 ){;, ); }; } ; }; }; }} 以下为发送成功返回对象 object(A ...

  7. PhantomJS报错warnings.warn('Selenium support for PhantomJS has been deprecated, please use headless '

    原因:Selenuim已经放弃PhantomJS3.x了,建议使用火狐或者谷歌无头浏览器. 解决方法: 1.phantomjs降级,换个2.x版本的 2.使用无头浏览器,示例代码(自己改了改,如有错误 ...

  8. 「POJ - 1003」Hangover

    BUPT 2017 summer training (16) #2C 题意 n个卡片可以支撑住的长度是1/2+1/3+1/4+..+1/(n+1)个卡片长度.现在给出需要达到总长度,求最小的n. 题解 ...

  9. 【bzoj3456】城市规划(多项式求逆+dp)

    Description 求\(~n~\)个点组成的有标号无向连通图的个数.\(~1 \leq n \leq 13 \times 10 ^ 4~\). Solution 这道题的弱化版是poj1737, ...

  10. linux中文件的时间戳

    touch命令 touch用来创建新文件,或者修改时间戳. linux中的文件有三个时间点,利用stat命令查看: 1.atime:最后访问时间:文件最后一次被存取或执行的时间. 2.mtime:最后 ...