当前位置:Gxlcms > JavaScript > jquery.mousewheel实现整屏翻屏效果_jquery

jquery.mousewheel实现整屏翻屏效果_jquery

时间:2021-07-01 10:21:17 帮助过:2人阅读

实现整屏上下翻效果:
需加载的js

css样式如下:

body{padding:0;margin:0; overflow:hidden }
ul{list-style:none;}
.content{width:100%;height100%;position:relative;top:0;}
.div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}
.div_01{background: #b20909;}
.div_02{background: #0941b2;}
.div_03{background: #2db209;}
.div_04{background: #b29c09;}
.left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}
.left_fixed ul li{
  background:#000;cursor:pointer;width:15px;height: 15px;
  border-radius:15px;margin-bottom: 10px;
}
.left_fixed ul li.active{background:#fff;}

jquery代码如下:

同时也是实时响应的。

再来看一个例子

注意头部加载的js,jquery库,mousewheel.js已经实现的index.js








jquery 代码如下(index.js):

人气教程排行