悬浮广告方法日常收集整理

1左侧或者右侧的悬浮广告。

css样式：

*{padding: 0;margin: 0;}
.fl{float:left;display: inline;}
.fr{float: right;display: inline;}
.clearfix{*zoom: 1;}
.clearfix:after{ display: block; content: ""; height: 0;line-height: 0;visibility: hidden; clear: both;}
/*tab 切换*/
.tab_title{ line-height: 30px; border-bottom: 1px solid #ccc; width: 360px;margin: 0 auto;}
.tab_title a{ display: inline-block; font-size: 16px;color: #333; text-decoration: none; margin-right: 20px;}
.tab_title a.active{color: red;}
.tab_content{width: 340px; padding:5px 10px;margin: 0 auto; border: 1px solid #ccc; height: 120px;}
/*文字滚动*/
.moveScroll{ width: 360px; height: 120px; border: 1px solid #ccc; margin: 50px auto;}
.moveparent{ width: 330px;height: 90px;overflow: hidden; margin:15px auto;}
.moveScroll .content{ color: #333; }
/*文本输入框*/
.inputText{ width: 320px; padding:10px; line-height: 22px;margin: 10px auto;display: block;color: #999;}
/*幻灯片*/
.wrapper {
width: 324px;
height: 325px;
_height: 321px;
position: relative;
z-index: 1;
margin: 20PX auto;
}
.wrapper .main {
width: 324px;
height: 222px;
overflow: hidden;
}
.wrapper li {
float: left;
display: inline;
}
.wrapper ul img {
width: 324px;
height: 222px;
position: relative;
z-index: 1;
}
.wrapper ul span {
position: absolute;
display: block;
text-align: center;
width: 324px;
height: 20px;
overflow: hidden;
bottom: 10px;
left: 0;
}
.wrapper ol {
margin-right: -4px;
height: 58px;
*zoom: 1;
}
.wrapper ol:after {
display: block;
content: "";
line-height: 0;
height: 0;
visibility: hidden;
clear: both;
}
.wrapper ol img {
width: 78px;
height: 52px;
margin: 6px 4px 0 0;
}
.wrapper ol li {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
}
.wrapper ol .active {
opacity: 1;
filter: alpha(opacity=100);
}

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简jQuery左右对称浮动广告代码</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div style="height:2000px;"></div>
<!-- 代码部分begin -->
<div id="floatright" style="position: absolute; z-index: 10; "></div>
<script src="js/jquery.js" ></script>
<script src="js/floatAd.js" ></script>
<script>
window.onload = function(){
var ad2 = new FloatAd({
nodeLink : "<a href='广告连接地址'><img src='广告图片' border=0 /></a>" ,
floatObj : "floatleft",
x : 10,
y : 400,
locate : "left"
});
ad2.play();
}
</script>
<!-- 代码部分end -->
</body>
</html>

js文件除引入jquery外(要问我jquery是什么，请出门左转)还需要：

var FloatAd = function(obj){
var mainNode = $("." + obj.main)[0];
if(obj.nodeLink && (typeof obj.nodeLink == "string")){
var newFloatObj = document.createElement("div");
newFloatObj.id = obj.floatObj;
newFloatObj.style.position = "absolute";
newFloatObj.style.zIndex = 10;
newFloatObj.innerHTML = obj.nodeLink;
document.body.appendChild(newFloatObj);
}
this.ad = document.getElementById(obj.floatObj);
this.main = document.getElementById(obj.main)||mainNode;
this.x = obj.x;
this.y = obj.y;
this.locate = obj.locate;
this.space = obj.space;
var that = this;
this.play = function(){
setInterval(function(){
that.calculate();
},10);
};
}
FloatAd.prototype = {
constructor : FloatAd,
calculate : function(){
var obj_x = this.x,
obj_y = this.y,
main_offsetLeft = document.documentElement.scrollLeft||document.body.scrollLeft,
main_offsetTop = document.documentElement.scrollTop||document.body.scrollTop;
if(this.main){
if(this.locate == "left"){
obj_x = this.main.offsetLeft - this.ad.offsetWidth - this.space;
}else if(this.locate == "right"){
obj_x = this.main.offsetLeft + this.main.offsetWidth + this.space;
}
if(this.ad.offsetLeft != main_offsetLeft + obj_x){
var dx = (main_offsetLeft + obj_x - this.ad.offsetLeft)*0.08;
dx = (dx > 0 ? 1 : -1)*Math.ceil(Math.abs(dx));
this.ad.style.left = this.ad.offsetLeft + dx + "px";
}
}else{
if(this.locate == "left"){
this.ad.style.left = obj_x + "px";
}else if(this.locate == "right"){
this.ad.style.right = obj_x +"px";
}
}
if(this.ad.offsetTop != main_offsetTop + obj_y){
var dy = (main_offsetTop + obj_y - this.ad.offsetTop)*0.08;
dy = (dy > 0 ? 1 : -1)*Math.ceil(Math.abs(dy));
this.ad.style.top = this.ad.offsetTop + dy + "px";
}
}
}

这是自己在用到这种效果的时候整理出来的，copy网上的案例，进行整理，方便大家使用。

2 全屏漂浮案例：飘窗！

css文件：

#img1{
z-index: 100;
left: 2px;
width: 59px;
position: absolute;
top: 43px;
height: 61px;
visibility: visible;
}

html文件

<html>
<head>
<title>漂浮广告</title>
</head>
<link rel="stylesheet" href="floatImg.css"/>
<body>
<div id=img1>
<a href="广告链接地址" target="_blank">
<img src="广告图片">
</a>
</div>
</body>
<script src="链接js"></script>
</html>

js代码：

var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.body.scrollLeft;
img1.style.top = yPos + document.body.scrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos - step;}
if (yPos < 0)
{yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset))
{yon = 0;yPos = (height - Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos - step;}
if (xPos < 0)
{xon = 1;xPos = 0;}
if (xPos >= (width - Woffset))
{xon = 0;xPos = (width - Woffset); }
}
function start()
{
img1.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();

以上内容是小编给大家整理的有关悬浮广告方法，希望对大家有所帮助！

赞 (0)

相关推荐

  • js 左右悬浮对联广告代码示例

    一段js 左右悬浮广告代码,只要修改广告图片地址与连接地址,相应参数根据页面调整下就可以使用这段左右悬浮广告代码了 代码: var delta=0.15 var collection; function floaters() { this.items = ; this.addItem = function(id,x,y,content) { document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; widt

  • JS实现悬浮移动窗口(悬浮广告)的特效

    js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

  • js 左右悬浮对联广告特效代码

    js制作web网页左右悬浮广告特效. 引用: 复制代码 代码如下: <script src="js/ad.js" type="text/javascript"></script> 2.页面调用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • 悬浮广告方法日常收集整理

    1左侧或者右侧的悬浮广告. css样式: *{padding: 0;margin: 0;} .fl{float:left;display: inline;} .fr{float: right;display: inline;} .clearfix{*zoom: 1;} .clearfix:after{ display: block; content: ""; height: 0;line-height: 0;visibility: hidden; clear: both;} /*tab

  • 正则表达式日常收集整理(简单且实用)

    正则表达式,又称正规表示法.常规表示法.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 正则表达式的功能非常的强大,废话不多说了,直接给大家分享整理的内容了. 一:基本匹配符: \d 匹配数字 eg:'5\d0'------->'580' \w 匹配字母或数字 eg:'\d\w\w'-----

  • JavaScript 经典实例日常收集整理(常用经典)

    JavaScript 经典实例日常收集整理(常用经典)

    本文是小编日常收集整理些js经典实例,特此分享到我们平台供大家参考! 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除事件 function remove

  • 日常收集整理的Git常用命令

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. 查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id git co -- <file> # 抛弃工作区修改 git co . # 抛弃工作区修改 git add <file> # 将工作文件修改提交到本地暂存区 git add

  • 日常收集整理php正则表达式(超常用)

    以下是关于小编给大家日常收集整理php正则表达式,具体内容请看下文详解吧 $str = preg_replace("/(<a.*?>)(.*?)(<\/a>)/", '\1<span>\2</span>\3', $str); 其中用了三个子模式(每个圆括号中内容为一个子模式),第一个是链接开始标签,第二个是链接文本,第三个是</a> 然后第二个参数中\1.\2.\3就表示这三个部分,要替换成什么样子还不简单? 获取页面中的所有

  • 日常收集整理SqlServer数据库优化经验和注意事项

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 优化数据库的注意事项: 1.关键字段建立索引. 2.使用存储过程,它使SQL变得更加灵活和高效. 3.备份数据库和清除垃圾数据. 4.SQL语句语法的优化.(可以用Sybase的SQL Expert,可惜我没找到unexpired的序列号) 5.清理删除日志. SQL语句优化的基本原则: 1.使用索引来更快地遍历表. 缺省情况下建立的索引是非群集索引,但有时它并不是最

  • 日常收集整理的JavaScript常用函数方法

    函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用. 提示:JavaScript 对大小写敏感.关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数. 字符串长度截取 functiocutstr(strlen{ vatemp, i

  • 日常收集整理的oracle常用命令大全(收藏)

    一.Oracle的启动和关闭 1.在单机环境下 要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下 su - oracle a.启动ORACLE系统 oracle>svrmgrl SVRMGR>connect internal SVRMGR>startup SVRMGR>quit b.关闭ORACLE系统 oracle>svrmgrl SVRMGR>connect internal SVRMGR>shutdown SVRMGR>quit 启动

  • jQuery Html控件基本操作(日常收集整理)

    闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q

  • 日常收集整理正则表达式验证大全

    常用正则表达式大全!(例如:匹配中文.匹配html) 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:<(S*?)[^>]*>.*?|<.*? /> 评注:网上流传的版本太糟糕,上面这个也仅仅能

随机推荐