原生jsfor拼接html,原生js滚滚屏.html

冷不防 2022-10-06 05:43 152阅读 0赞

\*\{

margin: 0;

padding: 0;

html,body\{

width: 100%;

height: 100%;

overflow: hidden;

.container\{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transition: all 1s ease 0s;

.page\{

width: 100%;

height: 100%;

background: yellowgreen;

.page0\{background-color: yellowgreen;\}

.page1\{background-color: orange;\}

.page2\{background-color: skyblue;\}

.page3\{background-color: gold;\}

.page4\{background-color: rgb(111,222,123);\}

.circles\{

width: 15px;

height: 100px;

position: fixed;

right: 10px;

top: 50%;

margin-top: -50px;

/\*background-color: red;\*/

.circles span\{

display: inline-block;

width: 15px;

height: 15px;

border-radius: 50%;

background-color: yellow;

font-size: 12px;

text-align: center;

line-height: 15px;

margin-bottom: 5px;

cursor: pointer;

.circles span.cur\{

background-color: red;

# 0 #

# 1 #

# 2 #

# 3 #

# 4 #

var container=document.getElementById("container");

//获取所有的焦点

var circles=document.getElementById("circles").children;

//信号量

var idx=0;

//函数节流防止化的太快

var lock=true;

//事件处理函数；

function mousewheelhandler(event)\{

event=event||window.event;

//节流：

if(!lock)\{

return;

//阻止默认事件

if(event.preventDefault)\{

event.preventDefault();

else\{

event.returnValue=false;

//chrome,ie用的是event。wheeldelta;

if(event.wheelDelta)\{

var direction=event.wheelDelta>0?1:-1;

else if(event.detail)\{

//火狐用的是event.detail;

var direction=event.detail>0?-1:1;

//滚轮往下滚，-(-1) 就是加一；

idx-=direction;

if(idx<0)\{

idx=0;

else if(idx>4)\{

idx=4;

//设置小圆点

//将所有的小圆点清空

for(var i=0;i

circles\[i\].className='';

//将制定的小圆点的名字，让其背景颜色

circles\[idx\].className="cur";

container.style.top=-idx\*100+"%";

//上锁

lock=false;

//模拟等待1.5秒后开锁，才可以继续滚动

setTimeout(function()\{

//解锁

lock=true;

\},1000)

//这里不用根据不同的浏览器进行判断，这是因为事件添加了如果浏览器不认识，不报错了

//给ie，chrome添加事件

document.onmousewheel=mousewheelhandler;

try\{

//给火狐添加事件

document.addEventListener("DOMMouseScroll",mousewheehandler,false);

catch(err)\{

一键复制

编辑

Web IDE

原始数据

按行查看

历史

原生jsfor拼接html,原生js滚滚屏.html

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关原生JS实现轮播图（HTML+CSS+JS）

相关 html原生js实现图片轮播,原生js实现简单轮播图

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

相关原生jsfor拼接html,原生js滚滚屏.html

相关图片轮播html原生代码,原生js实现轮播图的示例代码

相关 HTML5 前端原生 WebSocket 通信

相关原生js实现全屏滚动--fullPage

相关拼接原生js onclick方法传值

相关原生HTML table样式设置大全

相关利用原生js实现html5打砖块小游戏