随滚动条移动的层

最新推荐文章于 2018-08-27 14:06:11 发布
最新推荐文章于 2018-08-27 14:06:11 发布
阅读量1k 收藏
点赞数
分类专栏： DHTML 文章标签： javascript function div class html border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<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: 240; height:90" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2
document.getElementById("Javascript.Div1").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2;
}
</SCRIPT>


<div id="Javascript.Div2" class="div" style="width: 240; height:90;" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=document.body.scrollTop
document.getElementById("Javascript.Div2").style.left=document.body.scrollLeft;
}
</SCRIPT>

<div id="Javascript.Div3" class="div" style="width: 240; height:90;" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div3").offsetHeight;
document.getElementById("Javascript.Div3").style.left=document.body.scrollLeft;
}
</SCRIPT>

<div id="Javascript.Div4" class="div" style="width: 240; height:90;" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=document.body.scrollTop;
document.getElementById("Javascript.Div4").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div4").offsetWidth;
}
</SCRIPT>

<div id="Javascript.Div5" class="div" style="width: 240; height:90;" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div5").offsetHeight;
document.getElementById("Javascript.Div5").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div5").offsetWidth;;
}
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.οnscrοll=scall;
window.οnresize=scall;
window.οnlοad=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0; left: 0; width: 10000; height: 4000;"></div>
</BODY>
</HTML>
szyanger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML图片随意浮动广告效果代码
03-30
我也是在学习的过程在网上找的 找了半天才找到 希望对你们有用
Js浮动广告效果实现
xiaozhen0610的博客
07-13 3229
第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码，很不错，代码精简，不过一次只有漂一个，复制就能用了。希望站长朋友喜欢。 <html> <head> <title>漂浮广告</title> <body> <div id="codefans_net" style="position:absolute"> <!--链接地址--><a href="#" target="_blank">
Js广告_全屏漂浮广告
weixin_33804990的博客
10-11 246
1 &lt;!DOCTYPE HTML&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 5 &lt;title&gt;Js广告_全屏漂浮广告&lt
漂浮广告插件网页特效
11-10
漂浮广告插件网页特效
左右两侧上下浮动图片代码
dongzhen007的专栏
02-26 1073
var delta=0.15var collection;function floaters() {this.items = [];this.addItem = function(id,x,y,content){document.write(+content+);var newItem = {};newItem.object = document.getElementById(id);
随滚动条移动的层特效代码
03-20
标题中的“随滚动条移动的层特效代码”指的是在网页设计中实现的一种动态效果，它允许页面元素（通常称为“层”或div）随着用户滚动页面时同步移动。这种效果常用于创建各种视觉吸引人的交互体验，比如固定导航栏、...
层随滚动条移动
09-17
层随滚动条滚动，兼容火狐，谷歌,IE 7 8都可以 9效果稍差
随滚动条移动的DIV层
03-17
随滚动条移动的DIV层
简易的jquery层随滚动条移动
06-07
本教程将详细讲解如何使用jQuery实现一个简单的层（div）随滚动条移动的效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
随滚动条移动的层.rar
07-05
在网页设计中，"随滚动条移动的层"是一种常见的JavaScript特效，主要用于创建与页面滚动同步的浮动元素，比如侧边栏导航、广告横幅等。这种特效可以使用户在浏览页面时始终保持某些重要信息在视窗可见范围内，提高...
浮动广告效果
08-25
用script+html技术,实现浮动广告效果。
jquery右侧浮动广告,随滚动条上下滚动,效果很好哦.
09-18
jquery右侧浮动广告,随滚动条上下滚动,效果很好哦.
jquery随滚动条移动的菜单效果
01-10
本人花了一上午的时间，终于测试通过，好东西大家分享，虽然分要的比较多，但绝对值，留着以后使用。效果演示地址： http://www.shoppinghelps.com/sale.aspx
js漂浮广告
天道酬勤
09-19 504
js漂浮广告 [code="html"] 漂浮广告 var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("codefans_net") function float() { ...
[javascript]学习总结——浮动广告特效制作
逝者如斯夫
05-17 973
左右两边浮动广告特效代码
fastboot
09-06 817
类似新浪首页两边漂浮的广告图片，随滚动条上下移动，兼容1024和768窗口区域内 -->    var delta=0.15    var collection;    function floaters() {        this.items    = [];        this.addItem    = function(id,x,y,content)             
超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层
热门推荐
weixin_42350070的博客
08-27 2万+
简单的漂浮广告，在网页可视区域飘动   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript&
精确到时分的日期、时间选择控件----------!
wwmm123456的专栏
02-10 423
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;网页特效-时间特效-精确到分钟的时间控件&lt;/title&gt; &lt;meta http-equiv="content-type" content=&q
使用函数及游标实现SQL多行转一列
wwmm123456的专栏
12-23 171
分别使用函数及游标实现SQL多行转一列 有时候在一些系统中我们需要用SQL语句将一对多关系表中的数据以每条记录一行的形式进行显示。本文分别采用函数及游标的方法来实现该功能。 示例表描述如下 一张用户表及文档表 现在想实现如下功能，查询出每个用户及其对应的文档名称的综合，如下结果 userID                            userName        ...
TDBGRIDEH如何固定行焦点不随滚动条移动
最新发布
06-08
可以通过设置 TDBGrid 的 Options 属性来实现固定行焦点不随滚动条移动。 具体来说，需要将 Options 属性中的 dgRowSelect 和 dgAlwaysShowSelection 两个选项都设置为 True。然后再在 TDBGrid 组件的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值