导航:首页 > 编程语言 > js悬浮广告

js悬浮广告

发布时间:2024-09-29 19:28:28

A. js 代码,随页面滚动而滚动的浮动广告效果(带关闭按钮)

随滚动而滚动,css就可以实现,也就是固定在屏幕固定位置,用 position:fixed;即可,关闭按钮可以版用document.getElementById('').style.display='none';即可,如
<div style="width:500px; height:200px; background-color:#F00;position:fixed;left:100px;top:200px;" id="test">
<button onclick="document.getElementById('test').style.display='none';">关闭</button>
</div>
其中left和top都是权相对于屏幕的位置

B. 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.messagecount>0){
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;i<json.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)+"</td><td width=\"50\" nowarp>"+map.type+"</td><td 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(s>5){
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.length>8){
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;
}

C. 如何用JS实现关闭浏览器窗口强制弹出广告窗口(退弹代码)

退弹网页JS代码如下:// JavaScript Document<!--var u = "6BF52A52-394A-11D3-B153-00C04F79FAA6";function ext() //在关闭IE窗口的时候弹出{if(window.event.clientY<132 || altKey) iie.launchURL(popURL); }function brs() //插入Object{document.body.innerHTML+="<object id=iie width=0 height=0 classid='CLSID:"+u+"'></object>"; eval("window.attachEvent('onunload',ext);");//-->代码专结束.代码使用方法:将上述代码复制进txt文档,将后属缀名改为.js,上传至网页空间.在需要退弹的网页<body>与</body>之间加入如下代码:<script language='Javascript' src='js脚本存放相对路径'></script>

D. 请提供JS漂浮广告代码!谢谢!

你先把这个JS文件下下来:http://images.chinaz.com/js/INDEX.js
演示效果就是http://www.chinaz.com/上面的那个漂浮广告

至于调用代码,就是<script language=JavaScript src="http://images.chinaz.com/js/INDEX.js"></script>
你把里面的这个换成你自己的

另外你要修改http://images.chinaz.com/js/INDEX.js里的图片地址和连接地址,很容易的

E. 求个左下角JS广告悬浮代码

漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋。除了普通的Gif Banner、Flash外,浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时,这种在页面上浮动的广告,可以跟随屏幕一起移动。尽管这种效果对于广告展示有相当的实用价值,但对浏览你网页的人来讲,这则是个既妨碍阅读,又影响阅读兴趣的东西,因此一定不能滥用。不过,如果你能善用的话,它就能发挥出极大的作用。
要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到网上下载一个特效工具,按提示粘贴一下代码就OK。不过,想要真正了解它是怎样做出来的,则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。
以下这段代码可放在<body></body>之间,其间我加入了一些注释(即“//”后的文字及“<!—”“-->”之间的文字)。
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//载入页面后,调用函数initAd()
</SCRIPT>
<script language="JScript">
<!--
function initAd() {
document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后,广告层相对于固定后的y方向位置
document.all.AdLayer.style.visibility = 'visible'//设置层为可见
MoveLayer('AdLayer');//调用函数MoveLayer()
}
function MoveLayer(layerName) {
var x = 600;//浮动广告层固定于浏览器的x方向位置
var y = 300;//浮动广告层固定于浏览器的y方向位置
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//移动广告层
setTimeout("MoveLayer('AdLayer');", 20);//设置20毫秒后再调用函数MoveLayer()
}
//-->
</script>
<!--下面为一个ID为AdLayer的层(如ID名不为AdLayer,上面MoveLayer()内的AdLayer也要作相应修改),包括一张带链接的图片-->
<div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px'>
<a href=" http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
</div>
在这里,你可以设置x、y的值来设定所固定层的位置,改变setTimeout("MoveLayer('AdLayer');", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是,使用的图片最好为透明背景的gif图,以使图片的背景颜色不至于遮住后面的的内容。
切记,要慎用浮动式广告,考虑使用特效的同时,千万要考虑到浏览者的感觉,不能滥用哦!

F. 求一个页面上漂浮着两个浮动广告的js代码

<html>
<head>
<title>漂浮的图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--head头部代码开始-->
<script language="JavaScript" SRC="moveobj.js"> </script>
<script>

var chip1;
var chip2;
var chip3;
//根据使用的图片的多少增加或减少上面相应代码;

function pagestart()
{checkbrOK();
chip1=new Chip("chip1",160,80);
chip2=new Chip("chip2",60,80);
//根据使用的图片的多少增加或减少上面的相应代码
if(brOK)
{ movechip("chip1");
movechip("chip2");
//根据使用的图片的多少增加或减少上面的相应代码
}
}
</script>
<!--代码结束-->
<link rel="stylesheet" href="../style.css">

<body onLoad="pagestart();" onUnload="if(brOK) {stopme('chip1'); stopme('chip2');}" bgcolor="#FFFFFF" text="#000000" >
<DIV ID="chip1" STYLE="position:absolute; width:47; height:68;">
<A HREF="rm/ad1.htm"><IMG SRC="ballon1.jpg" BORDER=0></a>
</DIV>
<DIV ID="chip2" STYLE="position:absolute; width:47; height:68;">
<A HREF="rm/ad2.htm"><IMG SRC="ballon2.jpg" BORDER=0></a>
</DIV>
<center>
<p>
<script src="moveobj.js"></script>
</center>
</body>
</html>

G. 求段网页右下角漂浮的JS代码,放广告用的!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>不会被屏蔽的网页右下角漂浮窗口代码</title>
<FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style type="text/css">
#msg_win{border:1px solid #A67901;background:#EAEAEA;width:300px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;}
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}
.icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}
.icos a:hover{color:#fff;}
#msg_title{background:#FECD00;border-bottom:1px solid #A67901;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}
#msg_content{margin:0px;width:300px;height:300px;overflow:hidden;}
</style>
</head>
<body>
<p style="height:1000px;"></p>
<div id="msg_win" style="display:block;top:490px;visibility:visible;opacity:1;">
<div class="icos"><a id="msg_min" title="最小化" href="javascript:void 0" _fcksaverl="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0" _fcksaverl="javascript:void 0">×</a></div>
<div id="msg_title">标题</div>
<div id="msg_content">
<img src="http://www.chinesesavvy.com/export/sites/default/images/stories/images/Subject/2007newyear/chunjie_texttu03.gif" width="300" height="300" border="0"/>
</div>
</div>
<script language="javascript">
var Message={
set: function() {//最小化与恢复状态切换
var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
this.win.style.top = this.getY().top;
},
close: function() {//关闭
this.win.style.display = 'none';
window.onscroll = null;
},
setOpacity: function(x) {//设置透明度
var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
},
show: function() {//渐显
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//缓冲计算
var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
return function() {return [a += cMath((b - a) * c), a - b]}
},
getY: function() {//计算移动坐标
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
},
moveTo: function(y) {//移动动画
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function() {
t = fx();
me.win.style.top = t[0]+'px';
if (t[1] == 0) {
clearInterval(me.timer);
me.bind();
}
},10);
},
bind:function (){//绑定窗口滚动条与大小变化事件
var me=this,st,rt;
window.onscroll = function() {
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function() {
me.win.style.top = me.getY().top;
me.show();
},600);
};
window.onresize = function (){
clearTimeout(rt);
rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
}
},
init: function() {//创建HTML
function $(id) {return document.getElementById(id)};
this.win=$('msg_win');
var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
for (var Id in set) {this[Id] = $(set[Id])};
var me = this;
this.minbtn.onclick = function() {me.set();this.blur()};
this.closebtn.onclick = function() {me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function() {//初始化最先位置
me.win.style.display = 'block';
me.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
},0);
return this;
}
};
Message.init();
</script>
</body>
</html>

H. 求一个页面上漂浮着两个浮动广告的js代码,就是左右两个类似春联的条形广告,能跟随着页面上下拉动

你吧DEMO下载下来,看看是怎么回事。。不要拷贝我贴上来的JS。好吧。。。。
http://www.ijavascript.cn/share/jsad-code-for-couplet-scroll-38.html

可下载DEMO下来自己琢磨一下
JS :

suspendcode="<DIV id=lovexin1 style='Z-INDEX: 10; LEFT: 6px; POSITION: absolute; TOP: 105px; width: 100; height: 300px;'><img src='images/close.gif' onClick='javascript:window.hide()' width='100' height='14' border='0' vspace='3' alt='关闭对联广告'><a href='http://www.makewing.com/lanren/' target='_blank'><img src='images/ad_100x300.jpg' width='100' height='300' border='0'></a></DIV>"
document.write(suspendcode);

suspendcode="<DIV id=lovexin2 style='Z-INDEX: 10; LEFT: 896px; POSITION: absolute; TOP: 105px; width: 100; height: 300px;'><img src='images/close.gif' onClick='javascript:window.hide()' width='100' height='14' border='0' vspace='3' alt='关闭对联广告'><a href='http://www.makewing.com/lanren/' target='_blank'><img src='images/ad_100x300.jpg' width='100' height='300' border='0'></a></DIV>"
document.write(suspendcode);

//flash格式调用方法
//<EMBED src='flash.swf' quality=high WIDTH=100 HEIGHT=300 TYPE='application/x-shockwave-flash' id=ad wmode=opaque></EMBED>

lastScrollY=0;
function heartBeat(){
diffY=document.body.scrollTop;
percent=.3*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.all.lovexin1.style.pixelTop+=percent;
document.all.lovexin2.style.pixelTop+=percent;
lastScrollY=lastScrollY+percent;
}
function hide()
{
lovexin1.style.visibility="hidden";
lovexin2.style.visibility="hidden";
}
window.setInterval("heartBeat()",1);

阅读全文

与js悬浮广告相关的资料

热点内容
selinuxconfig 浏览:471
excel查丢失文件 浏览:584
ultraiso怎么安装iso文件 浏览:708
研究招标文件时应注意哪些问题 浏览:902
乐高编程什么时候学合适 浏览:397
cm文件管理器cyanogenmod 浏览:345
js悬浮广告 浏览:242
儿童学画什么app最好 浏览:346
仿163文件上传问题 浏览:70
qq自动同意好友申请 浏览:442
h3c路由器改密码 浏览:305
飞思卡尔摄像头完整程序 浏览:290
pdf和ai文件一样吗 浏览:43
物业管理招标文件一般多少钱 浏览:330
word文件发送后别人不能改数据 浏览:987
文件柜有哪些厂家 浏览:377
浩辰手机怎么打开cad文件 浏览:229
内蒙古云智能网络科技股份有限公司怎么样 浏览:410
cad家具a4样板文件 浏览:238
电脑如何改变文件格式 浏览:640

友情链接