jquery实现整屏翻屏效果:jquery.mousewheel(一)
实现整屏上下翻效果:
需加载的js
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
css样式如下:
body{padding:0;margin:0; overflow:hidden }
ul{list-style:none;}
.content{width:100%;height100%;position:relative;top:0;}
.div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}
.div_01{background: #b20909;}
.div_02{background: #0941b2;}
.div_03{background: #2db209;}
.div_04{background: #b29c09;}
.left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}
.left_fixed ul li{
background:#000;cursor:pointer;width:15px;height: 15px;
border-radius:15px;margin-bottom: 10px;
}
.left_fixed ul li.active{background:#fff;}
jquery代码如下:
var page=0;//翻屏变量,初始第一屏
var shakStaute = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){ var starttime = 0,
endtime = 0;
$("body").mousewheel(function(event, delta) {
starttime = new Date().getTime(); //记录翻屏的初始时间 if (delta < 0&& page>=0 && page<=$(".content .divsame").length-2) { if (shakStaute>=0 &&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms内执行一次翻屏
shakStaute=1;
page++;
renderPage(page,true); //翻屏函数
endtime = new Date().getTime(); //记录翻屏的结束时间 }
} else if (delta>0 && page>=1 && shakStaute==1 && (starttime == 0 || (endtime - starttime) <= -500)) {
page--;
renderPage(page,true);
endtime = new Date().getTime();
} }); var div_height=$(window).height(); $(".divsame").css({'height':div_height}); $(window).resize(function(){ div_height=$(window).height(); $(".divsame").css({'height':div_height});
$('.content').animate({top:-page*div_height }, 100);
}); $(".left_fixed ul li").on("click", function(){ //点击小导航也执行翻屏
var index = $(this).index();
if(index>0){
shakStaute==1;
}
page = index;
renderPage(page, true);
$(".left_fixed ul li").removeClass("active");
$(this).addClass("active");
return false;
}); function renderPage(pageNumber, isScroll){ if (isScroll){
$('.content').animate({top:-pageNumber*div_height }, 'slow');
$(".left_fixed ul li").removeClass("active");
$(".left_fixed ul li").eq(pageNumber).addClass("active");
}
return;
} })
同时也是实时响应的。
需要demo猛点该文字,百度云盘下载
jquery实现整屏翻屏效果:jquery.mousewheel(一)的更多相关文章
- jQuery制作Web全屏效果
需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...
- jquery实现自动滚屏效果,适用用公告新闻等滚屏
从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- jQuery支持mobile的全屏水平横向翻页效果
这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- 15 个最佳 jQuery 翻书效果插件
本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1. BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...
- 首页大屏广告效果 jquery轮播图淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用jquery.touchSwipe.js实现的移动滑屏效果。
利用jquery.touchSwipe.js实现的移动滑屏效果. 亲测:兼容ie8及各种浏览器 <script type="text/javascript" src=&quo ...
随机推荐
- Android小项目合集(经典教程)包含十五个Android开发应用实例
http://www.cnblogs.com/aimeng/archive/2012/03/28/2422435.html
- SQL数据库基础(八)
连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join on 2.union 在关 ...
- 【GOF23设计模式】代理模式
来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_代理模式.静态代理 package com.test.proxy.staticProxy; public interfac ...
- Css文字特效之text-shadow特效
今天总结一下文字特效text-shadow,如果用好它可以做出各种不一样的效果,下图是我做出的几种效果. 怎么样,看起来很不错吧,下面贴代码. /* css */ p{ width:300px; ma ...
- 如何解决div层被flash遮盖的问题
页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...
- sublimeText插件推荐
工欲善其事必先利其器.sublimeText是前端开发工程师的一把利器,它的优点包含: 随时保留文件的修改 Goto Anything,智能搜索; 简单全面的插件体系; 代码地图; 快速启动 ... ...
- ABAP--如何在ALV_Grid的函数中定义下拉列表
最近经常听到网友和用户需求希望你在ALV Grid的函数中加入下来列表,其实SAP已经考虑了大家的需求,用户的需求是可以实现的.我特地将代码奉献给大家,供大家参考和学习. 代码如下: REPORT.* ...
- SharePoint 2013 开启访问请求
1.通常,我们进入SharePoint 2013站点,如果没权限会提示该站点未被共享,而没有切换账号或者申请访问,实在是很流氓:其实,SharePoint为我们提供了访问请求页面,但是可能需要手动开启 ...
- 文件快速搜索工具-Everything的使用(转)
首先它是一款基于名称实时定位文件和目录的搜索工具,有以下几个优点: 快速文件索引 快速文件搜索 较低资源占用 轻松分享文件索引 实时跟踪文件更新 通过使用everything小工具,可以提高我们的工作 ...
- 代码导出Reporting Services报表文件
背景部分 使用Reporting Services很容易制作和发布我们需要的报表,报表效果也还不错 不过如果报表数据过大或报表数量过多,打开及查看报表感觉可能就是另外一回事了 好在Reporting ...