好用的漂浮广告 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 ...
随机推荐
- WEB测试重点--(转载)
1.功能测试: 所实现的功能是否和需求一致: js错误 页面链接错误-空链接.死链接.错误链接 按钮无效 未实现功能 报错提示信息不准确或不友好 数据库访问错误 sql注入 文档上传下载问题 -未实现 ...
- 剖析插件 DataTable 自定义列表列get请求如何书写传递的参数
重点代码Demo 已用 斜体标注 后端flask: @task_mgm.route('/taskinfo_editID=<int:num>', methods=['GET', 'POST' ...
- vs code安装
vs code是一款文本编辑器,开源,是前端界的vs,而Dreamweaver适合入门. user版本的一些系统分区文件夹无法创建,可能存在语言显示问题.一般用户建议使用system版. 下载链接:h ...
- Jackson将对象转换为json字符串时,设置默认的时间格式
maven需要的依赖: <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifac ...
- Log4j2配置与使用
依赖包: <!-- https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-api --> <depend ...
- linux 依赖解决办法
在安装软件过程中如果出现依赖不满足,有两种情况: 1:你系统里面没有安装依赖软件,[但是你的软件源里面有这个软件,你只是没有安装], 这种情况很简单,通过 sudo apt-get install - ...
- [离散时间信号处理学习笔记] 7. z变换
z变换及其收敛域 回顾前面的文章,序列$x[n]$的傅里叶变换(实际上是DTFT,由于本书把它叫做序列的傅里叶变换,因此这里以及后面的文章也统一称DTFT为傅里叶变换)被定义为 $X(e^{j\ome ...
- 晨读笔记:CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- ffmpeg 转码命令与ffplay
ffmpeg.exe用于视频的转码. ▫ 最简单的命令 ffmpeg -i input.avi -b:v 640k output.ts 该命令将当前文件夹下的input.avi文件转换为output. ...
- Linux各目录及每个目录的详细介绍
http://www.cnblogs.com/duanji/p/yueding2.html