随浏览器滚动条移动的DIV层的代码

最新推荐文章于 2023-02-22 09:51:22 发布
最新推荐文章于 2023-02-22 09:51:22 发布
阅读量1.8k 收藏
点赞数
分类专栏： javascript 文章标签： div 浏览器 javascript function class xhtml

<!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>随滚动条移动的层 - 5217.cn</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="flasher">
<META NAME="homepage" CONTENT="www.5217.cn">
</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.οnscrοll=scall;
window.οnresize=scall;
window.οnlοad=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>

wangsky2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS-案例-div自动右下左上移动（随机变色）
Joker.M的博客
06-05 825
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{margin:0;padding:0;} div{ ...
使用CSS样式position:fixed水平滚动的方法
12-09
有时候我们希望当出现水平滚动条时，div块可以随滚动条左右移动，实现垂直固定定位（fixed），水平相对定位（absolute）。本文提供一个解决方法，附jquery扩展源码。 本文的实现方式是使用js来控制div块随滚动条水平...
如何制作随滚动条滚动的DIV
恭喜姐姐
10-07 238
需要做页面的快捷菜单，原则上想做成在第一屏初始在一个位置，当滚动条向下拉时，进入第二屏往下该DIV层自动滚动至屏幕相对的初始位置。在网上查找了相关资料，仅勉强可用，摘抄如下。随滚动条移动的DIV层(正中、左上、左下、右上、右下) &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/...
js控制div层的显示跟随滚动条滚动而滚动
永恒の_☆
06-01 8375
js代码如下： 无标题页 .header_wrap { background: none repeat scroll 0 0 #488FCE; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); display: block; left: 0; position: fixed; top: 0
js 随滚动条移动的弹出层
记录点滴.......
03-10 207
[code="html"] div #topbar{ position:absolute; border-right: #455690 3px solid; border-top: #455690 3px solid; border-left: #455690 3px solid; border-bottom: #455690 3px solid;...
用html+js实现文字随着滚动条滚动换位置特效【建议收藏】
小魏快起床的博客
02-22 546
这里给大家用案例实现一个文字滚动的特效，学了之后麻麻再也不用担心我不会做文字滚动了；先看效果，然后代码自取，分享不易，建议铁子们留个三连。
div的position属性
11-23
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动...
meteor-jquery-nicescroll:感谢犬夜叉。 Nicescroll 是一个 jquery 插件，用于具有非常相似的 iosmobile 风格的漂亮的可定制滚动条。 它支持 DIV、IFrame 和文档页面（正文）滚动条。 兼容 Firefox 4+、Chrome 5+、Safari 4+ (winmac)、Opera 10+、IE 6+（所有 A 级浏览器）。 与 iOS 设备兼容，如 iPad、Android、黑莓、Windows Phone 以及许多移动和触摸设备
06-16
它支持 DIV、IFrame 和文档页面（正文）滚动条。 兼容 Firefox 4+、Chrome 5+、Safari 4+ (win/mac)、Opera 10+、IE 6+（所有 A 级浏览器）。 与 iOS 设备兼容，如 iPad、Android、黑莓、Windows Phone 以及许多...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
带关闭按钮jquery+div消息弹出层代码例子 14.推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
js 特效 html 特效 滚动条的隐藏显示
06-14
js 特效 html 特效 滚动条的隐藏显示 js 特效 html 特效 滚动条的隐藏显示
JS html5实现跟随鼠标移动而散开的粒子效果.zip
07-05
JS html5实现跟随鼠标移动而散开的粒子效果
div随着屏幕滚动而滚动
zhangchb的博客
03-15 8596
div随着屏幕滚动而滚动 &lt;script type="text/javascript"&gt;     $(document).ready(function () {         var menuYloc = $("#rightmenu").offset().top; //此ID为随着屏幕滚动div的ID         $(window)....
网页中的DIV层随着页面移动而移动
树欲静而风不止
08-29 2280
<div id="WaitLst" class="col-lg-3 col-md-3 col-sm-4 sidebar"> <div class="sidebar-box category-box white" style="opacity: 1;"> <h3>购买清单</h3> <ul> <li><a>品牌：{dede:field.brand/}</a></li> ...
如何设置跟随滚动条一起滚动的div
热门推荐
flygoa的专栏
06-17 3万+
原理 使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。 实例源码 .mainBox{ margin:0px 10px; width:400px; height:400px; position:relative
html div跟随页面滚动条滚动,javascript – 当我向下滚动页面时,如何让div跟随我？...
weixin_32285357的博客
06-03 1395
您可以在窗口对象上挂钩scroll事件.处理事件时,请查看窗口/文档的垂直滚动位置(有关如何操作,请参阅SO上的this answer).对div使用绝对定位,并根据需要将其顶部更新为坐标.FWIW,我会非常小心这样做.通常当用户滚动时,这是因为他们想要查看与页面上的内容不同的内容.就个人而言,我讨厌在网页上跟随我的盒子. :-)但这并不意味着有时没有充分的理由这样做.非常基本的例子(live c...
js实现随滚动条滚动div位置动态变化
qq_35997468的博客
06-10 1万+
js实现随滚动条滚动，div位置动态变化，使div不会因为滚动条的下滑而导致div被上部边界覆盖。
墨刀实现局部滚动条
xdh19940602的博客
10-27 1万+
1、场景1: 制作pc端产品时，实现局部滚动条效果，以数据列表为例 方法：使用墨刀的“动态组件”，编辑组件状态，将列表的内容填充超过未编辑时组件的大小 未编辑前，“动态组件”状态： 点击“动态组件”编辑时，内部状态： 1）注意编辑状态时，需要把内部状态的虚线拉到想展示数据的边界，即虚线要框上所有要展示的数据 2）编辑组件状态时，一般会默认两个组件状态，需要注意，当我们不需要其他组件状态时，仍然不能删除该组件的第二个状态，否则交互无效，如下图所示：（状态2我这里是复制了状态...
前端面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式
qq_46582421的博客
02-19 871
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式： </title> <style type="text/css"> html,body{margin:0px;width:100%;} #left,#right{widt
如何把div放到浏览器最底部
最新发布
05-27
可以使用如下的 CSS 样式来实现将 div 放到浏览器最底部： ```css div { position: fixed; bottom: 0; } ``` 此样式将 div 元素的定位方式设置为固定定位（position: fixed），并将其底部与父元素底部对齐（bottom: 0）。这样就可以将该 div 元素放置在浏览器窗口的底部，无论滚动条如何移动，该元素都将保持在底部位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值