鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）

最近发现这种效果很流行，自己也写一个，以后应该能用上。
技术重点应该就是鼠标滚轮的兼容性写法那里，因为jquery没有封装鼠标滚轮事件，用原生JS写的话每个浏览器的标准都不一样，很麻烦。
右侧边栏按钮点击滚动页面的效果就是普通的图片滚动展示效果而已，没什么难度。

下面是代码，我都放在一个页面里面，为了可以直接运行看效果。

<!--Created on : 2013-12-18 16:26:23Author     : Liuxiaofan
-->
<!doctype html>
<html><head><meta charset="utf-8"><title>山寨苹果官网iPhone5s的滚屏动画实例</title><script src="http://www.liuxiaofan.com/demo/js/jquery-1.6.4.min.js"></script><script>$(function() {/*** 如转载请保留本人原创信息* 代码来源 -刘晓帆的博客* http://liuxiaofan.com*/var bodyEl = $('html,body'); //ff和ie需要html，chrome需要body，万恶的兼容性啊var siderBtn = $('.sider li');var boxEl = $('.box');var boxIndex = 0; //定义一个变量保存上次滚动到的是第几个box// 隐藏页面滚动条并且初始化页面位置为顶部bodyEl.css({'overflow': 'hidden'}).scrollTop(0);/*** 为按钮绑定事件* @returns {undefined}*/siderBtn.click(function() {var btnIndex = $(this).index();var tarBoxTop = boxEl.eq(btnIndex).offset().top; //取得box的offset.top值var isAnimate = bodyEl.is(":animated"); //当前是否处于动画状态var m = btnIndex - boxIndex; //算当前的按钮和当前显示的box的差值//如果是0就不操作于不是动画状态才执行if (m != 0 && !isAnimate) {//如果是1代表是临近的if (m == 1 || m == -1) {bodyEl.animate({scrollTop: tarBoxTop}, 1000);} else {bodyEl.fadeOut(400);setTimeout(function() {bodyEl.fadeIn(400).scrollTop(tarBoxTop);}, 400);}//改变右侧按钮的焦点$('span', siderBtn).removeClass('cur');$('span', $(this)).addClass('cur');boxIndex = btnIndex;}});/*** 鼠标滚轮触发后的事件*/var mouseWheel = function(event) {if (!event) {event = window.event;}var delta = 0;//为了保存滚轮的滚动值var tarBoxTop = boxEl.eq(boxIndex).offset().top; //取得当前box的offset.top值var isAnimate = bodyEl.is(":animated"); //当前是否处于动画状态//取滚轮滚动的值if (event.wheelDelta) {delta = event.wheelDelta / 120;//兼容chromeif (window.opera) {//兼容operadelta = -delta;}} else if (event.detail) {delta = -event.detail / 3;//兼容ff}//判断是向上滚还是向下if (delta > 0) {if (boxIndex != 0) {if (!isAnimate) {bodyEl.animate({scrollTop: tarBoxTop - 1000}, 1000);boxIndex--;}}} else {if (boxIndex != 4) {if (!isAnimate) {bodyEl.animate({scrollTop: tarBoxTop + 1000}, 1000);boxIndex++;}}}//改变右侧按钮的焦点$('span', siderBtn).removeClass('cur').eq(boxIndex).addClass('cur');};//绑定滚轮事件if (window.addEventListener) {window.addEventListener('DOMMouseScroll', mouseWheel, false); //火狐和IE}window.onmousewheel = document.onmousewheel = mouseWheel; //chrome});</script><style type="text/css">body{padding: 0;margin: 0;font-size: 12px;font-family: 微软雅黑;}.header{width: 100%;height: 80px;line-height: 80px;text-align: center;background: #fff;opacity:0.5;position: fixed;}.box{width: 100%;height: 1000px;text-align: center;line-height: 1000px;}.box1{background: #95D95A;}.box2{background: #FF6BA1;}.box3{background: #FFB557;}.box4{background: #E59AE7;}.box5{background: #70CBF8;}.sider{position: fixed;right: 50px;top:40%;}.sider ul{list-style: none;}.sider li{width: 16px;height: 16px;padding-top: 10px;cursor: pointer;}.sider span{display: block;background: #777;width: 4px;height: 4px;border-radius:20px;margin: 0 auto;}.sider span.cur{width: 8px;height: 8px;border: 1px solid #777;background: rgba(0, 0, 0, 0);}.footer{width: 100%;height: 300px;background: #333;color: #fff;text-align: center;}</style></head><body><div class="header">头</div><div class="sider"><ul><li><span class="cur"></span></li><li><span></span></li><li><span></span></li><li><span></span></li><li><span></span></li></ul></div><div class="box1 box">box1</div><div class="box2 box">box2</div><div class="box3 box">box3</div><div class="box4 box">box4</div><div class="box5 box">box5</div><div class="footer">脚</div></body>
</html>

原文地址：http://liuxiaofan.com/2013/12/18/1617.html

鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）相关推荐

html鼠标滑轮换图片,JavaScript实现鼠标滚轮控制页面图片切换
鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢?本文主要 ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
JS中如何通过鼠标滚轮控制横向滚动轴滚动
// 滚动轴[鼠标]横向滚动 let tabsContainer = document.querySelector(".workgroup-tabs"); tabsContaine ...
鼠标滚轮控制作用滚动
config.maxScroll = $('.scroll-x table').outerWidth() - $('.scroll-x').outerWidth();config.speed = 30 ...
WPF 使用鼠标滚轮控制ListBox水平滚动条滚动
我们都知道在WPF中鼠标滚轮可以控制垂直滚动条滚动,但没有什么属性设置可以让它控制水平滚动条滚动,所以我们需要自己去实现水平滚动. 首先,在ListBox的Mousewheel事件中获得ListBox ...
linux鼠标滚轮不能上下滚动页面,解决办法：如果鼠标滚轮无法上下滚动怎么办...
有时我们的鼠标滚轮无法上下滚动,该怎么办?让我们从下面的编辑器中学习,简要介绍鼠标滚轮上下故障的解决方案!希望你喜欢它! 鼠标滚轮上下滚动失败的解决方案: 除尘鼠标故障也可能表现为拥塞.这是因为鼠标 ...
超强的苹果官网滚动文字特效实现
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页.其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外. 最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣 ...
svg html 鼠标滚轮交互,鼠标滚轮控制SVG线条动画
之前用D3制作图表是初次接触SVG,当时只顾感叹D3的强大了.后来当看到网站 Serio Verify 的时候,才意识到SVG用于制作可交互的页面动画是多么有意思. 于是自己也尝试在HTML页面中制作 ...
鼠标滚轮控制panel滚动条
在winform开发中,通过设置Panel的AutoScroll属性来控制滚动条是否显示,但显示滚动条的时候,鼠标的滚轮是无法控制Panel里面的滚动条的,只能控制Form的滚动条,当我们需要控制Pa ...
苹果设置播放html5视频,类似苹果官网,使用滚轴事件控制视频播放
苹果官网的效果网址:https://www.apple.com/homepod/ 完成的效果:滚动滚轴播放相同比例时间的视频,向上滚动倒播视频. 目前碰到的问题是只有一下下滚动滚轴才可以完成这个效 ...

鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）

鼠标滚轮控制页面滚动（山寨苹果官网iPhone5s的滚屏动画实例）相关推荐

最新文章

热门文章