发表于: 2016-08-11 23:14:20
0 2329
今天完成的事:学习sass的使用,完成了一个侧边栏能够点击返回顶部的一个效果
明天要做的事:继续补充原生js的基础。
收货
完成的效果如下:
其中的话分别使用了第一是雪碧图移动背景完成动画展示的一个思路
还有一种是手动添加文字效果以及去使用font-awsome图标库的图标完成该效果
其中需要注意的是点击回到顶部的制作需要两个步骤
第一是写返回顶部的操作,使用css3的动画方法
第二是要监听滑动的范围,当在第一个页面内的话隐藏原来的图标
在第一个页面以外的地方显示回到顶部的箭头
define(['jquery'],function($){
function ScrollTo(opts){
this.opts = $.extend({},ScrollTo.DEFAULTS,opts)
//extend(a,b,c)方法是将 用户输入的c覆盖b再将b传入a 用opts属性来保存值
this.$el=$('html,body');
}
ScrollTo.DEFAULTS={
dest:0,
speed:800
//这是当用户没有输入值时默认的方法
};
ScrollTo.prototype.move=function(){
var opts=this.opts;
console.log(this);
//增加一个判断的条件
if($(window).scrollTop()!=this.opts.dest){
if(!this.$el.is(':animated')){
this.$el.animate({
scrollTop:opts.dest
},opts.speed);
}
}
};
ScrollTo.prototype.go=function(){
this.$el.scrollTop(this.opts.dest);
};
return{
ScrollTO : ScrollTo
};
});
//创建一个构造函数 这样能够体现面向对象的思想
// 构造函数的命名区别于普通函数 方法名字 首字母要去大写
评论