Jquery loading效果

前端笔记热度:4,375 ℃71 条吐槽阅读模式

昨天南京下了一场大暴雨,今天天气就特别凉爽,所以又有了折腾的冲动,之前有人问一个小效果,就是点一下暗一下是怎么实现的,其实这个很简单,就一行代码,先放出来吧

$('a').click(function(){ $('body').animate({opacity:'0.5'},700).animate({opacity:'1'},500)})

解释一下:当点击任何一个链接的时候页面就会“关一下灯”,0.7秒后灯再次打开,目的就是减少了一秒多的等待时间,相当于一个小loading吧,有喜欢的朋友可以直接拿去哈 (路过)

今天又加上了一个真正的loading,用的是比较大的类似M8的loading图片,原理就是先让loading图片最先显示,当页面加载完毕的时候用JS控制loading图片消失,基于jquery实现:

<div id="loading"></div> //这段代码放在页面最上方,用来放置loading图片或者是
“正在加载”这种加载性提示文字,最初显示
$("#loading").fadeOut("slow") //这段代码放在页面最下方,用来处理当页面加载完毕loading
图片或者是文字让其消失

其实这些都不是很难,只要把原理搞清楚一些相应的代码就会变得很简单,写代码的时间不过几分钟而已,但是思考如何写代码的时间可能是十倍乃至几十倍,思考很重要,COPY是学习的第一步,但如何思考才是最终学习的目的。

Update:我没有写demo,我希望你能自己扒到代码,本站的所有代码我都没有加密,欢迎大家来扒皮,当然你要自己去其糟粕,至于有没有精华我也不敢说哈。

笔锋一转:
据说今天是牛郎织女鹊桥相会的日子,更是我发工资的日子,哈哈,一个月就这一天最开心啦。还有一件开心的事,就是收到了创享·生活的小礼物,在这里谢谢你拉~~

/*这两天犯了EVA狂热症了*/

相关日志-小站地图为你展开

<<下一篇
上一篇 >>

71 条精彩的吐槽 在《 Jquery loading效果 》

快来吐槽吧

貼張圖 您还可以输入300个字

(鬼脸) (额) (难过) (闷骚) (钱哇) (鄙视) (蛋定) (睡觉) (看看) (生气) (猪头) (汗) (晕) (无语) (无法表达) (微笑) (得意) (开怀) (媚眼) (囧) (嘿嘿) (哼) (哭泣) (不说话)
知识好象砂石下面的泉水,越掘得深泉水越清 X
欢迎光临, 主人暂时不在,一切由我来接待哟~~
N
返回顶部▲ | 想去底部 ▼ | 想评论 X