`

jquery实现滚动鼠标时整屏翻页特效的实现

阅读更多

整屏翻页效果可详见苹果IPHONE5S的介绍页面:http://www.apple.com/cn/iphone-5s/, 当然苹果和其他很多类似同类整屏翻页的例子都是把页面滚动条隐藏掉。这次也将不把滚动条隐藏掉,并且可以通过点击/拖动滚动条实现整屏翻页的方法写出来。

鼠标滚轮实现整屏翻页:

该实例使用了jQuery Mousewheel插件(http://plugins.jquery.com/mousewheel/),使用以下代码之前须注意引用该插件:

var scrolling = false;//scrolling变量防止鼠标滚动翻页过快而影响翻屏体验(现在是滚轮动一下,翻一页,等翻完页才能下达新的翻页命令)
var scroll_num = 1;//scroll_num是用来记录翻到第几页的变量
var num=10;//num变量用来记录整屏翻页一共有多少页,限制scroll_num不会超过有效页数
var first=true;//first用来在页面不在第一页时刷新页面(刷新页面会重置所有变量导致scroll_num变为0,但滚动条位置却不变),重新计算scroll_num真实数据
$('html,body').bind('mousewheel', function (event, delta, deltaX, deltaY) {                    event.preventDefault();                
    if (scrolling == false) {
          if (first == true) {
               var scroll_position = $(window).scrollLeft() / $(window).width();
               scroll_num = Math.floor(scroll_position) + 1;
          }
          scrolling = true;                    
          if (delta == -1 && scroll_num + 1 <= num) { 
               scroll_num++; 
               $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { scrolling = false; }); 
          }else if (delta == 1 && scroll_num - 1 > 0) { 
               scroll_num--; 
               $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { scrolling = false; });
          }else { scrolling = false; }
    }                
});

 点击/拖动滚动条实现整屏翻页:

由于暂时找不到办法实现对鼠标对滚动条的点击/拖动的监控,该实例通过比较笨的方法,直接监控鼠标按下/放起动作,在鼠标按下时记录滚动条位置,放起时对比新的滚动条位置和原有滚动条位置是否一样,如不一样则判断鼠标对滚动条进行过点击。该实例使用的scrolling和scroll_num变量在上面引用过,这里就不再声明了。

var scroll_yet;
$(window).bind('mouseup', function () {                
    if (document.body.scrollLeft != scroll_yet) {
         var scroll_position = $(window).scrollLeft() / $(window).width();
         if (document.body.scrollLeft < scroll_yet) {                        
               scroll_num = Math.floor(scroll_position) + 1;                        
         }else{                        
               scroll_num = Math.ceil(scroll_position) + 1;                        
         }
         $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { });
         scrolling = false;
    } else {                    
        scrolling = false;
    }
 });
 
$(window).bind('mousedown', function () {
       if (scrolling != true) {
            scrolling = true;
            scroll_yet = document.body.scrollLeft;
            $("html,body").stop(true, true);
      }                
}); 

 

PS1:该实例所有代码均是实现横屏左右移动,如果要实现主流的竖屏上下移动,只需把scrollLeft改成scrollTop,把$(window).width()改成$(window).height()即可。

PS2:scrollLeft,scrollTop都可能出现浏览器不兼容的情况,我这里呢有两个兼容的方法来取得他们的值:

function mweb$$GetScrollTop() {
    if (self.pageYOffset) { return self.pageYOffset; }
    else if (document.documentElement && document.documentElement.scrollTop) { return document.documentElement.scrollTop; }
    else if (document.body) { return document.body.scrollTop; }
}

function mweb$$GetScrollLeft() {
    if (self.pageXOffset) { return self.pageXOffset; }
    else if (document.documentElement && document.documentElement.scrollLeft) { return document.documentElement.scrollLeft; }
    else if (document.body) { return document.body.scrollLeft; }
}

 

 

分享到:
评论

相关推荐

    jQuery滚动鼠标垂直全屏翻页代码.zip

    总的来说,"jQuery滚动鼠标垂直全屏翻页代码"集成了jQuery的强大功能和现代Web开发的先进技术,实现了网页翻页的新颖方式。理解和掌握这些知识点,对于提升网站用户体验和增强开发者技能具有重要意义。而压缩包中的...

    jQuery导航图片全屏滚动代码,jQuery鼠标悬停卡片3D翻页特效

    可以访问这篇文章有完整的介绍: ... jQuery导航图片全屏滚动代码,jQuery鼠标悬停卡片3D翻页特效,jQuery电影相册图片预览,jquery图片墙手风琴,Photo Carousel

    jQuery鼠标滚动全屏3D翻转动画切换代码.zip

    全屏3D翻转动画是一种视觉冲击力强的特效,它利用CSS3的3D转换功能,结合jQuery的事件监听和元素操作,实现了页面内容在用户滚动鼠标时以3D视角进行翻转切换。这种效果通常用于展示项目、产品或图片集,为用户带来更...

    jQuery和CSS3炫酷弹性过渡全屏翻页特效

    "jQuery和CSS3炫酷弹性过渡全屏翻页特效"就是一个旨在实现这一目标的工具。这个特效结合了jQuery库的强大功能和CSS3的新特性,为用户创造出流畅、美观且具有弹性的全屏翻页体验。 首先,jQuery是一个广泛使用的...

    jQuery鼠标滚动垂直全屏切换代码.zip

    同时,使用`$(window).scroll()`监听滚动事件,当用户滚动鼠标时触发相应的函数。 4. **CSS3过渡和动画**:为了实现平滑的滚动效果,可能使用CSS3的`transition`属性定义状态变化的过渡效果,以及`transform`属性...

    jQuery鼠标控制图片滚动翻页.zip

    jQuery鼠标控制图片滚动翻页是一款jquery.gridnav网格图片列表排列布局鼠标按钮控制图片滚动翻页。

    jQuery实现的活动内容鼠标点击上下滚动切换特效源码.zip

    在描述中提到的特效实现中,关键在于`event`对象和`scrollTop`属性。当用户点击元素时,`click`事件会被触发,我们可以在这个事件的回调函数中获取当前滚动位置,并根据用户点击的方向(上或下)改变`scrollTop`值,...

    横向图片滚动带翻页特效

    在创建图片滚动翻页特效时,jQuery的便利性就显现出来了。 1. **基础结构**:在开始之前,我们需要确保页面中已引入jQuery库。这通常通过在HTML文件的`&lt;head&gt;`部分添加链接到CDN(内容分发网络)的jQuery库,或者将...

    jQuery鼠标控制图片滚动翻页特效代码

    【jQuery鼠标控制图片滚动翻页特效代码】是一个利用jQuery库实现的交互式图片展示功能,主要特点是通过鼠标的移动和点击来控制图片的滚动和翻页。这种效果在网页设计中常见于产品展示、画廊或者相册等场景,能够提供...

    网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效

    【标题】:“网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效”指的是在网站设计中,采用的一种常见用户体验优化技术。这种技术通常应用于新闻、产品展示或广告区域,通过横向滚动的方式展示多张图片,并在鼠标...

    大屏上下滚动特效

    这种特效可以让用户通过简单的鼠标滚轮操作,平滑地浏览长页面内容,而无需手动翻页。在给定的标题“大屏上下滚动特效”中,我们关注的是如何实现这种视觉效果。 描述中提到的插件可能是实现这种效果的一种工具,它...

    jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、...

    jQuery实现鼠标滚轮控制div上下翻动效果

    打开页面后,用鼠标滚轮上下滚动时,发现页面并不会滚动,滚动的部分却是div里面的三部分,效果很不错 使用方法: 1、在你的网页head中引入css样式 2、将代码部分拷贝到你的网页中 3、在底部引入四...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载...

    jQuery+HTML5页面整屏滑动切换特效代码

    本篇文章将深入探讨如何实现jQuery+HTML5的页面整屏滑动切换特效,以及相关的核心技术点。 首先,我们需要了解jQuery库。jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和...

    原生js代码新闻文字列表分页拖拽翻页特效

    在这个项目中,我们将探讨如何使用原生JavaScript实现新闻文字列表的拖拽翻页特效。 首先,我们要理解拖拽翻页的基本原理。它允许用户通过在页面上拖动元素来实现页面的切换,这种效果通常与触摸屏设备上的滑动操作...

    WPF翻书翻页动画 拖拽 附源码 最真实

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现逼真的翻书翻页动画,并且支持用户自定义页面内容以及鼠标拖拽功能。这个技术的应用超出了传统JavaScript库如JQuery的翻书插件,展示了...

    jquery图片文字一起滚动切换.zip

    【标题】:“jQuery图片文字一起滚动切换”是一个利用jQuery库实现的动态效果,它结合了图片和文字,使两者能够同步地在页面上进行上下或左右的滚动切换。这种效果通常用于网站的焦点图或幻灯片展示部分,能够吸引...

    jQuery实现仿苹果CoverFlow图片切换特效源码.zip

    【jQuery实现仿苹果CoverFlow图片切换特效源码】 在网页设计和开发中,引入动态、交互性的元素可以显著提升用户体验。苹果的CoverFlow效果就是一种经典的视觉展示方式,它模仿了iPod等设备中翻页浏览媒体的方式。在...

    jquery实现图片水平滚动效果

    在实现图片水平滚动效果时,jCoverflip能很好地模拟真实的翻页体验,使用户能够流畅地浏览一组图片。 要实现这个效果,首先需要在HTML文件中引入jQuery库和jCoverflip插件的JS与CSS文件。通常,这些文件可以从CDN或...

Global site tag (gtag.js) - Google Analytics