jquery.mousewheel整屏图片上下滚动

 时间:2026-02-14 18:17:18

1、准备好需要用到的图标。

jquery.mousewheel整屏图片上下滚动

2、新建html文档。

jquery.mousewheel整屏图片上下滚动

3、书写hmtl代码。

<div class="fixed_r">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</div>

<div class="num_box">

<div class="num" id="num_0">第1屏</div>

<div class="num" id="num_1">第2屏</div>

<div class="num" id="num_2">第3屏</div>

<div class="num" id="num_3">第4屏</div>

<div class="num" id="num_4">第5屏</div>

<div class="num" id="num_5">第6屏</div>

</div>

<input type="hidden" value="0" class="ddw"/>

<input type="hidden" value="0" class="ddw2"/>

jquery.mousewheel整屏图片上下滚动

4、书写并添加js代码。<script src="js/jquery.mousewheel.js" ></script>

jquery.mousewheel整屏图片上下滚动

5、代码整体结构。

jquery.mousewheel整屏图片上下滚动

6、查看效果。

jquery.mousewheel整屏图片上下滚动

  • jquery页面上下滚动视差
  • jquery上下页面视差滚动切换
  • 横向滚动鼠标插件Horwheel怎么用
  • jQuery页面上下滚动触发区块动画
  • jquery+css3实现下拉选择列表上下滚动
  • 热门搜索
    北京 旅游 崇明岛旅游景点 携程旅游官网 九寨沟旅游景点 上海都市旅游卡 武汉周边旅游景点 临夏旅游 东戴河旅游景区 大理丽江旅游 众信旅游官网