简易页面场景滚动的jquery插件
(function($){
$.extend($.fn, {
scene_scroll:function(arg_obj){
// 参数检测
// 场景数组
var $scene_arr = arg_obj.$scene_arr || (function(){console.log("没有场景数组,请设置$scene_arr");})(),
// 导航数组
$nav = arg_obj.$nav || (function(){console.log("没有导航数组,请设置$nav");})(),
// 导航的触发事件类型
event_name = arg_obj.event_name || "click",
// 速度
speed = arg_obj.speed || 400,
// 滚动完成后的回调函数
scroll_callback = arg_obj.scroll_callback || (function(){return function(){}})(),
// 是否组织事件冒泡和默认动作
stop_next_event = arg_obj.stop_next_event || false,
nav_height_arr = [0],
chrome_browser_flag = navigator.userAgent.indexOf("AppleWebKit");
$scene_arr.each(function(){
var div_height = $(this).height();
nav_height_arr.push(div_height)
});
$nav.on(event_name,function(){
var pos = $.inArray(this, $(".nav").find("a"));
var sum_pos = 0;
for(var i=0; i<=pos; i++){
sum_pos = sum_pos + nav_height_arr[i];
}
// chrome滚动
(chrome_browser_flag > -1 ) ? $("body").animate({scrollTop:sum_pos}, speed, scroll_callback):
// IE,Firefox滚动
$(document.documentElement).animate({scrollTop:sum_pos}, speed, scroll_callback);
if(!stop_next_event) return false;
});
}
})
})(jQuery);
简易页面场景滚动的jquery插件的更多相关文章
- 分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...
- 8个实用的页面布局和用户界面jQuery插件
网页设计师和网页开发人员在做项目的时候可能会有一些页面的布局或者对于UI有一些特定的要求.可能一些需求不能单独使用CSS就能实现的.于是很多时候开发人员都会消耗大量的时间和精力去写一些JS来协助实现. ...
- 一个文字无缝滚动的jQuery插件
直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 七个帮助你处理Web页面层布局的jQuery插件
1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...
- 一个无缝滚动的jquery插件
$.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- 10款无限滚动自动翻页jquery插件
2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
随机推荐
- Linux (RHEL)修改时区
1.修改配置文件修改为上海时区 vi /etc/sysconfig/clock ZONE="Asia/Shanghai" 2.创建上海时区的软连接 ln -sf /usr/shar ...
- 7.11 Models -- Customizing Adapters
一.概述 1. 在Ember Data中,和后台数据存储通信的逻辑存在于Adapter中.Ember Data的有一些内置的假设,一个 REST API 应该怎么看.如果你的后台约定和这些假设不同,E ...
- 浅谈Java中的==和equals
引言 最近在看TIJ,看到==和equals相关内容,今天就来简单的总结下. 关系操作符== 书中对关系操作符的描述是这样的:"关系操作符生成的是一个boolean结果,它们计算的是操作数的 ...
- SV中的OOP
OOP:Object-Oriented Programming,有两点个人认为适合验证环境的搭建:1)Property(变量)和Method(function/task)的封装,其实是BFM模型更方便 ...
- VS2010/MFC编程入门之五十二(Ribbon界面开发:创建Ribbon样式的应用程序框架)
上一节中鸡啄米讲了GDI对象之画刷CBrush,至此图形图像的入门知识就讲完了.从本节开始鸡啄米将为大家带来Ribbon界面开发的有关内容.本文先来说说如何创建Ribbon样式的应用程序框架. Rib ...
- 获取页面地址url的指定部分信息
获取页面地址url的指定部分信息,总结在一个方法体中: /** * 获取项目跟路径,http://localhost:8080/myproject *@returns */ var getCurUrl ...
- Linux基础命令---sort
sort 以行为单位,对文本文件进行排,并输出排序结果.默认情况下,以每一行为一个单位,从首字符开始按照ASCII码向后逐个比较. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS ...
- P2503 [HAOI2006]均分数据
P2503 [HAOI2006]均分数据 模拟退火+dp (不得不说,我今天欧气爆棚) 随机出1个数列,然后跑一遍dp统计 #include<iostream> #include<c ...
- Jsp中如何通过Jsp调用Java类中的方法
Jsp中如何通过Jsp调用Java类中的方法 1.新建一个项目,在src文件夹下添加一个包:如:cn.tianaoweb.com; 2.再在包中添加一个类:如 package com; public ...
- Android JSON 解析关键代码
Android Json 解析其实还是蛮重要的知识点,为什么这么说呢,因为安卓通信大部分的协议都是使用 json 的方式传输,我知道以前大部分是使用的 xml ,但是时代在发展社会在进步,json 成 ...