js控制页面滚动（实例）

2023-03-02 12:08:02JavaScript016

js控制页面滚动（实例）,第1张

目标描述：多个图片排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图

知识点：onmousewheel，addEventListener，scrollTo，setTimeout

过程：

1.body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看

2.图片放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）

3.制作相对于视窗的按钮，几张图片就几个按钮，（position: fixed计算一下高度，可以利用calc计算top使得上下居中）

4.美化一下，css写写

5.先写简单的按钮事件

6.写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)

react在componentDidMount的时候监听

7.补充写一下火狐的

9.测试检查一下。

完成啦，啦啦啦～

我的截图：

缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。

ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。

自动滚动，主要思路是用js自带的setInterval方法。

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数

code 必需。要调用的函数或要执行的代码串。

millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

简单的例子，仅供参考：

<style>

*{ margin:0 padding:0 list-style:none}

#box{ width:840px border:1px solid #000 height:210px margin:30px auto position:relative overflow:hidden}

#box ul{ position:absolute left:0 top:0}

#box ul li{ width:200px height:200px float:left padding:5px}

</style>

window.onload=function(){

var oBox=document.getElementById('box')

var oUl=oBox.children[0]

var aLi=oUl.children

//复制一份内容

oUl.innerHTML+=oUl.innerHTML

oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'

setInterval(function(){

var l=oUl.offsetLeft+10

if(l>=0){

l=-oUl.offsetWidth/2

}

oUl.style.left=l+'px'

},30)

}

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

可以使用DIV+CSS+JS实现不间断横向滚动代码，具体代码如下：

<!DOCTYPE html>

<html>

<head>

<title>横向不间断滚动DIV CSS代码-DIVCSS5</title>

</head>

<body>

<style>

.scroll_div {width:600px height:49pxmargin:0 auto overflow: hidden white-space: nowrap background:#ffffff}

.scroll_div img {width:120pxheight:49pxborder: 0margin: auto 8px }

#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline}/* 设置ul和li横排 */

</style>

function ScrollImgLeft(){

var speed=20

var scroll_begin = document.getElementById("scroll_begin")

var scroll_end = document.getElementById("scroll_end")

var scroll_div = document.getElementById("scroll_div")

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee(){

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)

scroll_div.scrollLeft-=scroll_begin.offsetWidth

else

scroll_div.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

scroll_div.onmouseover=function() {clearInterval(MyMar)}

scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

}

</script>

<h2 align="center"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2>

<ul>

</ul>

</div>

</div>

</div>

</div>

</body></html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：监控摄像头怎么连接到电脑？

# 下一篇：上传图片的按钮能用css写出自定义的样式吗

推荐阅读

热门文章

最新发布

标签列表

js控制页面滚动（实例）

给您推荐相同类型的内容：