(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插件的更多相关文章

  1. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  2. 8个实用的页面布局和用户界面jQuery插件

    网页设计师和网页开发人员在做项目的时候可能会有一些页面的布局或者对于UI有一些特定的要求.可能一些需求不能单独使用CSS就能实现的.于是很多时候开发人员都会消耗大量的时间和精力去写一些JS来协助实现. ...

  3. 一个文字无缝滚动的jQuery插件

    直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  4. 七个帮助你处理Web页面层布局的jQuery插件

    1.UI.Layout  jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...

  5. 一个无缝滚动的jquery插件

    $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" ...

  6. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  7. 10款无限滚动自动翻页jquery插件

    2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...

  8. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  9. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

随机推荐

  1. react-native run-android error: unknown host service

    D:\rnworkspace\Hello>react-native run-android JS server already running.Running D:\Android\sdk/pl ...

  2. 【剑指offer】旋转数组的最小数字

    一.题目: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个 ...

  3. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  4. [LeetCode] 58. Length of Last Word_Easy tag: String

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  5. [lr] 矫正白平衡

    中性色区域 • 定义 中性色又称为无彩色系,是指由黑色.白色及由黑白调和成的各种深浅不同的灰色系列.中性色既不属于冷色调,也不属于暖色调.黑白灰是常用到的三大中性色.中性色区域是指不包含色彩的区域,准 ...

  6. 树莓派3B新版raspbian系统换国内源

    树莓派新版系统更换了专门优化过的桌面环境PIXEL,正好手头有个闲置的TF卡决定刷上新版系统玩玩.下载刷系统过程很多教程页很简单.插卡,上电开机,释放卡上的剩余空间都很正常,因为树莓派官方源访问很慢下 ...

  7. jms应用

    构建jms http://blog.csdn.net/haoxingfeng/article/details/9167895

  8. 深入理解 Java 内存模型(一)- 内存模型介绍

    深入理解 Java 内存模型(一)- 内存模型介绍 深入理解 Java 内存模型(二)- happens-before 规则 深入理解 Java 内存模型(三)- volatile 语义 深入理解 J ...

  9. 20154312 曾林 Exp8 web基础

    1.基础问题回答 1.1.什么是表单 1.2.浏览器可以解析运行什么语言 1.3.WebServer支持哪些动态语言 2.实践总结与体会 3.实践过程记录 ----3.1.Web前端:HTML基础 - ...

  10. Python 面试题集锦【315+道题】

    第一部分 Python基础篇(80题) 为什么学习Python? 通过什么途径学习的Python? Python和Java.PHP.C.C#.C++等其他语言的对比? 简述解释型和编译型编程语言? P ...