网页自动滚屏播放

好长时间不做网页了,今天老板说要做一个展示的demo,让这个demo 自动的播放

用js做了一个滚屏播放的代码

<script type="text/javascript">
        var done = true;
        var speed = 4         //设置速度
        var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1
        function initialize() {
            startit()
        }
        function scrollwindow() {

            if (done) {
                if (document.all)
                    temp = document.body.scrollTop
                else
                    temp = window.pageYOffset
                if (alt == 0)
                    alt = 1
                else
                    alt = 0
                if (alt == 0)
                    curpos1 = temp
                else
                    curpos2 = temp
                if (curpos1 != curpos2) {
                    if (document.all)
                        currentpos = document.body.scrollTop + speed
                    else
                        currentpos = window.pageYOffset + speed
                    window.scroll(0, currentpos)
                }
                else {
                    currentpos = 0
                    window.scroll(0, currentpos)
                }
            }
        }
        function startit() {
            setInterval("scrollwindow()", 1000)
        }
        function setDone(f) {
            if (f == 0) {
                done = false;

            }
            if (f == 1) {
                done = true;
            }
        }
        window.onload = initialize
    </script>

在上面的这段代码中,我有添加了一个点击停止播放的函数function setDone(f),这个函数可以加到按钮上来控制是否自动播放

例如:

<span style="font-size: 10pt; color: white;" onclick="setDone(1)">自动 </span>

  

时间: 2024-12-10 09:40:36

网页自动滚屏播放的相关文章

配合网页滚屏播放,做解说词

---恢复内容开始--- 继上篇网页滚屏播放之后,再给播放的网页添加一个解说词,至于如何做滚屏播放,请参看上一篇:http://www.cnblogs.com/Steven-Love-Arlene/p/4822126.html 解说词的制作,开始准备找真人录的,但是由于时间紧,就直接写了一个解说稿子,然后用了一个文本转语音的软件合成了一段解说词,具体的软件网上很多,大同小异,不做推荐.但是如果有兴趣的可以用科大讯飞的SDK自己做一个. 配上添加音频的代码: <!--播放音频--> <di

自动滚屏代码

<html> <head> <title>自动滚屏代码丨轻质隔墙板|kiddy官网</title> </head> <body> <script language="JavaScript"> var position = 0; function scroller() { if (position !=700 ) { position++; scroll(0,position); clearTimeout

audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xxx.mp4"></video> (三)使用video代替audio (1) 有时候audio标签被屏蔽,不能被浏览器解释通过,可以选择使用video来代替: <video src="xxx.mp3"></video> (2) 若想要将音乐

基于 ECharts 封装甘特图并实现自动滚屏

项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件,所以这里只介绍甘特图组件的实现,图表的初始化.数据更新.自适应等不在这里介绍 一.约定数据格式 EChart 本身没有甘特图,但可以通过 EChart 提供的“自定义”方法 type: 'custom' 开发 const option = { series: [{ type: 'custom',

webview加载网页与全屏播放视频?

上篇我们大致了解了webview的一些属性,以及重要的方法.这篇我们就要一些案列来说明,一般webview最广泛的作用就是,加载一个html的网页(实现与js交互),,webview加载网页网页当中含有视频,webview文件下载等等. 首先我们来了解下webview是如何加载网页的?首先我们看下网页在家的效果? 代码也是比较简单 1 package cn.xiao.webviewplayvideo; 2 import android.app.Activity; 3 import android

FineReport中如何实现自动滚屏效果

对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在FineReport中的具体制作方法. 添加加载结束事件 点击菜单模板>模板web属性>分页预览设置,选择"为该模板单独设置",添加一个"加载结束"后事件,如下图所示: JS代码如下: //从页面加载结束后延迟2000MS执行事件(滚动) setTimeout

jquery实现自动滚屏效果,适用用公告新闻等滚屏

从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</title> <style ty

如何禁止 iPhone Safari video标签视频自动全屏?

最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看了看

javascript实现双击网页自动滚动,单击滚动停止

当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的.为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止. <script language"javascript"> var currentpos,timer; function initialize() { timer=setInterval("scrollwindow()",20)