Div层随滚动条移动

最新推荐文章于 2022-08-25 14:49:11 发布
最新推荐文章于 2022-08-25 14:49:11 发布
阅读量1.2w 收藏 1
点赞数
分类专栏： Web前端 文章标签： div generator html border function image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Omarix/article/details/6560305
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
window.οnscrοll=function(){
var oDiv=document.getElementById("d");
oDiv.style.top=document.body.scrollTop + 300;  //控制上下位置
oDiv.style.left = document.body.scrollLeft + 300; //控制横向位置

}
</script>
<BODY>
<div id="d" style="position:absolute;left=0;top=300;display:;border: 1px #FF00FF solid;" >
<input id="im" type="image" width=100 height=100 src="d:/My Documents/My Pictures/景色8.jpg">
</div>
<p>asdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsdasdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>
<p>asdfafsd</p>

</BODY>
</HTML>

Omarix
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div跟随水平滚动条移动
03-10
div或其他html块内容跟随滚动条移动，滚动移动时，内容跟着移动，并保持最右边
随滚动条移动的DIV层
03-17
### 随滚动条移动的DIV层：实现与解析 #### 一、概述 在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的...
div随滚动条移动
symgdwyh的专栏
03-30 1322
 var i=0, str="";while(i++"} document.write(str); var div = document.getElementsByTagName("div")[0]; var y = parseInt(div.style.top); setInterval(function(){  var cy = parseInt(div.style.top);  var dy
一个跟随滚动条移动的固定div
weixin_41053404的博客
12-28 3064
一个简单的跟随滚动条移动的效果， href="#" target="_blank">.NET Javascript jQuery C# 其他 首页 $(function () { var ie6 = document.all; var dv = $('#fixedMenu_keleyi_com'), st; dv.attr('otop',
Div滚动条移动
hhhh2012的专栏
02-18 619
设置 Happy New Year ! ! ! > this is a test! this is a test! func
div 随着滚动条移动
lieri111的专栏
04-26 1140
测试层滚动关闭<!-- var checks = 0; var GB =0; function openwindow() { checks = document.getElementById("player").style.pixelTop; GB = document.getElementById("myplay
jQuery控制div实现随滚动条滚动效果
10-22
主要介绍了jQuery控制div实现随滚动条滚动效果,对比分析了两种实现方法供大家参考选择,需要的朋友可以参考下
基于JavaScript实现div层跟随滚动条滑动
10-22
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...
层随滚动条移动
09-17
### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中，实现元素（如层）随着页面滚动条的滚动而移动的效果，可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”，但在这里提到...
div跟着滚动条移动而移动
cherry_13的博客
06-10 3620
<!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> <meta charset="UTF-8">
div随着滚动条滚动，但是到了顶部，便不随着滚动了
06-06
div随着滚动条滚动，但是到了顶部，便不随着滚动了
拖动div 内部有滚动条
10-16
拖动div 内部有滚动条
js实现网页中常见的随滚动条移动的悬浮广告栏做法
04-13
这里的scrollTop这个变量就是获取得到可视区到达页面顶部的距离 2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子的高度，然后在加上可视区到顶部的距离，这样可以实现的就是把悬浮广告停在右下角的位置 3 根据上面的分析则说明如果把可视区的高减掉盒子的高然后再除掉2，那么此时再加上可视区到顶部的距离就可以把这个盒子保始终停在页面的中间,但是这里会有一个小问题，那就是因为我们除去2运算了所以会出现小数的情况。这样就会在那个整点位置来回走。解决的方法就是把运算结果通过parseInter取整。
DIV 随着滚动条 移动
微尘的世界
12-10 109
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;HEAD&gt; ..
div跟滚动条移动
上善若水
01-24 141
[code="javascript"] function getScroll() { var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) { t = document.documentElement.scr...
HTML随滚动条移动层
交通部PC167
04-21 912
随滚动条移动层
Jquery实现div层随滚动条滚动而滚动
zhoupeng的专栏
11-06 8781
针对网页div层浮动，随滚动条滚动而移动，在各大门户网站上可以说随处可见。下面就应用系统实现div浮动实例说明： 应用系统展现内容时，由于内容过多，返回按钮放到页头或页末，对用户来说操作都不方面。这个实例就是实现div层“返回”按钮随滚动条滚动而滚动。 html代码： 返回
div 自动跟着滚动条移动
LegendHonor的博客
08-25 1309
div 自动跟着滚动条移动
随滚动条移动的动态div
zhouxueli32的博客
09-04 454
<style> .mydiv { margin-left: 200px; width: 180px; height: auto; background: #ff5555; overflow: auto; } .content { display: -webkit...
javascript 怎么创建一个div作为Html的背景 ，固定宽高，且不随滑条滚动而移动
最新发布
06-11
你可以使用 CSS 来创建一个固定宽高且不随滑条滚动而移动的背景 `div`，代码如下： ```html <style> .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('your-image-url') no-repeat center center fixed; background-size: cover; z-index: -1; } </style> <div class="background"></div> ``` 在上面的代码中，我们创建了一个名为 `background` 的 `div`，将其 `position` 设置为 `fixed`，这样它就能固定在页面上不随滑条滚动而移动了。接着，我们将它的宽度和高度都设置为 `100%`，这样它就能占满整个页面。最后，我们设置了背景图片的 `url`，并且将其 `background-size` 设置为 `cover`，这样它就能自适应并铺满整个 `div`。 你只需要将上面的代码复制到你的 HTML 文件中即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值