单页鼠标滚动代码

document.body.onmousewheel = function (event) {
        event = event || window.event;
        // event.wheelDelta < 0 向上滚动
        if (event.wheelDelta < 0 || event.detail < 0) {
            if ($("*").is(":animated")) {
                return false
            }
            if ($(".animated").length != 0) {
                return false
            }
            if (page == 6) {
                return false;
            }
            animateOutPage(page);
            page++
        } else {
            if ($("*").is(":animated")) {
                return false
            }
            if ($(".animated").length != 0) {
                return false
            }
            if (page == 1) {
                return false;
            }
            page = page - 1;
            animateOutPage(page + 1);
            if (page == 1) {
                $(".pageChose").eq(0).addClass("on");
            } else {
                $(".pageChose").eq(0).removeClass("on");
            }
        }

原文地址:https://www.cnblogs.com/duxingdexin/p/9246021.html

时间: 2024-10-09 06:44:24

单页鼠标滚动代码的相关文章

基于html5海贼王单页视差滚动特效

分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="top"> <div class="top_main center"> <ul id="scene" class="scene"> <li class="layer" data-depth="0.10"

圆柱模板单页HTML5展示代码

` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-T

Nodejs之MEAN栈开发(六)---- 用Angular创建单页应用

在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方式(jade.路由都需要在服务端编译),我们将用Angular在客户端浏览器上跑起来.PS:在正常的开发流程上,我们可能不会在服务器端创建了一个网站,然后又用SPA重建它.但从学习的角度来说这还不错,这样掌握了两种构建方式. 上一节所有Angular相关的代码都在一个js里面,这不便管理和维护,这一

dedecms 单页

常用的需要调到首页来的单页内容,比如公司简介.联系等内容,在首页可能都要进行展现.通过常规的方式,包括查阅dede官方论坛资料,都找不到比较合适的答案.今天提供两种方式进行调用.一.单页内容的模板调用标签是 {dede:field.content/} ,经过试验,在首页使用 代码如下: {dede:channelartlist } {dede:field.content/}{/dede:channelartlist } 进行调用,即可顺利的调出相关的数据.但是出现问题,这种调用只能用于只有一个单

拥抱单页网站! jQuery全屏滚动插件fullPage.js

不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可以爆表似的.当然,不得不承认,介绍产品的页面用单页网站似乎确实高大上的多. 在站长之家看到一篇文章,让我对单页网站有了探索的热情.文章这么写的:“随着单页网站从未经考验的即兴创作一跃成为受人热捧的潮流趋势,垂直滚动的理念正式成了人们目光聚焦的中心.与此同时,设计师们也在大踏步地创新,力求让这一趋势在

国外的一些优秀单页滚动页面设计分享

国外的一些优秀单页滚动页面设计分享We Are Top Secret 这个导航界面设计从色彩上选用黑白,给人感觉带一点潮流,带一点温和,在这个单页滚动设计中没有特意去使用一些醒目和特效抓取用户的眼球,只是底部用了一个小巧的“scroll down”的提示,这样一来,由于界面简单简洁,融合度是非常好的. Fixed Group在这些页面很炫酷的设计中,国外一般都很喜欢将导航栏给隐藏掉,一方面可以更加简洁,更加美观,另一方面可以引导用户向下的滚动页面,在这个页面的诱导设计中是使用了一个超窄的箭头,有

jquery手写实现单页滚动导航

效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=$('.switch-tab>li').index(this); $('body

纵向文字滚动代码,带上下图片控制的。鼠标放到上下图片上时滚动

<style type="text/css"> #swsh .swsh_body{height:352px;overflow:hidden;}</style></p> <div id="swsh"> <script language="javascript"> var UDMoveflag=true function scrollStart(object,offset){ object.

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效