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

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

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代码：

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 xBSqA= 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;

hexBSqAight: 61px;

visibility: visible;

}

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();

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。