jQuery

利用jQuery和CSS实现环形进度条

进度条是Web页面中常见的一种组件,早前在《CSS3制作 Progress Bars》一文中介绍了使用CSS3制作水平进度条。但往往我们很多时候需要使用到圆形进度条。那么今天在这篇文章中由@我是霍小惑同学向大家介绍如何使用jQuery和CSS3实现圆形进度条效果。整个教程图文并茂,非常容易理解。在这里非常感谢@我是霍小惑加入w3cplus与大家一起分享。

10个简单有效的方法帮你改善jQuery代码与性能

这是一简短的译文,文章标题就吸引了我,也没有细看就交给Sunnylost同学去译了。译后Sunnylost同学告诉我这篇文章不是十分优秀,后来我看了看,别称不上经典,但对于初学jQuery的同学还是很有帮助的,因此整理后还是发上来,一上让大家参考一下,另一方面不想让Sunnylost花时间译出来的东西就这么沉在我的电脑中。

此篇文章由Sunnylost根据Desi Reuben-Sealey的英文文章原名《10 easy and useful ways to improve your jQuery coding and performance》进行翻译,主要介绍了在写jQuery时的一些改善方法,以及细节注意,从而在编写代码的时候就能改善自己的jQuery代码和相关性能。希望对大家有所帮助。

Tabs with Round Out Borders

前几天藤藤在每一练中写了一个《CSS3制作Twitter信息框》效果,酷似Chrome浏览器的tabs效果:

藤藤每日一练——CSS3制作Twitter信息框

jQuery中.addClass()和.removeClass()

jQuery.addClass()主要用来给匹配的元素增加一个类或多个类名(class名),需要注意的是这种方法只是给匹配的元素增加了类名,这里所说的增加就是在以前的基础上追加类名,新增加的类名并不会代替元素原有的类名。可以使用.addClass()给元素一次添加一个或多个类,如果添加多个类名时,需要在类名之间用空格隔开。如:

jQuery.add()

jQuery中的.add()是用来追加元素的一种方法,.add(expr,[context])把与表达式匹配的元素添加到jQuery对象中。他可以用于连接分别与两个表达式匹配的元素结果集。jQuery API中是这样描述.add()方法:

jQuery制作go to top按钮

每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果。后来在google和baidu搜寻了一下,仔细思考,并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。

我们先来看看效果图吧:

这个效果是“点我加到页面顶部”按钮在页面底部,当然还有一种效果就是这个按钮在页面中间,我就不在示例了。这也是最简单的效果,还有一种效果就是页面一开始不显示这个按钮,当滚动条向下移动时,到一定的距离才显示(也就是垂直滚动条距顶部有一定的距离时这个按钮才显示)。

我总结了几种方法,现在从简单到复杂依次看看几种实现效果的方法:

DEMO一:

这种效果是最原始的,也是最简单的。当页载入时,这个按钮就存在,并固定在页面的底部,页面垂直滚动条离顶部有一定的距离时,点击“点我回到页面顶部”按钮时,页面就会回到顶部。那就一起看看其实现过程吧:

HTML 代码:

返回顶部