- 浏览: 1650536 次
- 性别:
-
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
<!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>随滚动条移动的层 - 51windows.Net</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.51windows.net
">
</HEAD>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>
<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>
<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>
发表评论
-
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 709用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 776WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 746一. 简介 作为 Firefox 的插件， T ... -
图片和文字放一起，不能居中的解决方法
2009-07-29 14:47 951<td align="center" ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 747解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
掌控上传进度的AJAX Upload（转贴）
2009-08-05 17:59 716掌控上传进度的AJAX Uploa ... -
深入浅出URL编码
2009-08-11 19:58 642版权声明：如有转载请求，请注明出处： http://blog ... -
Javascript跨域访问解决方案
2009-08-11 20:11 633由于安全方面的考虑，Javascript被限制了跨域访问的能力 ... -
不唐突的JavaScript的七条准则(转载)
2009-08-12 13:18 634经过多年的开发、教学 ... -
浅谈Javascript中的事件流和事件绑定
2009-08-13 16:31 792事件流 浏览器中的事 ... -
JavaScript继承详解（二）
2009-08-17 17:04 624转自：http://www.cnblogs.com/sansh ... -
JavaScript继承详解（一）
2009-08-17 17:04 697转自：http://www.cnblogs.com/sansh ... -
javascript实用技巧--数组.
2009-08-17 17:08 662数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来，免得 ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 585尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
常见的JavaScript错误
2009-08-17 17:19 737作者: Richardy, 出处:IT ... -
JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
2009-08-17 17:19 662网页可见区域宽：document.body.clientWid ... -
Javascript的Defer属性
2009-08-17 17:48 712Script中的Defer属性 ... -
最佳的"addEvent"是怎样诞生的
2009-08-18 13:47 642IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
值得推荐的事件捕获函数AddEvent()
2009-08-18 13:56 7751， 下面是JQuery之父推荐的添加移除事件方法。 ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 599Absolute ，CSS 中的写法是：positio ...
相关推荐
"Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验。 首先，...
在本项目中，我们主要探讨的是如何利用CSS3和HTML5技术实现一个全屏焦点图片展示效果，其中图片能够随着鼠标的移动而平滑地移动，同时无滚动条设计使得用户体验更加流畅。以下是对这个主题的详细解释： 一、全屏...
这种实现通过编程的方式来处理 IE6 下跟随滚动条移动的问题：它利用了 hack 写法 `_position:absolute;` 在 onscroll 事件中设置目标的位置；而在 IE6 以上版本或者其它 Firefox, Chrome, Safari, Opera 浏览器下，...
6. **腾讯QQ网页在线客服，随网页滚动条上下移动的效果**：这是典型的固定定位（fixed positioning）应用，通过CSS确保元素始终在屏幕的特定位置，即使用户滚动页面也不受影响。此效果可以提高在线客服的可见性和...
标题中的“随滚动条移动的层特效代码”指的是在网页设计中实现的一种动态效果，它允许页面元素（通常称为“层”或div）随着用户滚动页面时同步移动。这种效果常用于创建各种视觉吸引人的交互体验，比如固定导航栏、...
"带滚动条拖动图片特效"是一个专为ASP.NET平台设计的功能，它旨在提升用户体验，让用户可以方便地通过滚动条浏览和拖动图片，营造出动态、交互式的视觉效果。这个特效特别适用于那些拥有大量图片资源，需要在一个...
在这个特效中，JS代码会监听滚动条的移动事件，并根据事件触发相应的处理函数，实现文字的平滑滚动。滚动条的自定义通常涉及到CSS（层叠样式表）的使用，通过修改滚动条的样式来改变其外观，使其与网站的整体设计...
1. **嵌套原理**：一个AP DIV的代码位于另一个AP DIV代码内部，嵌套的层会随父层移动并继承其可见性。 2. **嵌套方法**：在父层内插入新的AP DIV，可以通过拖动或使用“绘制AP Div”工具。 3. **辅助线与标尺**：...
例如，可以使用JavaScript实现网页元素的动态显示和隐藏、表单验证、时间日期显示、页面跳转、滚动条特效等。例如，`addEventListener`函数用于监听事件，`document.getElementById`用于获取HTML元素，`style`属性则...
这个功能是通过使用jQuery插件mCustomScrollbar来完成的，它为网站提供了丰富的自定义滚动条效果，并且能够适应各种设备，包括移动设备，支持响应式布局。 首先，我们需要了解jQuery库。jQuery是一个广泛使用的...
【标题】"基于jQuery实现的随滚动条增减的汽水瓶中的液体" 这个项目是利用JavaScript库jQuery来创建一个动态效果，它模拟了汽水瓶中的液体随着页面滚动条的移动而增减的视觉效果。这个效果通常用于增强用户体验，使...
3. **滚动(Scroll)**：滚动是网页元素动态移动的效果，通常由用户操作（例如，滚动条）或由JavaScript自动触发。在此特效中，滚动是自动且连续的。 4. **JavaScript(Javascript)**：JavaScript是网页开发中的核心...
2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息（利用marquee跑马灯实现） 5、最热招聘（本页内链接） 6、页面打开时，弹出广告窗口 7、二级的横向菜单，...
在这个"jQuery网页上下滚动背景变色特效.zip"压缩包中，包含了一个使用jQuery实现的网页背景颜色随滚动条移动而变化的特效。这个特效可以增强用户体验，为网站增添动态感。 首先，我们来了解一下jQuery的核心概念。...
### 腾讯QQ网页在线客服随网页滚动条上下移动的效果解析 #### 一、概述 在当前互联网时代，为了更好地提升用户体验与服务质量，许多网站都加入了在线客服系统。腾讯QQ网页在线客服作为其中的一种典型应用，通过...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...
jQuery OnePageScroll.js 是一个专为此目的而设计的插件，它允许开发者轻松实现这种“视差滚动”效果，即页面随着用户的鼠标滚动，各个部分以不同的速度移动，从而营造出深度感和动态视觉体验。 **一、插件功能与...
- 否则，每次调用该函数时，使滚动条向右移动一个像素。 4. **定时器设置与控制**: ```javascript var MyMar = setInterval(Marquee, speed3); demo.onmouseover = function () { clearInterval(MyMar) }; ...
这种特效使得信息的呈现更加直观、吸引人，通过横向布局和滚动条切换，为用户提供了良好的浏览体验。 时间轴特效的核心在于JavaScript的DOM（文档对象模型）操作，它允许开发者动态修改HTML元素和CSS样式，从而创建...
**jQuery内容区自定义滚动条插件特效代码详解** 在网页设计中，滚动条作为页面内容超出可视区域时的重要导航工具，其外观和交互性往往影响着用户体验。jQuery提供了丰富的插件来帮助开发者定制滚动条样式，使得滚动...