spin.min.js下载
I think it's safe to say the days of using images to provide the "small touches" are over. We can now safely create gradients, drop shadows, rounded corners, and scaled, rotated, transformed animations. It seems we've now moved on to replacing more complex effects, like spinner images. A great project called spin.js has surfaced, allowing developers to create CSS-powered spinners where keyframes are available, and uses VML as a fallback for Internet Explorer. spin.js is very customizable and is built with pure JavaScript so that no toolkit is required (though a jQuery plugin is available within the site demo). Let's have a look at how to use and customize spin.js!
我认为可以肯定地说,使用图像提供“小细节”的时代已经结束。 现在,我们可以安全地创建渐变 , 阴影 , 圆角以及缩放,旋转,变形的动画 。 看来我们现在已着手替换更复杂的效果,例如微调器图像。 一个名为spin.js的伟大项目已经浮出水面,它允许开发人员在可用关键帧的情况下创建由CSS驱动的微调器,并将VML用作Internet Explorer的后备。 spin.js是非常可定制的,并且使用纯JavaScript构建,因此不需要任何工具包(尽管站点演示中提供了jQuery插件)。 让我们看看如何使用和自定义spin.js!
View Demo 观看演示I promised above that spin.js allows for very customizable spinners and I wasn't lying; spin.js allows you to customize a spinner's number of lines, length, width, line radius, trail, spin speed, shadow, and color. A simple spin.js usage looks like:
我在上面承诺,spin.js允许非常可定制的微调器,我没有说谎。 spin.js允许您自定义微调器的线数,长度,宽度,线半径,轨迹,旋转速度,阴影和颜色。 一个简单的spin.js用法如下所示:
// Create the Spinner with options var spinner = new Spinner({ lines: 12, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 10, // The radius of the inner circle color: '#000', // #rbg or #rrggbb speed: 1, // Rounds per second trail: 100, // Afterglow percentage shadow: true // Whether to render a shadow }).spin(document.getElementById("ajaxContentHolder")); // Place in DOM node called "ajaxContentHolder"The Spinner instance receives the options and the spin method accepts a DOM node which should host the generated spinner. The advantage of providing a DOM node to the show method is that you can use the same Spinner instance in multiple spots by simply giving a different DOM node each time. With the expansive set of options, you can create a spinner of any size, speed, and color!
Spinner实例接收选项,并且spin方法接受应承载所生成的Spinner的DOM节点。 向show方法提供DOM节点的优点是,您可以通过每次简单地指定一个不同的DOM节点,在多个位置使用同一Spinner实例。 使用广泛的选项集,您可以创建任何大小,速度和颜色的微调器!
View Demo 观看演示spin.js is a real work of art -- big props to Felix Gnass for his excellent work. Spinners will only grow in importance while websites become more AJAX-drive, so a customizable JavaScript alternative to imagery is hugely helpful. What image replacement technique should we look for next?
spin.js是一件真正的艺术品-Felix Gnass的出色作品的重要道具。 旋转器的重要性只会随着网站变得越来越受AJAX驱动而变得越来越重要,因此,可定制JavaScript替代图像非常有用。 接下来我们应该寻找什么图像替换技术?
翻译自: https://davidwalsh.name/spin-js
spin.min.js下载
相关资源:JS菊花特效,spin