`
lancijk
  • 浏览: 391589 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

DIV+CSS浮动广告

    博客分类:
  • JS
阅读更多
1:首先讲一下如何取得坐标的一些小问题
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
    top=document.body.scrollTop;
    left=document.body.scrollleft;   
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}
具体是一个小列子
	<script>
var 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*/}    
         
 percent=.1*(diffY-lastScrollY);     
 if(percent>0)percent=Math.ceil(percent);     
 else percent=Math.floor(percent);     
 document.getElementById("adleft").style.top=parseInt(document.getElementById("adleft").style.top)+percent+"px";    
 document.getElementById("adright").style.top=parseInt(document.getElementById("adright").style.top)+percent+"px";    
 lastScrollY=lastScrollY+percent;     
 }    
  
 function adhide(names){document.getElementById(names).style.display='none';}   
 function screencl(names){if(screen.width<=800){adhide(names);}}   
 zcode="<div id='adleft' class='DlLeft' style='top:100px;'><div class='DlBorder'><!--左联 --></div><div align='right' class='Close'>  <img src='../images/close.gif' title='关闭 ' onclick=adhide('adleft') style='cursor:pointer'></div></div>";   
 ycode="<div id='adright' class='DlRight' style='top:100px;'><div style='DlBorder'><!--右联--></div><div align='left' class='Close'>  <img src='../images/close.gif' title='关闭 ' onclick=adhide('adright') style='cursor:pointer'></div></div>";   
 document.write(zcode);   
 document.write(ycode);   
 screencl('adleft');   
 screencl('adright');   
 window.setInterval("heartBeat()",1);   

</script>


DIV的定义是这样

.DlLeft{
	left:10px; 
	position: absolute;
	z-index:1;	
	background:#fff;
	}
.DlBorder{
	overflow:auto;
	border:#999 solid 1px;
}

.Close{
	overflow:auto;
	background-color:#FFFFFF;
	font-size:0px;
}
.DlRight{
	right:10px;
	position: absolute;
	background:#fff;
	z-index:1;
}


1
0
分享到:
评论

相关推荐

    简单设计DIV+CSS模板

    CSS文件通常包括颜色、字体、边距、背景、浮动、定位等属性设置,以达到理想的布局效果。 "images"文件夹则包含网页中使用的图像资源。在Div+CSS布局中,图像不仅可以作为内容的一部分,还可以作为背景图,通过CSS...

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    DIV+CSS入门教程

    3. 学习并掌握CSS选择器、盒模型、定位、浮动等核心概念,以便灵活布局。 4. 了解和实践响应式设计,使页面能在不同设备上良好展示。 5. 代码编写应遵循语义化原则,提高可读性和可维护性。 总之,"Div+CSS"入门...

    div+csspdf版

    在IT行业中,网页设计是至关重要的一个领域,而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题,包含了两个关键文件:`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...

    div+css页面布局,新手入门教材,2天学会div+css

    通过设置`div`的浮动(如`float:left`或`right`)可以实现多列布局。 7. **浏览器兼容性**:不同浏览器可能对CSS的解析存在差异,尤其是IE浏览器。因此,需要处理浏览器特有的显示问题,如使用条件注释或专门的CSS ...

    DIV+CSS教程—十天学会web标准div+css标准之路WORD版

    《DIV+CSS教程—十天学会web标准div+css标准之路》是一份全面且深入的教程,旨在帮助初学者在短时间内掌握网页布局的核心技术——DIV和CSS。此教程以Word文档的形式提供,易于阅读和打印,适合自学或者作为教学参考...

    DIV+CSS案列源代码03

    通过研究这个案例,开发者可以学习到如何使用`DIV+CSS`进行网页布局,理解盒模型(content, padding, border, margin),掌握浮动布局、定位(static, relative, absolute, fixed)以及Flexbox或Grid布局等技巧。...

    div+css案例,网页设计

    1. **基本布局**:使用Div实现网格系统,例如两栏或三栏布局,展示如何通过CSS浮动(float)和清除(clear)控制元素的位置。 2. **定位**:通过CSS的position属性(static、relative、absolute、fixed)来精确控制...

    DIV+CSS美化网站实用教程

    本教程《DIVCSS布局教程.pdf》将详细讲解这些概念,并通过实例指导如何在实践中应用,从而提升你的网站美化技能。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,为你的网页设计之路增添更多色彩和可能性。

    一个(DIV+CSS)网站

    【标题】:“一个(DIV+CSS)网站” 【描述】:“帮一个公司做的一个静态网站,完全采用DIV+css布局” 这个项目是一个基于HTML和CSS技术构建的静态网站,主要利用了DIV+CSS的设计模式来实现页面的结构与样式分离。...

    DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf

    DIV+CSS网页布局教程 DIV+CSS网页布局技巧如何实现是当前网页设计中非常重要的一个环节。DIV+CSS工具的使用非常广泛,能够优化网站的布局和标签、做出精美的页面,并且有助于搜索引擎抓取网页内容、提高网站排名。...

    DIV+CSS案例(21-30)

    在这个案例中,`DIV+CSS`被用来创建清晰的板块划分,如美食图片展示区、描述区和评论区,通过浮动(float)、定位(positioning)和盒模型(box model)来实现元素的排列和间距。 其次,"交通运输网"可能是一个展示...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    JS QQ客服左侧或者右侧DIV+CSS浮动

    "JS QQ客服左侧或者右侧DIV+CSS浮动"是一个实现此类功能的解决方案,它能够让QQ客服窗口在页面的左侧或右侧保持固定,随着用户滚动页面而上下移动,始终保持在视线范围内。这种设计既不干扰用户浏览主要内容,又能...

    DIV+CSS布局:CSS浮动float属性详解

    ### DIV+CSS布局:深入解析CSS浮动float属性 在现代网页设计中,`DIV+CSS`布局已经成为构建网站的标准方式,取代了传统的表格布局方法。其中,`CSS`的`float`属性扮演着至关重要的角色,它允许元素从文档流中“浮动...

    Div+Css特效及JavaScript网页特效实例.rar

    在"div特效.rar"文件中,可能包含了一系列使用Div+CSS创建的特效实例,比如:浮动布局、定位技巧、瀑布流布局、响应式导航栏、下拉菜单等。学习这些实例,开发者能深入理解Div+CSS的灵活性和强大性,提高网页设计的...

    专业的div+css代码大全

    除了以上介绍的属性,`div+css`还包括许多其他重要概念,如浮动(`float`)、定位(`position`)、盒模型(`box model`)、响应式设计(`responsive design`)等。理解并熟练运用这些概念,可以帮助开发者创建出既...

    div+css经典案例源码

    《div+css经典案例源码解析》 在网页设计领域,div+css是构建网页布局的基础,也是现代网页设计的标准。本资源集合提供了一系列div+css的经典案例源码,旨在帮助初学者深入理解和掌握css的各种用法,提升网页制作...

Global site tag (gtag.js) - Google Analytics