现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,本文介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,而且与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码:
var delta=0.015;
var collection;
var closeB=false;
function floaters() {
this.items= [];
this.addItem= function(id,x,y,content)
{
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play= function()
{
collection = this.items
setInterval('play()',30);
}
}
function play()
{
if(screen.width<=800 || closeB)
{
for(var i=0;i<collection.length;i++)
{
collection[i].object.style.display= 'none';
}
return;
}
for(var i=0;i<collection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display= '';
}
}
function closeBanner()
{
closeB=true;
return;
}
var theFloaters = new floaters();
//
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a onClick="closeBanner();" href=http://www.webjx.com target=_blank><img src=/img2/js050121_1.gif width=100 height=400 border=0></a><br><img src="/img2/js050121_close.gif" onClick="closeBanner();">');
theFloaters.addItem('followDiv2',0,0,'<a onClick="closeBanner();" href=http://www.webjx.com target=_blank><img src=/img2/js050121_2.gif width=100 height=400 border=0 ></a><br><img src="/img2/js050121_close.gif" onClick="closeBanner();">');
theFloaters.play();
把上面的代码另存为一个JS文件,然后在想实现此效果的页面用<script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT>调用即可,*代表你另存的文件名!注意修改广告图片地址和连接地址!
点击此处查看效果
分享到:
相关推荐
"可关闭的对联广告代码"指的是那些允许用户在不感兴趣时自行关闭的广告代码实现。这种设计考虑了用户体验,避免了强制性的广告展示,从而可能提高用户满意度并降低广告的负面效应。 实现可关闭的对联广告代码通常...
对联广告通常是指在网页两侧显示的广告条,而"可关闭"这一特性则是为了提升用户体验,允许用户在不感兴趣或者需要专注内容时将广告隐藏。 【描述】提到的"可关闭的对联广告JS代码"是指利用JavaScript编写的一种脚本...
带有关闭按钮的对联广告允许用户自行决定是否关闭广告,提供了一定程度的用户体验控制。这个功能的实现一般涉及JavaScript(JS)代码。当用户点击关闭按钮时,JS会触发一个事件监听器,该监听器执行相应的函数,将...
对联广告,通常是指在网页两侧或者页面顶部、底部呈现的横幅或竖幅广告,因其形状类似中国传统对联而得名。这种广告形式能够吸引用户的注意力,同时不会过分干扰主要内容的阅读体验。通过使用“广告js”,开发者可以...
在IT行业中,对联广告是一种常见的网页元素,它通常出现在网页两侧,形状类似对联,因此得名。这种广告形式可以吸引用户的注意力,同时提供互动性,使用户能够选择是否查看或关闭。在这个名为"对联广告代码"的项目中...
首先,我们要理解"对联广告"通常指的是那些在页面两侧悬挂的、类似对联形式的横幅广告。在网页设计中,全屏广告则是一种更加显眼的广告形式,它会占据整个浏览器窗口,以吸引用户的注意力。然而,过度的侵入性可能会...
带关闭按钮的广告允许用户在不感兴趣或感到干扰时将其关闭,从而保持浏览页面的顺畅性和舒适度。这种设计体现了尊重用户选择的原则,有助于提升用户满意度。 2. **前端开发**:实现这样的功能通常需要HTML、CSS和...
【标题】"可关闭 js 对联广告代码(图片非flash)" 涉及的是前端开发中的广告展示技术,特别是利用JavaScript实现的一种用户可选择关闭的对联广告代码。这种广告通常出现在网页两侧,形似对联,且不依赖Flash技术,...
在网页设计中,对联广告(也称为横幅广告或侧边栏广告)是一种常见的广告形式,它们通常出现在页面的两侧,为网站提供收入来源。本文将深入探讨如何实现一个可单独关闭的对联广告,这是一项提升用户体验的重要功能。...
1. **布局与尺寸**:网页对联广告通常位于页面的顶部或底部,宽度与浏览器窗口匹配,高度则根据内容调整,保持简洁而不失吸引力。这样可以确保广告在不同分辨率的屏幕上都能良好显示。 2. **交互性**:广告应包含一...
在这个项目中,JavaScript代码可能会根据页面的物理滚动事件,动态地更新或显示对联广告内容,确保其始终保持在用户视野内。 3. **适配性**:由于涉及前端代码,所以此代码可能考虑了多种浏览器的兼容性和不同屏幕...
标题"左右两侧可关闭的对联广告(图片非flash)"暗示了这是一个设计用于网页的广告模板,特别强调了广告是通过图片形式呈现而非传统的Flash动画。在现代网页设计中,考虑到兼容性、加载速度和用户体验,使用图片而非...
3. **可关闭对联广告代码**:这部分指的是脚本的功能之一,即允许用户或开发者关闭或隐藏页面上的对联广告。对联广告是一种常见的网络广告形式,通常出现在网页两侧。这段脚本能够控制此类广告的显示与隐藏,增强...
对联广告通常是指网页两侧显示的竖向广告。这类广告因其布局特点类似于中国传统的对联而得名。在编写这类广告的代码时,确保其符合W3C的标准是非常重要的,这有助于提高广告在不同浏览器中的显示效果,并确保其可...
对联广告,顾名思义,是将广告设计成类似对联的形式,通常由两个或多个相对应的部分组成,横跨网页两侧,呈现一种对称的视觉效果。这种设计方式可以使广告与网页内容融合得更自然,同时通过较大的展示面积吸引用户...
- **布局设计**:对联广告通常被放置在页面的左右两侧,使用CSS定位技术(如`position: fixed`或`absolute`)使其固定在屏幕两侧。同时,需确保广告的大小适中,不影响主要内容的可读性。 - **动画效果**:为了...
1. 对联广告:这种广告形式通常出现在页面两侧,可以带有关闭按钮,提供用户选择是否查看。 2. 广告自动翻滚:这种代码让大幅图片广告能够自动滚动展示,增加视觉效果,吸引用户关注。 3. 横向滚动图片:广告图片...
在JavaScript编程语言中,"可关闭的对联广告"是一种常见的网页交互元素,它通常出现在网页两侧,以横幅或对联的形式展示广告内容,并且允许用户通过点击一个明显的关闭按钮来移除广告,提高用户体验。本文将深入探讨...
例如,以下是一个简单的JavaScript代码示例,用于实现对联广告的关闭功能: ```html 这里是广告内容... 关闭广告 document.getElementById('closeAd').addEventListener('click', function() { var ad...