这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 螺旋动画效果的具体实例,有需要的朋友可以参考一下
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
- <title>
- Spiral
- </title>
- <script type="text/javascript" src="js/jquery-1.5.js">
- </script>
- </head>
- <body>
- <script type="text/javascript">
- var Spiral;
- var yjq; (function() { yjq = function(name, turns, duration, frame, count, decrease_time) { $('style.enable_remove').remove(); $('[id^=test]').CSS({
- 'position': 'absolute',
- 'width': 10,
- 'height': 10,
- 'top': 300,
- 'left': 300,
- 'background': 'black'
- }); Spiral(name + '1', 600, 300, 300, 300, turns, duration, frame); Spiral(name + '2', 300, 0, 300, 300, turns, duration, frame); Spiral(name + '3', 0, 300, 300, 300, turns, duration, frame); Spiral(name + '4', 300, 600, 300, 300, turns, duration, frame); $('#' + name + '1').css({
- "-webkit-animation": name + "1 " + duration + "ms linear " + count
- }); $('#' + name + '2').css({
- "-webkit-animation": name + "2 " + duration + "ms linear " + count
- }); $('#' + name + '3').css({
- "-webkit-animation": name + "3 " + duration + "ms linear " + count
- }); $('#' + name + '4').css({
- "-webkit-animation": name + "4 " + duration + "ms linear " + count
- });
- var arg = arguments; $("#" + name + "4").one('webkitAnimationEnd',
- function() {
- if (duration <= 0) {
- return;
- } arg.callee(name, turns, duration -= decrease_time, frame, count, decrease_time);
- });
- } Spiral = function(name, w1, h1, w2, h2, N, T, frame) {
- var interval = T / frame; //每帧间隔
- var n; //圈数
- var i = 0;
- var k; //初始象限
- var R = Math.sqrt(Math.pow(w2 - w1, 2) + Math.pow(h2 - h1, 2), 2); //半径
- var style = "@-webkit-keyframes " + name + "{";
- var styleDom = $("<style class='enable_remove'></style>");
- if (w1 > w2 && h1 <= h2) { k = 1;
- } else if (w1 <= w2 && h1 < h2) { k = 2;
- } else if (w1 < w2 && h1 >= h2) { k = 3;
- } else { k = 4;
- }
- for (var t = 0; t < T; t += interval) {
- var t1 = t % (T / N); n = Math.floor(t / (T / N)); x = h2 - R * (1 - t1 / T - n / N) * Math.cos(2 * Math.PI * t1 * N / T + Math.pow( - 1, k) * Math.atan(Math.abs(w2 - w1) / Math.abs(h2 - h1)) + (k > 2 ? 1 : 0) * (k % 2 ? -1 : 1) * Math.PI); y = w2 - R * (1 - t1 / T - n / N) * Math.sin(2 * Math.PI * t1 * N / T + Math.pow( - 1, k) * Math.atan(Math.abs(w2 - w1) / Math.abs(h2 - h1)) + (k > 2 ? 1 : 0) * (k % 2 ? -1 : 1) * Math.PI); style += (i++) * 100 / frame + '%{top:' + x + 'px;left:' + y + 'px;} ';
- } style += '100%{top:' + w2 + 'px;left:' + h2 + 'px;}}'; styleDom.html(style); $("head").append(styleDom);
- };
- })(); $(function() {
- var name = 'test';
- var turns = 5; //旋转圈数
- var duration = 2000; //子动画耗时
- var decrease_time = 100; //每次子动画耗时减少量
- var frame = 1000; //子动画帧数
- var count = 2; //子动画执行次数
- yjq(name, turns, duration, frame, count, decrease_time);
- });
- </script>
- <div id="test1">
- </div>
- <div id="test2">
- </div>
- <div id="test3">
- </div>
- <div id="test4">
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0625/278391.html