好用的漂浮广告 jquery
<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的更多相关文章
- JQuery漂浮广告代码
<!doctype html><html><head><meta charset="utf-8"><title>jque ...
- js 漂浮广告
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- JS全屏漂浮广告、移入光标停止移动
点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- [转]javascript对联广告、漂浮广告封装类,多浏览器兼容
封装的JS方法: function $$(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.l ...
- Js弹性漂浮广告代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- 漂浮广告代码兼容ie、firefox,多个漂浮不冲突,调用只需两行代码
原文:漂浮广告代码兼容ie.firefox,多个漂浮不冲突,调用只需两行代码 将广告内容放在div中,设置一个id,然后用下面方法调用var adcls=new AdMove("div的id ...
- js漂浮广告实现代码(合集经典)
<html> <head> <title>漂浮广告</title> <body> <div id="codefans_net ...
- jQuery网站顶部定时折叠广告
效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
随机推荐
- File类 详解!
package cn.zhoucufeng; import java.io.File; import java.io.IOException; import java.util.Arrays; imp ...
- 使用proxychains 代理终端
最近在国外的vps上搭建了一个ss服务器,在浏览器里面设置socks5代理上网很方便, 但是终端里面却只支持http方式的代理配置,网上有socks转http代理的方式,但是最近发现一个更为简单的方式 ...
- 【python练习题】程序7
#题目:将一个列表的数据复制到另一个列表中. l = [1,2,3,4,5,6,7,8] m = [] m = l[:] print (m)
- JAVA js WEB 疑难点总结
1.获取combox的Value 和 Text $('#id').combobox('getValue').$('#id').combobox('getText'): 2.ajax 直接访问ht ...
- 提高网络灵活性和效率的组网方式—SD-WAN
导读 最初,大多数企业只是简单地将软件覆盖添加到广域网连接上.但是,随着时间的推移,由于SD-WAN架构的易配置功能,企业将开始采用SD-WAN更复杂的功能. 广域网一般用于连接多个业务地点,如总部和 ...
- Qt QTimer
QTimer类提供了重复和单次触发信号的定时器. QTimer类为定时器提供了一个高级别的编程接口.很容易使用:首先,创建一个QTimer,连接timeout()信号到适当的槽函数,并调用start( ...
- Spring 使用介绍(九)—— 零配置(二)
三.Bean定义 1.开启bean定义注解支持 开启注解支持须添加以下配置项: <context:component-scan base-package="cn.matt"/ ...
- excel导入、导出
http://blog.csdn.net/cjh200102/article/details/12557599 NPOI 工作本HSSFWorkbook 构造方法,无参表示创建一个新的工作本,可以接收 ...
- SpringBoot远程接口调用-RestTemplate使用
在web服务中,调度远程url是常见的使用场景,最初多采用原生的HttpClient,现采用Spring整合的RestTemplate工具类进行.实操如下: 1. 配置 主要用以配置远程链接的相关参数 ...
- Let's Encrypt免费泛域名证书申请
一. 下载acme.sh,以下四条命令任选一条即可 curl https://get.acme.sh | shwget -O - https://get.acme.sh | sh curl https ...