本文介绍: 文章目录滚轮事件动画效果练习整屏滚动HTML代码CSS代码效果演示滚轮事件jQuery.mousewheel插件使用jQuery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jQuery的滚轮事件插件jquery.mousewheel.js。 //鼠标滚动事件 $(window).mousewheel(function(event,dat){ console.log(dat); })注:event是个形参
滚轮事件
注:event是个形参指代事件,dat是一个返回的参数的形参
鼠标向上滚动dat为1,向下滚动为-1
动画效果
效果演示:
注:动画效果的呈现,关键在于
transition: all 1000ms ease 300ms;/*一秒内完成动画,延迟300ms执行*/
和
transform: rotate(135deg);/*旋转135度*/
练习
整屏滚动
HTML代码
关键点:
1.var timer = null;//设置一个空值,没有这个无法实现函数节流(原理待查找)
2.//给第一个页面的内容一开始就加上动画 $pages.eq(0).addClass('moving');
3.//页面的切换动画 $pages_container.animate({'top':iPoint*$height},300);
4.//这一句要放在定时器里面,在外面的话iPoint会-1;原因是定时器没执行完iPoint的值还是之前全局变量存的 $point_list.eq(iNum).addClass('active').siblings().removeClass('active');
5.//给当前页面增加动画内容 $pages.eq(iNum).addClass('moving').siblings().removeClass('moving');
CSS代码
注:类样式下的样式设计可以有多种写法
以及
transition: all 1000ms ease 300ms;/* 动画关键,延迟300ms执行,在1s内完成 */
效果演示
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。