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

来源：动视网责编：小采时间：2020-11-27 21:43:09

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

jquery.mousewheel实现整屏翻屏效果_jquery:实现整屏上下翻效果：需加载的js css样式如下： body{padding:0;margin:0; overflow:hidden } ul{list-style:none;} .content{width:100%;height100%;position:relative;top:0;} .div_01.div_0

推荐度：

点击下载本文 文档为doc格式

导读jquery.mousewheel实现整屏翻屏效果_jquery:实现整屏上下翻效果：需加载的js css样式如下： body{padding:0;margin:0; overflow:hidden } ul{list-style:none;} .content{width:100%;height100%;position:relative;top:0;} .div_01.div_0

实现整屏上下翻效果：
需加载的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)：