整屏翻页效果可详见苹果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滚动鼠标垂直全屏翻页代码是一款可以在滚动鼠标或点击按钮时,以平滑过渡的方式垂直全屏翻页。
jQuery鼠标滚动全屏切换预览特效 j
可以访问这篇文章有完整的介绍: ... jQuery导航图片全屏滚动代码,jQuery鼠标悬停卡片3D翻页特效,jQuery电影相册图片预览,jquery图片墙手风琴,Photo Carousel
jQuery鼠标滚动全屏3D翻转动画切换代码是一款带有索引按钮,支持鼠标滚轮滚动切换特效,还带有文字动画效果。
jQuery鼠标控制图片滚动翻页是一款jquery.gridnav网格图片列表排列布局鼠标按钮控制图片滚动翻页。
jQuery鼠标滚动垂直全屏切换代码是一款可以快速创建水平或垂直的全屏滚动翻页效果。
jQuery鼠标滚动垂直全屏切换代码是一款可以快速创建水平或垂直的全屏滚动翻页效果。
打开页面后,用鼠标滚轮上下滚动时,发现页面并不会滚动,滚动的部分却是div里面的三部分,效果很不错 使用方法: 1、在你的网页head中引入css样式 2、将代码部分拷贝到你的网页中 3、在底部引入四...
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度、easing:动画效果、...
jQuery鼠标控制图片滚动翻页是一款jquery.gridnav网格图片列表排列布局鼠标按钮控制图片滚动翻页。
34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载...
jquery滚动条插件,支持滚动条在上下左右不同位置,同时鼠标滚轮也可以控制图片前后滚动,最有意思的是带有翻页之类的效果,很不错的jquery特效,懒人之家推荐下载
jQuery+HTML5页面整屏滑动切换代码是一款右侧带有索引按钮的页面滚动特效,支持鼠标滚动控制。
34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用Banner大图片横向切换效果 36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38.jquery异步加载...
jQuery左右滚动banner代码是一款乐视网首页jquery焦点图,自动播放,带缩略图,有左右箭头控制翻页,共10屏,点击缩略图切换大图,左右滑动切换,带文字描述和标题,鼠标滑入播放按钮会散开,如图所示的4个漂亮的按钮...
1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换...这是一款基于jQuery实现的仿苹果官网页面上下滚动全屏效果源码,鼠标滑动页面上下翻页即可看到网站页面的全屏
WPF实现的真实翻页翻书效果,支持自定义页面内容,自由放置任何种类的内容自动感应鼠标触点,可拖拽,完全超越JQuery的各种翻书插件,WPF才是王道!
支持图片左右滚动,且有类似翻页效果的按钮,鼠标移动到图片上后图片放大
再其次,是娱乐fun.html页面,利用CSS3 transform当鼠标悬停到照片上时,图片具有放大特效,主要利用css3中scale()和rotate()进行旋转和缩放。接下来是说说moodlist.html:个人心情页面,博主可以发一些类似于微信或...
示例描述:jQuery应用特效。 18_1.htm 动态表格和动态表单。 18_2.htm 输入框获得焦点、点击、划过时全选。 18_3.htm CSS 样式表动态选择。 18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个...