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"
});
})
分享到:
相关推荐
requireJs, 使用此工具可以根据需要动态加载js脚本文件,在构建复杂的Web应用时尤其有用。附件包含此工具和官方的例子,于2012-11-7下载自requireJs官方网站。
RequireJs-教程 一些使用 VS2013、JQUERY 和 RequireJS 编写的源代码
该项目可用于使用SVG,jQuery和RequireJS来启动新网页。示范可以在以下URL上找到GitHub项目页面: : 项目使用jQuery的“ click()”方法将静态创建的SVG项目注册到onclick事件将SVG项目动态附加到DOM并通过jQuery...
requirejs实现的简单的类定义,需要仔细看js文件的代码才能理解哦,写的比较简单,不想要分来着,但是没有0分下载,只能选个一分了
适用于 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 ...
AngularJS+RequireJs实现动态加载JS和页面的方案研究.pdf
AngularJS+RequireJs实现动态加载JS和页面,这是笔者在网上找到的一份方案源码。笔者在这个基础上自己搭建了一个动态加载的方案,具体看这里http://blog.csdn.net/evankaka/article/details/52502776
使用gulp和requirejs快速构建一个前端项目
简单的静态页面构造函数,包含 gulp、jade、less、bower、require.js 和 jQuery。 入门 什么是约曼? 套路问题。 这不是一回事。 是这个人: 基本上,他戴着大礼帽,住在你的电脑里,等着你告诉他你想创建什么样的...
requirejs demo
完整的项目例子用两种js实现图片懒加载
不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用。 下面就循序渐进的讲解一下我遇到的问题,以及解决的办法。 关于AMD和CMD的理解 AMD(异步模块定义)的典型就是requirejs,而CMD(通用模块...
requirejs_Demo演示,通过实例,展示完整的requirejs在项目中的应用。
使用backbonejs、firebase/backbonefire、jquery mobile和requirejs的单页应用程序框架。 这个框架使用了最好的开源 Javascript 库和框架,如下所示: 框架/库 版本 jQuery 2.1.1 jQuery 移动版 1.4.5 主干JS ...
requireJS框架的初学者完整例子,下载后在浏览器运行index.html即可
RequireJS 和RequireJS css
requireJS实例Demo
RequireJS