小七的Javascript 1月12日

来源：互联网发布：特效视频软件app 编辑：程序博客网时间：2024/05/18 03:46

本期做无缝滚动~

当然，在这之前先来一个热身的小运动：怎么让div无限延长，同时鼠标移上去停止延长？

废话不多说，让我们开始吧：

首先当然是创建一个div，做好定位：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #box{width: 200px; height: 200px; background: red; position: absolute; left: 0; top: 20px;}        </style>        </script>    </head>    <body>        <div id="box">          </div>    </body></html>

第二步：考虑无限延长，这时我们需要用到offsetWidth，即盒子的可见区域宽（为什么用这个，请看下面拓展）。这里我们需要不断的让它增加宽度，于是又要用到setInterval，这个功能为按照指定的周期（以毫秒计）来调用函数或计算表达式。，那么停止就是用clearInterval~
先设定不断的加10px，时间定30毫秒为一个周期，于是有了：

window.onload=function(){                var oBox=document.getElementById('box');                var timer=null;                function tobig(){                    oBox.style.width=oBox.offsetWidth+10+'px';                }                timer=setInterval(tobig,30);                oBox.onmouseover=function(){                    clearInterval(timer);                }            }

加window.onload是准备放置在body前面，于是如下：
这里写图片描述

现在开始做无缝滚动~

首先做好基本的Div和Style，成图

内容啥的都是网上复制的，代码如下图：

这里写图片描述

现在我们来做第二步，怎么让它滚动起来，比如向上无缝滚动起来：

之前的热身运动，让我们可以将里面的字体向上运动，这时我们又要想该如何实现无缝？li走完了怎么办？
其实这都是小问题~我们只需要在这个ul在走完的那一刻，回到之前的形状就可以了，就是在function move里面添加一个if判断语句

 if(oUl.offsetTop<-disTop){                        oUl.style.top='0px';                    }

这样的话，JS就如下面：

<script type="text/javascript">            window.onload=function(){                var oBox=document.getElementById('box');                var oUl=oBox.getElementsByTagName('ul')[0];                var aLi=oUl.getElementsByTagName('li');                var disTop=oUl.offsetHeight-oBox.offsetHeight;                function move(){                    if(oUl.offsetTop<-disTop){                        oUl.style.top='0px';                    }                    oUl.style.top=oUl.offsetTop-2+'px';                }                setInterval(move,100);                console.log(aLi.length);            }        </script>

最后拼接在一起，如下图：
这里写图片描述

完成咯~~~（这里还能举一反三：比如做两个按钮，控制方向；又如单击按钮加快等等）

拓展一：offsetWidth 等一系列图文解释

直接上图：
这里写图片描述

如图所示：
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

拓展二：请见资源

最近发现一个JavaScript中文手册，里面的内容挺详细的，我放资源库里面了，大伙可以免费下载哦~
点我快速进入资源库

0 0