HTML窗体内容自动向下滚动，JAVASCRIPT实现窗体内容向下滚动。

最新推荐文章于 2021-06-03 20:29:24 发布
最新推荐文章于 2021-06-03 20:29:24 发布
阅读量1.3k 收藏
点赞数
文章标签： javascript html timer function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yymmiinngg/article/details/2005135
版权

很多论坛、博客等网站都实现了此功能，意在方便读者浏览网页，下面不妨让我们来看看是怎么实现的。

以下是完整HTML代码：

 

<html>

    <head>

       <title>双击窗体内容向下滚动</title>

 

       <SCRIPT language="JavaScript">

           var currentpos,timer;

        

           function initialize(){

            timer=setInterval("scrollwindow()",10);

           }

           function sc(){

            clearInterval(timer);

           }

           function scrollwindow(){

            currentpos=document.body.scrollTop;

            window.scroll(0,++currentpos);

            if (currentpos != document.body.scrollTop)

             sc();

           }

           document.οnmοusedοwn=sc

           document.οndblclick=initialize

        </script>

    </head>

    <body>

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

       <p>

           双击窗体内容向下滚动

    </body>

</html>

 

yymmiinngg
关注
html新闻上下自动滚动代码,Html js轻松实现 向上下左右循环滚动代码
weixin_36193418的博客
05-30 1178
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)var speed=30;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementById("colee");colee2.innerHTML=colee1.inne...
HTML网页滚动条滚动插件（匀速滚动，支持向上向下滚动）
01-10
HTML网页滚动条滚动插件（匀速滚动，支持向上向下滚动）
html中设置某个区域自动上下滚动
weixin_30922589的博客
07-14 5173
1.这是运行效果： 向上(请把鼠标移到这里) 0test 1test 2test 3test 4test 5test 6test 7test 8test 9test 10test 11test 12test 13test 14test 15test 16test 17test 18test 19test 20test 21test 2...
html向下滑动动画,CSS动画:(向下滑)slidedown效果_html/css_WEB-ITnose
weixin_35851374的博客
06-03 2039
我们依据上一篇文章的HTML代码结构,来实现一般焦点图片跳转时候的效果.HTMLCSS.outer_box {width: 100px;height: 100px;border: #bbb 5px solid;margin: 200px auto;}.inner_box {background-color: #44b549;width: 100%;height: 100%;position: re...
html 自动滚动到底部,Javascript实现DIV滚动自动滚动到底部的代码
weixin_30068505的博客
05-31 192
查询了一下相关的资料，Div没有自动滚动的属性，只能模拟鼠标的滚动来现实想要的效果。关键的部分部分在这里：div.scrollTop = div.scrollHeight;下面是具体实现的精简代码：idnameagememo000001name124memomemomemomemomemo000002name223memomemomemomemomemo000003name323memomemom...
javascript 滚动窗体 弹出窗体 自动隐藏窗体 可拖动窗体
06-19
// 当页面向下滚动超过100像素时，执行某些操作 } else { // 否则执行其他操作 } }; ``` 二、弹出窗体 弹出窗体通常用于显示警告、确认对话框或者自定义窗口。JavaScript提供了`alert()`, `prompt()`, 和`...
C/S窗体显示HTML上下移动提示
01-05
1. **HTML和JavaScript交互**：如果HTML内容包含JavaScript，可以通过JavaScript控制HTML元素的移动，比如使用`window.scrollBy(x, y)`方法来实现平滑滚动。同时，C#可以通过`WebBrowser.ObjectForScripting`属性...
javascript弹出窗体
01-29
可以通过`document.write`向弹出窗体写入HTML内容： ```javascript function openwin() { var OpenWindow = window.open("", "newwindow", "height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=...
鼠标拖拽移动子窗体的JS实现
10-26
本文将详细介绍如何使用JavaScript（特别是结合jQuery库）和CSS来实现鼠标拖拽移动子窗体的功能。 首先，构建模态子窗体的HTML结构非常简单，通常包括背景层和内容层。背景层通常用于遮罩页面，使用户能够专注于...
带时间的日期控件 自动向上或向下弹出 JS
09-01
弹出框的设计考虑了用户体验，会根据窗体可视高度自动判断是向上还是向下弹出。这是为了确保弹出框不会被浏览器的滚动条或页面其他元素遮挡，从而提高用户操作的便利性。这种智能定位功能是通过JavaScript的DOM...
自动滚屏(HTML经典用例)
09-08
更多资源请查看: http://download.csdn.net/user/njzdl
js实现页面自动滚屏效果
12-23
js实现页面自动滚屏效果，可以设置单击，双击，还可以绑定在一个元素上触发
页面向下滚动内容滑动展示出来效果
06-12
效果描述： 基于jQuery库的flowup.js插件 当你的页面向下拖动的时候，底部的列表会向上滑动展示出来，有一个动画效果 使用方法： 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可 (js采用绝对路径，不建议修改)
html自动滚屏效果,javascript实现页面滚屏效果
weixin_42510453的博客
05-31 1672
当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。这是html代码：Document屏幕1屏幕2屏幕3屏幕4屏幕5...
js控制网页滚动条往下滚动
weixin_30236595的博客
07-31 810
function aa(i){ var tm = setInterval(function(){ var t = $(window).scrollTop(); var d = i < t ? Math.min((i-t)/10, -1) : Math.max((i-t)/10, 1) $(window).scrollTop(...
页面向下滚动一定距离显示固定搜索框
jiang_mingyi的博客
06-30 4150
如淘宝首页那样，页面滚动到一定距离时，显示头部的搜索框。 具体代码很简单：//屏幕向下走多高的距离，出现little-logo $(window).scroll(function(){ if($(window).scrollTop() > 167){ $('.little-logo').show(); }else{
html5网页怎么自动下滑动,360浏览器在浏览网页时自动下滑怎么办 360浏览器在浏览网页时自动下滑解决方式一览...
weixin_29539581的博客
06-03 4218
最近，小编在使用360浏览器浏览网页的时候，有时候会出现网页自动往下滑，用鼠标拉也拉不回去，网页依然往下滑，那么，电脑网页打开浏览器就自动往下滑是怎么回事?遇到这个问题该怎么办?那么现在小编就给大家讲解一下具体的解决方法!解决方法一：可能是你按住了鼠标上的滚轴(用力按一下左右键间的滚轴) 也有可能是网页的设置问题，不是电脑的问题解决方法二：换个鼠标就可以，是你鼠标的中轴滑轮短路了。解决方法三：如果...
html向下滚动条,Html滚动条问题
weixin_39799561的博客
06-03 213
我正在设计一个相当简单的网站，但由于我没有太多经验，我有一个非常简单的问题。我已经以一种显示所有必要信息的方式完成了布局，而无需向下滚动。但出于某种原因它就在那里。该网站的CSS如下：@charset“utf-8”;/ * CSS文件* /html {height：100％;宽度：100％;余量：0;}身体{高度：65％;字体大小：100％;FONT-FAMILY：宋体;背景图像：网址(/imag...
html页面怎么加向下滚动,如何使用jQuery向上或向下滚动页面到锚点？
weixin_33149211的博客
06-03 426
如何使用jQuery向上或向下滚动页面到锚点？我正在寻找一种方法来包含幻灯片效果，当您单击页面上或下的本地锚点链接时。我想要一个你有这样一个链接的东西：linktext,imgetc.也许添加了一个类，所以你知道你希望这个链接是一个滑动链接：linktext,imgetc.然后，如果单击此链接，页面将向上或向下滑动到所需位置(可以是div，标题，页面顶部等)。这就是我以前的情况：$(d...
VB实现窗体滚动条的非控件API方法
为了实现滚动条的功能，开发者可能需要了解以下几个知识点： 1. Visual Basic基础：掌握VB的基本语法和窗体设计。 2. API调用：了解如何在VB中调用Windows API函数，并理解这些函数的作用和使用方法。 3. 窗体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值