可单独关闭的对联广告（网页设计）资源-CSDN文库

共3个文件

swf：2个

htm：1个

单独关闭的对联广告

网页设计

Javascript

4星 · 超过85%的资源需积分: 9 192 浏览量 2009-08-01 00:33:38 上传评论收藏 47KB RAR 举报

在网页设计中，对联广告（也称为横幅广告或侧边栏广告）是一种常见的广告形式，它们通常出现在页面的两侧，为网站提供收入来源。本文将深入探讨如何实现一个可单独关闭的对联广告，这是一项提升用户体验的重要功能。我们将主要关注JavaScript技术在其中的应用，同时也会涉及到网页设计的基本概念。我们要理解什么是JavaScript。JavaScript是一种轻量级的解释型编程语言，主要用于客户端的网页开发，它可以动态地改变HTML内容、操作DOM（文档对象模型）以及处理用户交互。在这个场景下，JavaScript将用于创建对联广告的显示与关闭逻辑。实现可单独关闭的对联广告主要包括以下几个步骤： 1. **创建广告元素**：在HTML中，我们需定义广告的容器，通常是一个div元素，包含广告内容和关闭按钮。例如： ```html <div id="sidebar-ad">  <a href="ad_link">广告文字</a>  <button id="close-ad">关闭</button> </div> ``` 2. **CSS样式**：我们需要通过CSS来控制广告的位置（如左侧或右侧）和样式。例如，可以设置广告div的浮动和宽度： ```css #sidebar-ad { float: right; /* 或者 left */ width: 300px; /* 其他样式如背景色、边框等 */ } ``` 3. **JavaScript逻辑**：接下来，我们利用JavaScript来实现点击关闭按钮隐藏广告的功能。这通常涉及到事件监听和元素的显示/隐藏操作。以下是一个简单的示例： ```javascript document.getElementById('close-ad').addEventListener('click', function() { var adElement = document.getElementById('sidebar-ad'); adElement.style.display = 'none'; // 隐藏广告 }); ``` 当用户点击“关闭”按钮时，这段代码会使得广告元素的`display`属性变为`none`，从而让广告消失。 4. **恢复显示**：为了提供用户再次展示广告的选择，我们可以添加一个复选框或链接，让用户选择是否显示广告。这需要更复杂的逻辑，可能涉及cookies或本地存储来记住用户的偏好。 5. **兼容性考虑**：确保你的JavaScript代码在各种浏览器上都能正常工作是非常重要的。使用像jQuery这样的库可以帮助简化跨浏览器的兼容性问题。 6. **性能优化**：考虑到用户体验，应尽量减少JavaScript对页面加载的影响。可以使用异步加载广告，或者将JavaScript代码放在`<body>`标签底部，以便在页面主要内容加载完成后执行。通过以上步骤，我们就可以在JSP或ASP网页中实现一个可单独关闭的对联广告。这种功能不仅允许用户自定义其浏览体验，而且对网页设计师来说，也是优化网页布局和提高用户满意度的一个重要工具。在实际开发中，可能还需要根据具体需求进行调整和扩展，例如加入动画效果、广告轮播等功能，以增强广告的吸引力。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （3个子文件）

可单独关闭的对联广告

flash

4.swf 22KB

3.swf 22KB

index.htm 3KB

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>符合web标准且可单独关闭的对联广告-68design</title> <style type="text/css">  </style> </head> <body> <div align="center"><br /><br /> </p> <p>注：此代码仅供学习交流，请勿用于商业用途。</p> </div> <SCRIPT language="JavaScript"> lastScrollY = 0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/} //alert(diffY); percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px"; document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; //alert(lastScrollY); } //下面这段删除后，对联将不跟随屏幕而移动。 window.setInterval("heartBeat()",1); //--> //关闭按钮 function close_left1(){ left1.style.visibility='hidden'; } function close_right1(){ right1.style.visibility='hidden'; } //显示样式 document.writeln("<style type=\"text\/css\">"); document.writeln("#leftDiv,#rightDiv{width:100px;height:100px;background-color:#fff;position:absolute;}"); document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}"); document.writeln("<\/style>"); //以下为主要内容 document.writeln("<div id=\"leftDiv\" style=\"top:40px;left:5px\">"); //------左侧各块开始 //---L1 document.writeln("<div id=\"left1\" class=\"itemFloat\">"); document.writeln("<embed src=flash/3.swf width=100 height=300></embed>"); document.writeln("<br><a href=\"javascript:close_left1();\" title=\"关闭上面的广告\">×<\/a><br><br><br><br>"); document.writeln("<\/div>"); //---L2 //已经省掉 //------左侧各块结束 document.writeln("<\/div>"); document.writeln("<div id=\"rightDiv\" style=\"top:40px;right:5px\">"); //------右侧各块结束 //---R1 document.writeln("<div id=\"right1\" class=\"itemFloat\">"); document.writeln("<embed src=flash/4.swf width=100 height=300></embed>"); document.writeln("<br><a href=\"javascript:close_right1();\" title=\"关闭上面的广告\">×<\/a><br><br><br><br>"); document.writeln("<\/div>"); //---R2 //已经省掉 //------右侧各块结束 document.writeln("<\/div>"); </SCRIPT> </body> </html>

评论收藏

内容反馈