实现随页面滚动的层(最简单效果)

最新推荐文章于 2020-08-05 17:01:47 发布
最新推荐文章于 2020-08-05 17:01:47 发布
阅读量109 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/yangbo108/archive/2007/08/29/874880.html
版权

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>

<body>
   <div id="sorollDiv1" style="width:30px; height:50px; background-color:#0000ff; right:10px;position:absolute;top:120px;"></div>
 <script type="text/javascript">
 var lastScrollY=0;
 function heartBeat(){
  diffY=document.documentElement.scrollTop;
  percent=0.1*(diffY-lastScrollY);
  if(percent>0)percent=Math.ceil(percent);
  else percent=Math.floor(percent);
  document.getElementById("sorollDiv1").style.top=parseInt(document.getElementById("sorollDiv1").style.top)+percent+"px";
  lastScrollY=lastScrollY+percent;
 }
 window.setInterval("heartBeat()",1);
</script>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>

转载于:https://www.cnblogs.com/yangbo108/archive/2007/08/29/874880.html

weixin_30271335
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面添加水印
tanwenfang的博客
09-24 2939
参考：https://blog.csdn.net/zhanglu1236789/article/details/79105442 另外，若想要水印不随着页面的滚动而移动，我们可以把下面这个地方改为fixed：
svg实现的炫酷滚动菜单，随轨迹跟随
03-23
svg实现的炫酷滚动菜单，随轨迹跟随，模块化组件。可参考实现自己的svg轨道跟随模型
对联式广告栏
古月山石影的博客
06-23 536
lastScrollY = 0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY =
Excel使用数据透视图配合切片器制作动态数据图表
sddsdl的博客
08-28 3164
EXCEL中制作动态数据图表非常简单，一学就会，操作版本要求EXCEL2010版及以上。会涉及到数据透视图及切片器的使用 基础数据： 年份 材料 人工 费用 成本合计 销售额 利润 2014年 450 200 350 1000 1500 500 2015年 600 250 650 1500 2100 600 2016
css将div层固定显示在页面底部不随滚动条滚动
09-25
在网页设计中，有时我们需要创建一个元素，如一个`div`层，让它始终保持在页面的底部，即使用户滚动页面，这个元素也不会移动。这种效果通常用于返回顶部按钮、页脚信息或者侧边栏导航等。在CSS中，我们可以通过设置...
jQuery页面滚动浮动层智能定位实例代码
10-28
在网页设计中，浮动层（通常称为固定定位元素或跟随滚动元素）是一种常见的交互设计手法，它使得元素在用户滚动页面时始终保持在...这种技术广泛应用于导航栏、侧边栏广告、通知提示等需要随页面滚动而保持可见的场景。
div模块层随页面滚动遇顶固定的两种方法(js&jQuery)
10-29
我一直以为是某个div或层随屏幕滚动，遇顶则固定，离开浏览器顶部又还原这样的例子其实不少，其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的...
根据滚动条移动的多层浮动效果，实现页面广告效果。
01-06
"根据滚动条移动的多层浮动效果，实现页面广告效果"这一主题，涉及到的核心技术主要是JavaScript、CSS以及HTML，它们共同作用于网页的交互和视觉呈现。 首先，让我们谈谈HTML。HTML（HyperText Markup Language）是...
滚动效果.7z
07-31
1. **基础滚动**：这是最简单的滚动效果，用户只需在页面上上下滑动，内容就会随之滚动。在HTML中，通过设置`overflow`属性为`auto`或`scroll`，可以实现内容区域的滚动条。 2. **无限滚动**（也称作“瀑布流”或...
jquery svg_如何使用jQuery和SVG构建页面滚动进度指示器
Web design 教程小屋
07-06 376
今天，我们将研究一些技巧，这些技巧可用于显示正在阅读页面的用户的滚动进度。 出于充分的原因，这种技术正在越来越多的站点上使用。 它提供了对使用特定页面所需投资的上下文了解。 当用户滚动时，会以不同格式向他们展示当前的进度。 今天，我们将介绍两种可用于显示滚动进度的特定技术，并为您提供创建自己的工具集。 让我们开始吧！ 设定文件 首先，我们将建立一个模拟文档，该文档将用作我们的帖子页面。...
简单水印（watermark-dom）和算法水印（频域方式图片合并）实现
weixin_33720956的博客
04-17 2707
一、简单水印（watermark-dom） 阿里巴巴内网的不可见水印用的是什么算法？ 据说月饼事件截图的那位员工也被开除了？ 下面的只是简单的加一个很浅的水印，实现起来很容易。 1、看看水印的效果 随便找一个网站，比如就找掘金的个人首页， （1）F12检查模式， （2）在console里粘贴下面的代码， (function(watermark){window.watermarkdivs=[];va...
楼层滚动效果原来是这样实现的(使用jquery编写)
weixin_45070265的博客
08-05 375
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {
飘浮窗口及随滚动条滚动而滚动的层
新页小苗
06-30 497
随滚动条滚动而滚动的层的实例： &lt;HTML&gt; &lt;HEAD&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY
单边广告条随滚轮的移动往下滑
s_mike的专栏
12-22 714
lastScrollY=0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop)  diffY =document.documentElement.scrollTop; else if (document.body)  diffY =
设计无限滚动下拉加载，实践高性能页面真谛
weixin_34143774的博客
02-28 384
UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。 无限滚动加载在互联网上到处都有应用：豆瓣首页是一个，Facebook的Timeline是一个，Tweeter的话题列表也是一个。当你向下滚动，新的内容就神奇的“无中生有”了。这是一...
CSS控制DIV层滚动效果 CSS层滚动条效果
tianshibaijia
01-06 117
直接列出代码如下，有需要的自己去参考，可以控制任意 html 容器标签。 &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.or...
让一个层固定在网页的某个位置
php菜鸟技术天地
06-02 995
lastScrollY=0; function heartBeat0(){ diffY=document.body.scrollTop; percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.all.lovex
QML中ScrollView的自动滚动
热门推荐
Shado_walker的专栏
04-18 1万+
在用到QML中的ScrollView时，我们常常会需要让滚动条自动滚动到某个位置，使得某些信息滚动到可视化区域，就可以用下面的方法让其滚动： import Material 0.1 import QtQuick 2.4 import QtQuick.Layouts 1.2 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4
javascript实现全屏页面滚动效果.docx
01-13
"本文档探讨了如何使用JavaScript实现全屏页面滚动效果，通过具体的代码示例和问题解析来阐述这一技术。文档提到了JavaScript DOM操作对于理解和优化代码的重要性，并展示了两种不同状态下的滚动效果及其对应的控制...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值