1,js代码
define(['jquery'],function ($) {
function ScrollTo(opts){
this.opts = $.extend({},ScrollTo.DEFAULT,opts);
this.$el=$("html,body")
}
ScrollTo.prototype.move=function(){
if($(window).scrollTop() != this.opts.dest){
if(!this.$el.is(":animated")){
this.$el.animate({
scrollTop:this.opts.dest
},this.opts.speed);
}
}
}
ScrollTo.prototype.go = function () {
if($(window).scrollTop() != this.opts.dest){
this.$el.scrollTop(this.opts.dest);
}
}
ScrollTo.DEFAULT = {
dest:0,
speed:800
}
return {
ScrollTo:ScrollTo
}
});
define(["jquery","scrollto"],function($,scrollto){
function BackTop(el,opts){
this.opts = $.extend({},BackTop.DEFAULT,opts);
this.$el=$(el);
this.scroll = new scrollto.ScrollTo({
dest:0,
speed:this.opts.speed
});
this._checkPosition();
if(this.opts.mode == "move"){
this.$el.on("click",$.proxy(this._move,this));
}else{
this.$el.on("click",$.proxy(this._go,this));
}
$(window).on("scroll",$.proxy(this._checkPosition,this));
}
BackTop.DEFAULT = {
mode:"move",
pos:$(window).height(),
speed:800
};
BackTop.prototype._move = function(){
this.scroll.move();
}
BackTop.prototype._go = function(){
this.scroll.go();
}
BackTop.prototype._checkPosition = function(){
if($(window).scrollTop() > this.opts.pos){
this.$el.fadeIn();
}else{
this.$el.fadeOut();
}
}
$.fn.extend({
backtop:function(opts){
return this.each(function(){
new BackTop(this,opts);
});
}
});
return {
BackTop:BackTop
}
});
2,使用方式
requirejs.config({
paths:{
jquery:"jquery-1.7.2.min"
}
});
requirejs(["jquery","scroolBar"],function($,scroolBar){
$("#backTop").backtop({
mode:"move"
});
})
分享到:
相关推荐
在现代Web开发中,JavaScript库如jQuery和模块化工具如RequireJS在构建高效、可维护的大型应用中起着至关重要的作用。`jQuery-requirejs`这个压缩包文件集成了这两者,旨在帮助开发者实现更灵活、优化的代码组织和...
RequireJS是一个流行的AMD(Asynchronous Module Definition)规范的实现,它允许我们在浏览器环境中实现异步加载和组织JavaScript模块。本篇文章将深入探讨如何使用RequireJS实现简单的类定义。 首先,了解...
该项目可用于使用SVG,jQuery和RequireJS来启动新网页。示范可以在以下URL上找到GitHub项目页面: : 项目使用jQuery的“ click()”方法将静态创建的SVG项目注册到onclick事件将SVG项目动态附加到DOM并通过jQuery...
3. **模块定义(Module Definition)**: 使用 `define()` 函数定义模块,其中包含模块的依赖和实现。例如: ```javascript define(['jquery'], function($) { // 使用 jQuery 的代码 }); ``` 4. **加载...
适用于 Mac 和 Linux 的简单 Web 项目初始值设定项该脚本生成一个简单的 web 项目初始化,包括 css reset、jquery 和 requirejs。 您可以修改 foo 文件夹以使您的初始化文件夹适应您的需要。如何安装 ? 转到您的主...
jQuery、jQuery 移动和 jQuery UI 在 requirejs 中的实现样板 安装requirejs sudo npm install -g requirejs 安装凉亭 sudo npm install -g bower 在项目目录中创建一个文件:bower.json { "name": "My ...
标题 "ionic+requirejs实现图片懒加载" 描述了一个使用Ionic框架和RequireJS库来创建一个具有图片懒加载功能的移动应用项目。这个项目旨在优化用户体验,特别是在移动设备上,通过延迟加载非可视区域的图片,减少...
AngularJS+RequireJs实现动态加载JS和页面,这是笔者在网上找到的一份方案源码。笔者在这个基础上自己搭建了一个动态加载的方案,具体看这里http://blog.csdn.net/evankaka/article/details/52502776
在本文档中,我们探讨了如何使用AngularJS和RequireJS结合来实现动态加载JavaScript和页面。AngularJS是一个强大的前端框架,用于构建单页应用程序(SPA),而RequireJS则是一个模块化加载器,它有助于管理应用程序...
`define`函数用于定义模块,其参数是一个数组,表示该模块的依赖,接着是回调函数,函数的参数与依赖数组一一对应,这样就实现了依赖注入。 在实际项目中,你可能会有多个模块,比如视图(views)、模型(models)...
想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载。最近都是基于angularjs做开发,所以本文主要围绕angularjs提供的各种机制,探索全面实现...
总结,RequireJS 是一种强大的 JavaScript 模块管理和加载工具,通过 AMD 规范实现了模块化,解决了浏览器端的依赖管理问题。通过学习和熟练掌握 RequireJS,开发者可以构建更加清晰、高效、易于维护的前端应用。
通过`define`函数定义模块,该函数接收两个参数:模块ID(可选)和一个回调函数,回调函数返回模块的接口。 ```javascript define('moduleA', [], function() { var moduleA = { // ... 模块A的代码 }; return ...
在前端开发领域,高效的工作流程和模块化管理是提高生产力的关键。`gulp` 和 `requireJS` 是两个非常...通过 `gulp` 实现文件的处理和打包,通过 `requireJS` 管理模块依赖,两者协同工作,大大提高前端开发的效率。
**SeaJS 和 RequireJS 是两种广泛使用的 JavaScript 模块加载器和依赖管理工具,它们的主要目的是解决 JavaScript 在浏览器端的异步加载和模块化问题。** **SeaJS** SeaJS 是一个轻量级的模块加载器,由中国淘宝...
总之,"requireJS实例Demo" 是一个很好的实践平台,它让我们了解和掌握 RequireJS 如何帮助我们管理和组织 JavaScript 代码,实现模块化开发,提高代码质量和项目效率。通过学习这个实例,你将能够更好地理解 ...
这个"requirejs demo"应该包含了一个使用RequireJS的示例项目,用于演示如何配置和使用RequireJS来优化前端开发。 RequireJS 的核心概念有以下几点: 1. **模块化**:RequireJS 将JavaScript代码分解为独立的模块...
RequireJS 是一个 JavaScript 模块加载器和打包工具,它使得在浏览器环境中可以实现模块化开发,解决了传统 JavaScript 文件依赖关系混乱的问题。本篇文章将对 RequireJS 的基本概念、使用方法及重要特性进行深入...
定义模块是通过 `define` 函数完成的,它接收两个参数:模块名(可选)和依赖(数组),然后是一个回调函数,该函数内部实现了模块的功能: ```javascript define('myModule', ['jquery', 'underscore'], function...
**RequireJS** 则是一个JavaScript模块加载器和打包工具,它遵循AMD(Asynchronous Module Definition)规范,使得JavaScript可以实现异步模块加载,从而解决了大型项目中代码的组织和依赖管理问题。通过RequireJS,...