<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
#float{ z-index:2px; position:absolute; left:50px; top:100px; width:117px; height:150px;}
#close{ z-index:2px; position:absolute; left:154px; top:100px; width:13px; height:13px;}
</style>
</head>
<body>
<div id="main"><img src="images/contentpic.jpg"/></div>
<div id="float"><img src="images/advpic.jpg" /></div>
<div id="close"><img src="images/close.jpg" /></div>
<script type="text/javascript">
var divFloat,divClose,divFloatLeft,divCloseLeft,floatTop;
//获取漂浮广告对象
divFloat = document.getElementById("float");
//获取漂浮广告关闭按钮对象
divClose = document.getElementById("close");
//初始化数据
function init(){
//支持IE浏览器
if(divFloat.currentStyle){
//获取漂浮广告左边距离
divFloatLeft = parseInt(divFloat.currentStyle.left);
//获取漂浮广告上边距离
floatTop = parseInt(divFloat.currentStyle.top);
//支持IE浏览器
}else{
//获取漂浮广告左边距离
divFloatLeft = parseInt(getComputedStyle(divFloat,null).left);
//获取漂浮广告上边距离
floatTop = parseInt(getComputedStyle(divFloat,null).top);
}
//获取漂浮广告按钮左边距离
divCloseLeft = divFloatLeft + 117 - 13;
}
//滚动事件
function scrollEvent(){
var scrollL,scrolT;
//支持IE，FireFox
if(document.documentElement.scrollTop>0 || document.documentElement.scrollLeft>0){
//获取左边滚动距离
scrollL = document.documentElement.scrollLeft;
//获取顶部流动距离
scrollT = document.documentElement.scrollTop;
//支持360，Google
}else{
//获取左边滚动距离
scrollL = document.body.scrollLeft;
//获取顶部流动距离
scrollT = document.body.scrollTop;
}
//改变广告图片和关闭图片的位置
divFloat.style.left = divFloatLeft + scrollL +"px";
divFloat.style.top = floatTop + scrollT +"px";
divClose.style.left = divCloseLeft + scrollL +"px";
divClose.style.top = floatTop + scrollT +"px";
}
window.onscroll = scrollEvent;
window.onload = function(){
init();
//关闭广告按钮事件
divClose.onclick = function(){
divFloat.style.display = "none";
divClose.style.display = "none";
}
}
</script>
</body>
</html>
效果图：
个人E-mail：chaoyi77@163.com
相关推荐
在JavaScript（JS）中，制作一个带关闭按钮的滚动广告涉及到多个知识点，这些知识点包括DOM操作、事件处理、定时器以及CSS样式应用。下面将详细解释这些内容。 首先，我们需要理解DOM（Document Object Model），它...
JavaScript弹性滚动广告是一种常见的网页交互元素，用于在页面滚动时展示广告，并且提供关闭功能，让用户可以选择不看广告。这种技术结合了JavaScript和jQuery库，提供了动态、灵活的效果，同时尊重用户体验。 首先...
在网页设计中，图片滚动效果通常用于展示广告、产品图册或者新闻轮播等，而添加关闭按钮则能提供更好的用户体验，让用户自行决定是否继续观看。这种功能主要依赖JavaScript编程语言来实现，因为它提供了丰富的DOM...
例如，以下代码可以创建一个简单的滚动广告条并添加关闭按钮的事件监听器： ```javascript document.addEventListener('DOMContentLoaded', function() { var adScroll = document.getElementById('ad-scroll'); ...
在IT行业中，"带关闭按钮的双对联广告"是一种常见的网页设计元素，它涉及到用户体验、前端开发以及广告展示技术等多个方面。双对联广告通常指的是在网页两侧或某个特定区域展示的两个并排的广告条幅，这种形式能够...
### 带关闭按钮的网页漂浮广告代码分析 #### 一、背景介绍 在现代网页设计中，广告是网站盈利的重要方式之一。为了提高广告的可见度与互动性，许多网站采用各种技术手段实现广告的展示效果。其中，带有关闭按钮的...
这个特效代码旨在提供一种在手机网页底部展示滚动广告的方式，既能吸引用户，又不会过度干扰其浏览体验。 首先，让我们了解这个特效的基本功能。它是一种JavaScript实现的广告滚动效果，将广告图片设置在页面底部，...
关闭按钮是用户体验设计的重要组成部分，尤其在广告中。用户有时可能不希望看到广告，或者想要专注于主要内容。为此，这个对联广告添加了一个“关闭”按钮，让用户可以选择性地隐藏广告。实现这一功能通常需要在...
制作浮动的广告图片，包含关闭按钮。window.onscroll,pixelTop,doucument.body.scrollTop
【标题】"jQuery网站右下角悬浮广告带关闭按钮"是一种常见的网页交互设计，它利用JavaScript库jQuery实现了一种在网站右下角显示的广告条，该广告条带有可点击的关闭按钮，并且具备自动消失的功能，以提供良好的用户...
"jquery弹出层带关闭按钮"这个主题涉及到的是使用jQuery来创建具有关闭功能的弹出窗口，这在网页交互设计中是非常常见的需求。下面将详细解释如何实现这一功能。 首先，我们需要理解什么是弹出层（Popup Layer）。...
本主题聚焦于使用JavaScript（JS）原生代码来创建一个手机网页上的居中显示广告，同时具备关闭按钮功能。以下将详细讲解如何实现这个功能。 首先，我们需要在HTML页面中创建广告的基本结构。一个简单的广告元素可以...
"带关闭的飘浮广告条"特指具有关闭按钮的这类广告，用户点击关闭按钮后，广告会从屏幕上消失，提供更好的用户体验。 【描述】：“带关闭按键的飘浮广告条在网站左右的，找了好久才找到的” 这描述暗示了飘浮广告条...
在IT行业中，无限滚动广告栏是一种常见的网页或应用程序设计元素，它允许用户在不翻页的情况下查看连续的广告内容。这种设计模式提升了用户体验，因为用户可以无缝浏览广告，而无需频繁点击下一页按钮。"完美实现...
该资源是一个基于jQuery实现的网站右下角广告窗口的源代码，主要特点是具有随机展示不同样式以及带有关闭按钮的悬浮特效。以下是对这个技术实现的详细解析： 首先，jQuery是一个广泛使用的JavaScript库，它简化了...
本实例大全聚焦于一种常见的特效——滚动广告，通过JavaScript技术实现，这在网页设计中是不可或缺的一部分，尤其对于商业网站和资讯平台，能够有效地展示广告信息并吸引用户的注意力。 滚动广告是一种自动在页面上...
这将帮助我们更好地理解代码的工作原理，包括广告如何显示、如何随着页面滚动而移动，以及关闭按钮如何触发广告的隐藏。 在"08"文件中，可能包含了以下关键部分： 1. **广告容器**：HTML代码中定义了一个容器来...
提供关闭按钮，让用户可以选择隐藏广告；或者采用智能显示机制，仅在用户停留一段时间后才出现。 在ASUpAdvertisementArticle-master这个项目中，我们可以预见到源代码包含了实现这一功能的完整结构，包括HTML布局...
在程序运行时，需要读取这个文件的内容并显示在滚动广告中，这就涉及到了文件操作的知识，如打开、读取和关闭文件。 8. **用户界面设计**：为了让广告更吸引人，开发者可能会使用易语言提供的各种控件来设计用户...