0%

2018年

JS 切换器

JS 切换器

制作一个切换器,当用户点击后对应的元素背景色会发生改变,然后再次点击又会变成另一种背景色,然后无限循环。以前的时候我们做切换器是一个事件执行完毕后创建下一个事件,然后删除本次事件,然后两个事件互相调用,但是对于一些简单的设置就有点麻烦了,所以这里制作一个简单的切换器。首先就...

JS 展示菜单

JS 展示菜单

根据传统,我们先修复一下上一章的bug。有两个bug:当同步动画和队列动画同时存在的时候,队列动画会触发多次。如果同步动画中,两个值或者多个值相差太多就无法完整运行。原因:主要原因是因为我们在定时器中使用了for语句,然后是同步动画的时候,假设是两个动画要同时运行,那么就会...

JS 同步动画

JS 同步动画

先修缮一下百度分享栏的自动居住问题。之前是每次刷新会自动居中,这里我们要改为当用户滑动时也会自动居中。addEvent(window,'scroll',function(){ $('#share').css('top',getScroll().height + (g...

JS 增强弹窗  队列动画

JS 增强弹窗 队列动画

预览图:之前在登录框弹窗时我们做了一个遮罩层,当时的遮罩层是通过js创建了,但是如果要加上动画效果,那么你创建的话就十分不方便,所以这里直接在html上建了一个div元素,然后通过js设置css。HTML部分:<div class=""> ...

JS 制作百度分享栏

JS 制作百度分享栏

搞这个本来是一帆风顺的,但是js就是出了一个问题,单向弹出的时候没有问题,但是返回原来位置的时候就会一直卡在某个位置然后前后移动,头疼,找了半天才发现,之前的动画封装有一个问题。创建超时调用之前,我们做了一个clearInterval(window.timer);的操作,这...

JS 动画之透明度

JS 动画之透明度

使用同一个封装的动画函数,当我们传入‘o’的时候,表示要设置透明度,但是ie8以下透明度是使用filter:alpha(opacity=xxx);来实现的,所以这里要对ie做个兼容。首先对传参设置以下:$('#pox').click(function() { $('...

JS 动画初探(下)

JS 动画初探(下)

上一章我们讲在元素移动到end位置的时候,会有两个动作同时产生,一个是正常的移动element.style[attr] = parseInt(getStyle(element,attr)) + step + 'px';一个是if判断如果当前的位置已经大于或者等于end的时候...

JS 动画初探(上)

JS 动画初探(上)

我们先来做一个简单的动画,让一个div横向移动。既然是要横向移动,我们就要对这个div的left属性进行设置,那么这里就可以使用间歇调用的方式不断的去增加left的值,然后到了某一个指定的位置时停止。html部分:<div id="box">...

JS 封装库调试封装

JS 封装库调试封装

DOM加载已经做好了,我们需要将他封装到Base中去,然后调用的时候直接通过$(function(){})将需要在dom解析后运行的代码放入圆括号函数中。封装到Base基础库中function Base(args) { this.arr = []; if(t...