(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. HTTP权威指南读书笔记

    HTTP权威指南笔记 读书有两种境界,第一种境界是将书读薄,另一种是读厚.本篇文章就是HTTP权威指南的读书笔记,算是读书的第一重境界,将厚书读薄.文章对HTTP的一些关键概念做了比较详细的概述,通读 ...

  2. SqlAlchemy个人学习笔记完整汇总-转载

    使用 sqlalchemy 有3种方式: 方式1, 使用raw sql; 方式2, 使用SqlAlchemy的sql expression; 方式3, 使用ORM.   前两种方式可以统称为 core ...

  3. Elasticsearch Date类型使用技巧

    elasticsearch原生支持date类型.这里简单记录下使用的方法. 使用date类型可以用如下两种方式: 使用毫秒的时间戳,直接将毫秒值传入即可. 传入格式化的字符串,默认是ISO 8601标 ...

  4. Kafka核心组件

    一.Kafka核心组件及工作方式 Producer :消息生产者,就是向kafka broker发消息的客户端 Consumer :消息消费者,向kafka broker取消息的客户端 Topic : ...

  5. 浏览器 extension和plugin的区别[来自知乎]

    "扩展"和"插件",其实都是软件组件的一种形式,Chrome 只不过是把两种类型的组件分别给与了专有名称,一个叫"扩展",另一个叫" ...

  6. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  7. 何为仿射变换(Affine Transformation)

    http://www.cnblogs.com/ghj1976/p/5199086.html 变换模型是指根据待匹配图像与背景图像之间几何畸变的情况,所选择的能最佳拟合两幅图像之间变化的几何变换模型.可 ...

  8. k-means学习笔记

    最近看了吴恩达老师的机器学习教程(可以在Coursera,或者网易云课堂上找到)中讲解的k-means聚类算法,k-means是一种应用非常广泛的无监督学习算法,使用比较简单,但其背后的思想是EM算法 ...

  9. 使用 JsPlumb 绘制拓扑图的通用方法

    摘要: 实现 JsPlumb 绘制拓扑图的通用方法. 只要服务端返回一个符合指定格式的数据结构,就可以绘制相应的拓扑图. 难度: 中级 示例工程见:  http://download.csdn.net ...

  10. OVS中的key解析

    OVS在处理每条流的时候,先根据每条流生产相应的key,然后根据key匹配相应的流表,根据流表中的action操作来处理每条流,本文对key的结构体进行分析,看看对于一条流会提出那些特征信息.对于ke ...