jquery悬浮广告代码（css漂浮广告代码）[20240422更新]

今天给各位分享jquery悬浮广告代码的知识，其中也会对css漂浮广告代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css 控制
• 2、jquery 广告,上下左右满屏移来移去,遇到窗口边缘就会相反移动（一个浮动的小广告），速求代码！
• 3、可关闭两边飘浮对联广告代码jquery特效宽屏显示
• 4、JS漂浮广告代码
• 5、求一个右下角的漂浮广告代码？

css 控制

!DOCTYPE HTML

html lang="en"

head

    meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /

    meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

    titletest/title

    link rel="stylesheet" href="css.css" type="text/css" media="screen"

    script src=""/script

/head

body

    div style="width:100%;height:150px;background:#eee;"/div

    div id="go" style="padding:30px;width:70px;border:1px solid red;background:#f60;"1/div

    div style="width:100%;height:1500px;background:#eee;"/div

    div/div

    script type="text/javascript"

        $(function() { 

            var elm = $('#go');//通用代码，只需要修改此处id

            var startPos = $(elm).offset().top; 

            var this_left = $(elm).offset().left; 

            $.event.add(window, "scroll", function() { 

                var p = $(window).scrollTop(); 

                $(elm).css('position',((p)  startPos) ? 'fixed' : 'static'); 

                $(elm).css('top',((p)  startPos) ? '10px' : ''); 

                $(elm).css('left',this_left); 

            }); 

        });     

    /script

/body

/html

jquery 广告,上下左右满屏移来移去,遇到窗口边缘就会相反移动（一个浮动的小广告），速求代码！

titleJS浮动广告/title 

style type="text/css" 

img{border:0;} 

/style 

SCRIPT type=text/javascript 

function addEvent(obj,evtType,func,cap){ 

cap=cap||false; 

if(obj.addEventListener){ 

obj.addEventListener(evtType,func,cap); 

return true; 

}else if(obj.attachEvent){ 

if(cap){ 

obj.setCapture(); 

return true; 

}else{ 

return obj.attachEvent("on" + evtType,func); 

} 

}else{ 

return false; 

} 

} 

function getPageScroll(){ 

var xScroll,yScroll; 

if (self.pageXOffset) { 

xScroll = self.pageXOffset; 

} else if (document.documentElement  document.documentElement.scrollLeft){ 

xScroll = document.documentElement.scrollLeft; 

} else if (document.body) { 

xScroll = document.body.scrollLeft; 

} 

if (self.pageYOffset) { 

yScroll = self.pageYOffset; 

} else if (document.documentElement  document.documentElement.scrollTop){ 

yScroll = document.documentElement.scrollTop; 

} else if (document.body) { 

yScroll = document.body.scrollTop; 

} 

arrayPageScroll = new Array(xScroll,yScroll); 

return arrayPageScroll; 

} 

function GetPageSize(){ 

var xScroll, yScroll; 

if (window.innerHeight  window.scrollMaxY) { 

xScroll = document.body.scrollWidth; 

yScroll = window.innerHeight + window.scrollMaxY; 

} else if (document.body.scrollHeight  document.body.offsetHeight){ 

xScroll = document.body.scrollWidth; 

yScroll = document.body.scrollHeight; 

} else { 

xScroll = document.body.offsetWidth; 

yScroll = document.body.offsetHeight; 

} 

var windowWidth, windowHeight; 

if (self.innerHeight) { 

windowWidth = self.innerWidth; 

windowHeight = self.innerHeight; 

} else if (document.documentElement  document.documentElement.clientHeight) { 

windowWidth = document.documentElement.clientWidth; 

windowHeight = document.documentElement.clientHeight; 

} else if (document.body) { 

windowWidth = document.body.clientWidth; 

windowHeight = document.body.clientHeight; 

} 

if(yScroll  windowHeight){ 

pageHeight = windowHeight; 

} else { 

pageHeight = yScroll; 

} 

if(xScroll  windowWidth){ 

pageWidth = windowWidth; 

} else { 

pageWidth = xScroll; 

} 

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 

return arrayPageSize; 

} 

var AdMoveConfig=new Object(); 

AdMoveConfig.IsInitialized=false; 

AdMoveConfig.ScrollX=0; 

AdMoveConfig.ScrollY=0; 

AdMoveConfig.MoveWidth=0; 

AdMoveConfig.MoveHeight=0; 

AdMoveConfig.Resize=function(){ 

var winsize=GetPageSize(); 

AdMoveConfig.MoveWidth=winsize[2]; 

AdMoveConfig.MoveHeight=winsize[3]; 

AdMoveConfig.Scroll(); 

} 

AdMoveConfig.Scroll=function(){ 

var winscroll=getPageScroll(); 

AdMoveConfig.ScrollX=winscroll[0]; 

AdMoveConfig.ScrollY=winscroll[1]; 

} 

addEvent(window,"resize",AdMoveConfig.Resize); 

addEvent(window,"scroll",AdMoveConfig.Scroll); 

function AdMove(id){ 

if(!AdMoveConfig.IsInitialized){ 

AdMoveConfig.Resize(); 

AdMoveConfig.IsInitialized=true; 

} 

var obj=document.getElementById(id); 

obj.style.position="absolute"; 

var W=AdMoveConfig.MoveWidth-obj.offsetWidth; 

var H=AdMoveConfig.MoveHeight-obj.offsetHeight; 

var x = W*Math.random(),y = H*Math.random(); 

var rad=(Math.random()+1)*Math.PI/6; 

var kx=Math.sin(rad),ky=Math.cos(rad); 

var dirx = (Math.random()0.5?1:-1), diry = (Math.random()0.5?1:-1); 

var step = 1; 

var interval; 

this.SetLocation=function(vx,vy){x=vx;y=vy;} 

this.SetDirection=function(vx,vy){dirx=vx;diry=vy;} 

obj.CustomMethod=function(){ 

obj.style.left = (x + AdMoveConfig.ScrollX) + "px"; 

obj.style.top = (y + AdMoveConfig.ScrollY) + "px"; 

rad=(Math.random()+1)*Math.PI/6; 

W=AdMoveConfig.MoveWidth-obj.offsetWidth; 

H=AdMoveConfig.MoveHeight-obj.offsetHeight; 

x = x + step*kx*dirx; 

if (x  0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 

if (x  W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);} 

y = y + step*ky*diry; 

if (y  0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 

if (y  H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);} 

} 

this.Run=function(){ 

var delay = 10; 

interval=setInterval(obj.CustomMethod,delay); 

obj.onmouseover=function(){clearInterval(interval);} 

obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);} 

} 

} 

/SCRIPT 

DIV id=ad1 style="Z-INDEX: 5" 

!--漂浮开始-- 

A href="" 

target=_blankIMG src=""/A 

!--漂浮结束-- 

/DIV 

SCRIPT type=text/javascript!-- 

var ad1=new AdMove("ad1"); 

ad1.Run(); 

        //多组漂浮 

        //var ad1=new AdMove("ad2"); 

//ad2.Run(); 

//-- 

/SCRIPT

可关闭两边飘浮对联广告代码jquery特效宽屏显示

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

style type="text/css"

#ad1,#ad2{

    -webkit-transition: all .5s ease-out;

    -moz-transition: all .5s ease-out;

    -o-transition: all .5s ease-out;

    transition: all .5s ease-out;

    POSITION:absolute;

    TOP:120px;

    width:100px;

    height:200px;

    border:1px solid red;

}

#close1,#close2{

font-size:10px;

background:gray;

float:right;

}

#close1:hover,#close2:hover{cursor:pointer}

/style

/head

body

div id="mm" style="height:2000px;background:#f5f5f5;width:500px"

/div

DIV id="ad1" style='left:2px;'

div id="close1"关闭/div

/div

DIV id="ad2" style='right:2px;'

div id="close2"关闭/div

/div

script type="text/javascript" src="js/jquery.js" /script

script language="JavaScript" type="text/javascript"

$("#close1").click(function(){ //关闭广告

$(this).parent().remove();

})

$("#close2").click(function(){

$(this).parent().remove();

})

document.onscroll=function(){ //滑动保持广告位置

$("#ad1").style.top=document.body.scrollTop+120+'px';

$("#ad2").style.top=document.body.scrollTop+120+'px';

};

/script

/body

/html

JS漂浮广告代码

给个简单的 也需引入jquery

Html:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

head

title/title

script type="text/javascript" src="jquery-1.4.2.min.js"/script

script type="text/javascript"

$(function(){

$('#showWin').click(showWin);

function showWin(){

$('#floatWin').show('slow');

}

})

/script

/head

body

button id="showWin"显示窗口/button

div id="floatWin"

style="right:0px;bottom:0px;display:none; width: 200px;height: 200px; background-color: #cccccc;position: absolute;"

/div

/body

/html

最近项目里正好有类似需求 代码给出来供你研究下 需要jQuery支持

有什么疑问可以hi我

(function(){

$(function(){

$.ajax({

url: messagePath+'messageBox.do',

// dataType:'json',

success:function(json){

alert(json);

showMessages(json);

}

});

})

function showMessages(json){

if(json.messagecount0){

var messageBox ="div id=\"OTOS_MESSAGEBOX_CONTAINER\""+

" table id=\"OTOS_MESSAGEBOX_HEADER\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\""+

" tr"+

" td id=\"OTOS_MESSAGEBOX_HEADER_TEXT\"/td"+

" td align=\"right\" width=\"20\"img id=\"OTOS_MESSAGEBOX_CLOSE\" style=\"cursor: pointer;\" src=\"resources/images/close.gif\"/td"+

" /tr"+

" /table"+

" table id=\"OTOS_MESSAGEBOX_CONTEXT_TITLE_TABLE\" width=\"100%\""+

" tr id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER\""+

" td标题/td"+

" td width=\"50\"类型/td"+

" td width=\"40\"发送人/td"+

" /tr"+

" /table"+

" div id=\"OTOS_MESSAGEBOX_CONTEXT\""+

" table id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE\" width=\"100%\"/table"+

" /div"+

"/div";

$('body').append(messageBox);

// $('#OTOS_MESSAGEBOX_CONTAINER').jqDrag("#OTOS_MESSAGEBOX_HEADER");

$('#OTOS_MESSAGEBOX_HEADER_TEXT').text("您有"+json.messagecount+"条未读消息!");

$('#OTOS_MESSAGEBOX_CLOSE').bind('click',closeMessageBox);

$('#OTOS_MESSAGEBOX_CONTAINER').show('slow');

for(var i=0;ijson.list.length;i++){

var map = json.list[i];

$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').append("tr onClick=\"toViewMessage("+map.id+",+"+map.mid+")\" class=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_TR\"td"+cutTitle(map.title)+"/tdtd width=\"50\" nowarp"+map.type+"/tdtd width=\"40\""+map.sender+"/td/tr");

}

$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').verticalRoll({parentid:'OTOS_MESSAGEBOX_CONTEXT'});

}

}

// 纵向滚动

$.fn.verticalRoll = function(options) {

var opts = $.extend({}, $.fn.verticalRoll.defaults, options);

if(!opts.parentid||$('#'+opts.parentid).size()1){

alert('父级不存在');

return false;

}

var $p = $('#'+opts.parentid);

var $t = $(this);

if($t.attr('tagName')!='TABLE'){

alert('不是table');

return false;

}

var s = $t.find('tr').size()

$p.css('overflow','hidden');

$t.css('position','absolute');

if(s5){

window.setInterval(function(){

var temp = $t.find('tr:first');

temp.fadeOut('slow',function(){

$t.append(temp);

temp.show();

})

},2000)

}else{

return false;

}

$.fn.verticalRoll.defaults = {}

}

})(jQuery);

function closeMessageBox(){

$('#OTOS_MESSAGEBOX_CONTAINER').hide('slow');

$('#OTOS_MESSAGEBOX_CONTAINER').fadeOut();

}

function cutTitle(title){

var temp;

if(title.length8){

temp = title.substring(0,8)+"...";

return temp

}else{

return title;

}

}

function toViewMessage(id,rid){

window.location.href = "messagesUserList.do?id="+id+"rid="+rid;

}

Css文件

@CHARSET "UTF-8";

#OTOS_MESSAGEBOX_CONTAINER {

position: absolute;

width: 240px;

height: 145px;

border: 1px solid #81b8ff;

background-color: #deecfd;

right: 0px;

bottom: 0px;

overflow:hidden;

display: none;

}

#OTOS_MESSAGEBOX_CONTAINER TD{

white-space: nowrap;

overflow: hidden;

height: 18px;

}

#OTOS_MESSAGEBOX_HEADER {

cursor: move;

border-bottom: 1px solid #81b8ff;

background-color: #9ACDFE;

overflow:hidden;

}

#OTOS_MESSAGEBOX_HEADER td {

padding: 2px;

color: #ffffff;

overflow:hidden;

}

#OTOS_MESSAGEBOX_CONTEXT {

position: relative;

height: 102px;

overflow:hidden;

}

#OTOS_MESSAGEBOX_CONTEXT td{

white-space: nowrap;

overflow: hidden;

}

#OTOS_MESSAGEBOX_HEADER_TEXT {

font-weight: bold;

overflow:hidden;

}

#OTOS_MESSAGEBOX_FOOTER {

position: relative;;

bottom: 0px;;

padding-right: 2px;;

text-align: right;

overflow:hidden;

}

.OTOS_MESSAGEBOX_CONTEXT_TABLE_TR{

cursor:pointer;

color: #336699;

overflow:hidden;

}

#OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER td{

overflow:hidden;

font-weight: bold;

overflow:hidden;

}

求一个右下角的漂浮广告代码？

右下角漂浮广告代码使用方法(一)： 将以下代码以**.js文件形式保存，在模板中调用这个js文件即可

（备注该代码的图片大小为250*150 代码里面有参数自己看下就知道了）document.writeln("div id=\"qqaddiv\" style=\"position:absolute; z-index: 100;\" ");

document.writeln("a href=链接地址 target=_blankimg src=图片链接地址 border=0/a");

document.writeln("/div");

var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;

var adst = document.getElementById("qqaddiv").style;

adst.top = ( bodyfrm.clientHeight - 150 ) + "px";

adst.left = ( bodyfrm.clientWidth - 250 ) + "px";

function moveR() {

adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 150 ) + "px";

adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 250 ) + "px";

}

setInterval("moveR();", 80); 右下角漂浮广告代码使用方法(二)： var qq_etewidth = 259;

var qq_eteheight = 158;

var qq_banner_filename = "广告图片链接地址";

var qq_gotoUrl = '广告链接地址';document.write("div id=eteUnionUpFloat style='margin:0px;padding-bottom:300px;z-index: 10;position:absolute;width:"+qq_etewidth+"px;height:"+qq_eteheight+"px;'")

document.write("a href='"+qq_gotoUrl+"' target='_blank'img src='"+qq_banner_filename+"' border='0' style='cursor: hand;' width='"+qq_etewidth+"' height='"+qq_eteheight+"'/a")

document.write("/div")

var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;

var adst = document.getElementById("eteUnionUpFloat").style;

adst.top = ( bodyfrm.clientHeight - qq_eteheight ) + "px";

adst.left = ( bodyfrm.clientWidth - qq_etewidth ) + "px";

function moveR() {

adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - qq_eteheight ) + "px";

adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - qq_etewidth ) + "px";

}

var objTimer=setInterval("moveR();", 100);function CloseX(){

adst.display='none';

}function ete_closediv()

{

document.getElementById('eteUnionUpFloat').style.visibility='hidden';

if(objTimer) window.clearInterval(objTimer)

}

jquery悬浮广告代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css漂浮广告代码、jquery悬浮广告代码的信息别忘了在本站进行查找喔。