提交 85ed00ad 编写于 作者: wuxia2001's avatar wuxia2001

Revert "第一次提交"

This reverts commit a1af92ef.
上级 a1af92ef
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0027)http://itzoo.info/love.html -->
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Love</title>
<link type="text/css" rel="stylesheet" href="./Love_files/default.css">
<script type="text/javascript" src="./Love_files/jquery.min.js"></script>
<script type="text/javascript" src="./Love_files/jscex.min.js"></script>
<script type="text/javascript" src="./Love_files/jscex-parser.js"></script>
<script type="text/javascript" src="./Love_files/jscex-jit.js"></script>
<script type="text/javascript" src="./Love_files/jscex-builderbase.min.js"></script>
<script type="text/javascript" src="./Love_files/jscex-async.min.js"></script>
<script type="text/javascript" src="./Love_files/jscex-async-powerpack.min.js"></script>
<script type="text/javascript" src="./Love_files/functions.js" charset="utf-8"></script>
<script type="text/javascript" src="./Love_files/love.js" charset="utf-8"></script>
</head>
<body>
<div id="main">
<div id="error">亲,您使用的浏览器无法支持即将显示的内容,请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器哟~</div>
<div id="wrap">
<div id="text">
<div id="code">
<span class="say">我的爱人,我会牵着你的手,走到满头白发的那一天,</span><br>
<span class="say">我会守护你生命里的精彩,并陪伴你一路精彩下去。</span><br>
<span class="say">你的幸福快乐,是我一生的追求。</span><br>
<span class="say">我会每一天带着笑脸,和你说早安,</span><br>
<span class="say">我会每一晚与你道声晚安再入梦乡,</span><br>
<span class="say">我会带你去所有你想去的地方,</span><br>
<span class="say">陪你闹看你笑</span><br>
<span class="say">历经你生命中所有的点点滴滴。</span><br>
<span class="say">我期待这一生与你一起走过,</span><br>
<span class="say">我期待与你慢慢变老</span><br>
<span class="say">等我们老到哪儿也去不了,</span><br>
<span class="say">还能满载着一生的幸福快乐 !</span><br>
<br>
<span class="say">我会为我们的未来撑起一片天空,</span><br>
<span class="say">为我们的将来担负起一生的责任,</span><br>
<span class="say">愿意为你去做每一件能让你开心快乐的事。</span><br>
<span class="say">所有我们经历的点点滴滴,</span><br>
<span class="say">都是我们一辈子最美的回忆。</span><br>
<span class="say">我愿意爱你直到老去!</span><br>
<br>
<span class="say"><span class="space"></span> -- Yours, wuxia2001.</span>
</div>
</div>
<div id="clock-box">
<a href="http://weibo.com/pangtu" target="_blank">@wuxia2001</a><a href="http://weibo.com/u/2574226272" target="_blank">@月亮女</a> 在一起的
<div id="clock"></div>
</div>
<canvas id="canvas" width="1100" height="680"></canvas>
</div>
<audio src="love.mp3" autoplay="autoplay"></audio>
</div>
<script>
</script>
<script>
(function(){
var canvas = $('#canvas');
if (!canvas[0].getContext) {
$("#error").show();
return false;
}
var width = canvas.width();
var height = canvas.height();
canvas.attr("width", width);
canvas.attr("height", height);
var opts = {
seed: {
x: width / 2 - 20,
color: "rgb(190, 26, 37)",
scale: 2
},
branch: [
[535, 680, 570, 250, 500, 200, 30, 100, [
[540, 500, 455, 417, 340, 400, 13, 100, [
[450, 435, 434, 430, 394, 395, 2, 40]
]],
[550, 445, 600, 356, 680, 345, 12, 100, [
[578, 400, 648, 409, 661, 426, 3, 80]
]],
[539, 281, 537, 248, 534, 217, 3, 40],
[546, 397, 413, 247, 328, 244, 9, 80, [
[427, 286, 383, 253, 371, 205, 2, 40],
[498, 345, 435, 315, 395, 330, 4, 60]
]],
[546, 357, 608, 252, 678, 221, 6, 100, [
[590, 293, 646, 277, 648, 271, 2, 80]
]]
]]
],
bloom: {
num: 700,
width: 1080,
height: 650,
},
footer: {
width: 1200,
height: 5,
speed: 10,
}
}
var tree = new Tree(canvas[0], width, height, opts);
var seed = tree.seed;
var foot = tree.footer;
var hold = 1;
canvas.click(function(e) {
var offset = canvas.offset(), x, y;
x = e.pageX - offset.left;
y = e.pageY - offset.top;
if (seed.hover(x, y)) {
hold = 0;
canvas.unbind("click");
canvas.unbind("mousemove");
canvas.removeClass('hand');
}
}).mousemove(function(e){
var offset = canvas.offset(), x, y;
x = e.pageX - offset.left;
y = e.pageY - offset.top;
canvas.toggleClass('hand', seed.hover(x, y));
});
var seedAnimate = eval(Jscex.compile("async", function () {
seed.draw();
while (hold) {
$await(Jscex.Async.sleep(10));
}
while (seed.canScale()) {
seed.scale(0.95);
$await(Jscex.Async.sleep(10));
}
while (seed.canMove()) {
seed.move(0, 2);
foot.draw();
$await(Jscex.Async.sleep(10));
}
}));
var growAnimate = eval(Jscex.compile("async", function () {
do {
tree.grow();
$await(Jscex.Async.sleep(10));
} while (tree.canGrow());
}));
var flowAnimate = eval(Jscex.compile("async", function () {
do {
tree.flower(2);
$await(Jscex.Async.sleep(10));
} while (tree.canFlower());
}));
var moveAnimate = eval(Jscex.compile("async", function () {
tree.snapshot("p1", 240, 0, 610, 680);
while (tree.move("p1", 500, 0)) {
foot.draw();
$await(Jscex.Async.sleep(10));
}
foot.draw();
tree.snapshot("p2", 500, 0, 610, 680);
// 会有闪烁不得意这样做, (>﹏<)
canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
canvas.css("background", "#ffe");
$await(Jscex.Async.sleep(300));
canvas.css("background", "none");
}));
var jumpAnimate = eval(Jscex.compile("async", function () {
var ctx = tree.ctx;
while (true) {
tree.ctx.clearRect(0, 0, width, height);
tree.jump();
foot.draw();
$await(Jscex.Async.sleep(25));
}
}));
var textAnimate = eval(Jscex.compile("async", function () {
var together = new Date();
together.setFullYear(2010, 5, 8);
together.setHours(20);
together.setMinutes(20);
together.setSeconds(0);
together.setMilliseconds(0);
$("#code").show().typewriter();
$("#clock-box").fadeIn(500);
while (true) {
timeElapse(together);
$await(Jscex.Async.sleep(1000));
}
}));
var runAsync = eval(Jscex.compile("async", function () {
$await(seedAnimate());
$await(growAnimate());
$await(flowAnimate());
$await(moveAnimate());
textAnimate().start();
$await(jumpAnimate());
}));
runAsync().start();
})();
</script>
</body></html>
\ No newline at end of file
body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'微软雅黑','宋体',sans-serif;color:#231F20;overflow:auto}
a {color:#000;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;}
#text{width:400px;height:425px;left:60px;top:80px;position:absolute;}
#code{display:none;font-size:16px;}
#clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;}
#clock-box a {font-size:28px;text-decoration:none;}
#clock{margin-left:48px;}
#clock .digit {font-size:64px;}
#canvas{margin:0 auto;width:1100px;height:680px;}
#error{margin:0 auto;text-align:center;margin-top:60px;display:none;}
.hand{cursor:pointer;}
.say{margin-left:5px;}
.space{margin-right:150px;}
/*
* http://love.hackerzhou.me
*/
// variables
var $win = $(window);
var clientWidth = $win.width();
var clientHeight = $win.height();
$(window).resize(function() {
var newWidth = $win.width();
var newHeight = $win.height();
if (newWidth != clientWidth && newHeight != clientHeight) {
location.replace(location);
}
});
(function($) {
$.fn.typewriter = function() {
this.each(function() {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
});
return this;
};
})(jQuery);
function timeElapse(date){
var current = Date();
var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
var days = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds / 3600);
if (hours < 10) {
hours = "0" + hours;
}
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = seconds % 60;
if (seconds < 10) {
seconds = "0" + seconds;
}
var result = "第 <span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 小时 <span class=\"digit\">" + minutes + "</span> 分钟 <span class=\"digit\">" + seconds + "</span> 秒";
$("#clock").html(result);
}
此差异已折叠。
(function(){var m=function(j){if(j.length<=1)return null;for(var f=[],h=1;h<j.length;h++)f.push(j[h]);return f},n=function(j,f){for(var h=[],k=0;k<j.length;k++)h.push(j[k]);for(;h.length<f;)h.push(void 0);return h},l=function(j){if(!j.modules["async-powerpack"]){if(!j.modules.async)throw Error('Missing essential components, please initialize "jscex-async" module first.');var f=j.Async,h=f.Task,k=f.CanceledError;f.sleep=function(a,b){return h.create(function(c){b&&b.isCancellationRequested&&c.complete("failure",
new k);var e,d;b&&(d=function(){clearTimeout(e);c.complete("failure",new k)});e=setTimeout(function(){b&&b.unregister(d);c.complete("success")},a);b&&b.register(d)})};f.onEvent=function(a,b,c){return h.create(function(e){c&&c.isCancellationRequested&&e.complete("failure",new k);var d=function(){a.removeEventListener?a.removeEventListener(b,g):a.removeListener?a.removeListener(b,g):a.detachEvent(b,g)},g,i;c&&(i=function(){d();e.complete("failure",new k)});g=function(a){c&&c.unregister(i);d();e.complete("success",
a)};a.addEventListener?a.addEventListener(b,g):a.addListener?a.addListener(b,g):a.attachEvent(b,g);c&&c.register(i)})};h.whenAll=function(){var a={},b;if(arguments.length==1){var c=arguments[0];h.isTask(c)?(a[0]=c,b=!0):(a=c,b=Object.prototype.toString.call(a)==="[object Array]")}else{for(c=0;c<arguments.length;c++)a[c]=arguments[c];b=!0}return h.create(function(e){var d={},g;for(g in a)if(a.hasOwnProperty(g)){var i=a[g];h.isTask(i)&&(d[i.id]=g)}for(var c in d)i=a[d[c]],i.status=="ready"&&i.start();
for(c in d)if(i=a[d[c]],i.error){e.complete("failure",i.error);return}var f=b?[]:{},j=function(b){if(b.error){for(var c in d)a[d[c]].removeEventListener("complete",j);e.complete("failure",b.error)}else f[d[b.id]]=b.result,delete d[b.id],k--,k==0&&e.complete("success",f)},k=0;for(c in d)g=d[c],i=a[g],i.status=="succeeded"?(f[g]=i.result,delete d[i.id]):(k++,i.addEventListener("complete",j));k==0&&e.complete("success",f)})};h.whenAny=function(){var a={};if(arguments.length==1){var b=arguments[0];h.isTask(b)?
a[0]=b:a=b}else for(b=0;b<arguments.length;b++)a[b]=arguments[b];return h.create(function(b){var e={},d;for(d in a)if(a.hasOwnProperty(d)){var g=a[d];h.isTask(g)&&(e[g.id]=d)}for(var i in e)g=a[e[i]],g.status=="ready"&&g.start();for(i in e)if(d=e[i],g=a[d],g.error||g.status=="succeeded"){b.complete("success",{key:d,task:g});return}var f=function(d){for(var g in e)a[e[g]].removeEventListener("complete",f);b.complete("success",{key:e[d.id],task:d})};for(i in e)a[e[i]].addEventListener("complete",f)})};
if(!f.Jscexify)f.Jscexify={};f=f.Jscexify;f.fromStandard=function(a){var b=m(arguments);return function(){var c=this,e=n(arguments,a.length-1);return h.create(function(d){e.push(function(a,c){if(a)d.complete("failure",a);else if(b){for(var e={},f=0;f<b.length;f++)e[b[f]]=arguments[f+1];return d.complete("success",e)}else d.complete("success",c)});a.apply(c,e)})}};f.fromCallback=function(a){var b=m(arguments);return function(){var c=this,e=n(arguments,a.length-1);return h.create(function(d){e.push(function(a){if(b){for(var c=
{},e=0;e<b.length;e++)c[b[e]]=arguments[e];d.complete("success",c)}else d.complete("success",a)});a.apply(c,e)})}};j.modules["async-powerpack"]=!0}},o=typeof define==="function"&&!define.amd,p=typeof require==="function"&&typeof define==="function"&&define.amd;if(typeof require==="function"&&typeof module!=="undefined"&&module.exports)module.exports.init=l;else if(o)define("jscex-async-powerpack",["jscex-async"],function(j,f,h){h.exports.init=l});else if(p)define("jscex-async-powerpack",["jscex-async"],
function(){return{init:l}});else{if(typeof Jscex==="undefined")throw Error('Missing the root object, please load "jscex" module first.');l(Jscex)}})();
(function(){var k=function(){};k.prototype={isCancellation:!0,message:"The task has been cancelled."};typeof __jscex__async__taskIdSeed==="undefined"&&(__jscex__async__taskIdSeed=0);var l=function(b){return typeof b.start==="function"&&typeof b.addEventListener==="function"&&typeof b.removeEventListener==="function"&&typeof b.complete==="function"},j=function(b){if(!b.modules.async){var d=function(){};d.prototype={register:function(a){this.isCancellationRequested&&a();if(!this._handlers)this._handlers=
[];this._handlers.push(a)},unregister:function(a){this._handlers&&(a=this._handlers.indexOf(a),a>=0&&this._handlers.splice(a,1))},cancel:function(){if(!this.isCancellationRequested){this.isCancellationRequested=!0;var a=this._handlers;delete this._handlers;for(var f=0;f<a.length;f++)try{a[f]()}catch(c){b.logger.warn("[WARNING] Cancellation handler threw an error: "+c)}}},throwIfCancellationRequested:function(){if(this.isCancellationRequested)throw new k;}};var e=function(a){this.id=++__jscex__async__taskIdSeed;
this._delegate=a;this._listeners={};this.status="ready"};e.prototype={start:function(){if(this.status!="ready")throw Error('Task can only be started in "ready" status.');this.status="running";this._delegate(this)},complete:function(a,f){if(this.status!="running")throw Error('The "complete" method can only be called in "running" status.');var c=this._listeners;delete this._listeners;if(a=="success")this.result=f,this.status="succeeded",this._notify("success",c.success);else if(a=="failure")this.error=
f,this.status=f.isCancellation?"canceled":"faulted",this._notify("failure",c.failure);else throw Error("Unsupported type: "+a);this._notify("complete",c.complete);this.error&&!c.failure&&!c.complete&&b.logger.warn("[WARNING] An unhandled error occurred: "+this.error)},_notify:function(a,f){if(f)for(var c=0;c<f.length;c++)try{f[c](this)}catch(i){b.logger.warn("[WARNING] The task's "+a+" listener threw an error: "+i)}},addEventListener:function(a,b){this._listeners&&(this._listeners[a]||(this._listeners[a]=
[]),this._listeners[a].push(b))},removeEventListener:function(a,b){if(this._listeners){var c=this._listeners[a];if(c){var i=c.indexOf(b);i>=0&&c.splice(i,1)}}}};e.create=function(a){return new e(a)};e.isTask=l;var h=function(){};h.prototype={Start:function(a,b){return e.create(function(c){b.next(a,function(a,b){if(a=="normal"||a=="return")c.complete("success",b);else if(a=="throw")c.complete("failure",b);else throw Error("Unsupported type: "+a);})})},Bind:function(a,b){return{next:function(c,e){var d=
function(a){if(a.error)e("throw",a.error);else{var d;try{d=b.call(c,a.result)}catch(h){e("throw",h);return}d.next(c,e)}};a.status=="ready"?(a.addEventListener("complete",d),a.start()):a.status=="running"?a.addEventListener("complete",d):d(a)}}}};for(var g in b.BuilderBase.prototype)h.prototype[g]=b.BuilderBase.prototype[g];if(!b.Async)b.Async={};g=b.Async;g.CancellationToken=d;g.CanceledError=k;g.Task=e;g.AsyncBuilder=h;if(!b.builders)b.builders={};b.binders.async="$await";b.builders.async=new h;
b.modules.async=!0}},m=typeof define==="function"&&!define.amd,n=typeof require==="function"&&typeof define==="function"&&define.amd;if(typeof require==="function"&&typeof module!=="undefined"&&module.exports)module.exports.init=function(b){if(!b.modules.builderbase){if(typeof __dirname==="string")try{require.paths.unshift(__dirname)}catch(d){try{module.paths.unshift(__dirname)}catch(e){}}require("jscex-builderbase").init(b)}j(b)};else if(m)define("jscex-async",["jscex-builderbase"],function(b,d,
e){e.exports.init=function(d){d.modules.builderbase||b("jscex-builderbase").init(d);j(d)}});else if(n)define("jscex-async",["jscex-builderbase"],function(b){return{init:function(d){d.modules.builderbase||b.init(d);j(d)}}});else{if(typeof Jscex==="undefined")throw Error('Missing the root object, please load "jscex" module first.');if(!Jscex.modules.builderbase)throw Error('Missing essential components, please initialize "builderbase" module first.');j(Jscex)}})();
(function(){var j=function(){};j.prototype={Loop:function(b,c,a,d){return{next:function(e,i){var f=function(b){a.next(e,function(a,e){if(a=="normal"||a=="continue")g(b);else if(a=="throw"||a=="return")i(a,e);else if(a=="break")i("normal");else throw Error('Invalid type for "Loop": '+a);})},g=function(a){try{c&&!a&&c.call(e),!b||b.call(e)?f(!1):i("normal")}catch(d){i("throw",d)}};d?f(!0):g(!0)}}},Delay:function(b){return{next:function(c,a){try{b.call(c).next(c,a)}catch(d){a("throw",d)}}}},Combine:function(b,
c){return{next:function(a,d){b.next(a,function(b,i,f){if(b=="normal")try{c.next(a,d)}catch(g){d("throw",g)}else d(b,i,f)})}}},Return:function(b){return{next:function(c,a){a("return",b)}}},Normal:function(){return{next:function(b,c){c("normal")}}},Break:function(){return{next:function(b,c){c("break")}}},Continue:function(){return{next:function(b,c){c("continue")}}},Throw:function(b){return{next:function(c,a){a("throw",b)}}},Try:function(b,c,a){return{next:function(d,e){b.next(d,function(b,f,g){if(b!=
"throw"||!c)a?a.next(d,function(a,c,d){a=="normal"?e(b,f,g):e(a,c,d)}):e(b,f,g);else if(c){var h;try{h=c.call(d,f)}catch(j){a?a.next(d,function(a,b,c){a=="normal"?e("throw",j):e(a,b,c)}):e("throw",j)}h&&h.next(d,function(b,c,f){b=="throw"?a?a.next(d,function(a,d,g){a=="normal"?e(b,c,f):e(a,d,g)}):e(b,c,f):a?a.next(d,function(a,d,g){a=="normal"?e(b,c,f):e(a,d,g)}):e(b,c,f)})}else a.next(d,function(a,c,d){a=="normal"?e(b,f,g):e(a,c,d)})})}}}};var h=function(b){if(!b.modules)b.modules={};if(!b.modules.builderbase)b.modules.builderbase=
!0,b.BuilderBase=j},k=typeof define==="function"&&!define.amd,l=typeof require==="function"&&typeof define==="function"&&define.amd;if(typeof require==="function"&&typeof module!=="undefined"&&module.exports)module.exports.init=h;else if(k)define("jscex-builderbase",function(b,c,a){a.exports.init=h});else if(l)define("jscex-builderbase",function(){return{init:h}});else{if(typeof Jscex==="undefined")throw Error('Missing the root object, please load "jscex" module first.');h(Jscex)}})();
此差异已折叠。
此差异已折叠。
(function(){var b={DEBUG:1,INFO:2,WARN:3,ERROR:4},d=function(){this.level=b.WARN};d.prototype={log:function(a){try{console.log(a)}catch(b){}},debug:function(a){this.level<=b.DEBUG&&this.log(a)},info:function(a){this.level<=b.INFO&&this.log(a)},warn:function(a){this.level<=b.WARN&&this.log(a)},error:function(a){this.level<=b.ERROR&&this.log(a)}};var e=function(a){var b=[],c;for(c in a)b.push(c);return b},c=function(a){a._forInKeys=e;a.Logging={Logger:d,Level:b};a.logger=new d;a.modules={};a.binders=
{};a.builders={}},f=typeof define==="function"&&!define.amd,g=typeof require==="function"&&typeof define==="function"&&define.amd;typeof require==="function"&&typeof module!=="undefined"&&module.exports?c(module.exports):f?define("jscex",function(a,b,d){c(d.exports)}):g?define("jscex",function(){var a={};c(a);return a}):(typeof Jscex=="undefined"&&(Jscex={}),c(Jscex))})();
(function(window){
function random(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
function bezier(cp, t) {
var p1 = cp[0].mul((1 - t) * (1 - t));
var p2 = cp[1].mul(2 * t * (1 - t));
var p3 = cp[2].mul(t * t);
return p1.add(p2).add(p3);
}
function inheart(x, y, r) {
// x^2+(y-(x^2)^(1/3))^2 = 1
// http://www.wolframalpha.com/input/?i=x%5E2%2B%28y-%28x%5E2%29%5E%281%2F3%29%29%5E2+%3D+1
var z = ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) - (x / r) * (x / r) * (y / r) * (y / r) * (y / r);
return z < 0;
}
Point = function(x, y) {
this.x = x || 0;
this.y = y || 0;
}
Point.prototype = {
clone: function() {
return new Point(this.x, this.y);
},
add: function(o) {
p = this.clone();
p.x += o.x;
p.y += o.y;
return p;
},
sub: function(o) {
p = this.clone();
p.x -= o.x;
p.y -= o.y;
return p;
},
div: function(n) {
p = this.clone();
p.x /= n;
p.y /= n;
return p;
},
mul: function(n) {
p = this.clone();
p.x *= n;
p.y *= n;
return p;
}
}
Heart = function() {
// x = 16 sin^3 t
// y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
// http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
var points = [], x, y, t;
for (var i = 10; i < 30; i += 0.2) {
t = i / Math.PI;
x = 16 * Math.pow(Math.sin(t), 3);
y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
points.push(new Point(x, y));
}
this.points = points;
this.length = points.length;
}
Heart.prototype = {
get: function(i, scale) {
return this.points[i].mul(scale || 1);
}
}
Seed = function(tree, point, scale, color) {
this.tree = tree;
var scale = scale || 1
var color = color || '#FF0000';
this.heart = {
point : point,
scale : scale,
color : color,
figure : new Heart(),
}
this.cirle = {
point : point,
scale : scale,
color : color,
radius : 5,
}
}
Seed.prototype = {
draw: function() {
this.drawHeart();
this.drawText();
},
addPosition: function(x, y) {
this.cirle.point = this.cirle.point.add(new Point(x, y));
},
canMove: function() {
return this.cirle.point.y < (this.tree.height + 20);
},
move: function(x, y) {
this.clear();
this.drawCirle();
this.addPosition(x, y);
},
canScale: function() {
return this.heart.scale > 0.2;
},
setHeartScale: function(scale) {
this.heart.scale *= scale;
},
scale: function(scale) {
this.clear();
this.drawCirle();
this.drawHeart();
this.setHeartScale(scale);
},
drawHeart: function() {
var ctx = this.tree.ctx, heart = this.heart;
var point = heart.point, color = heart.color,
scale = heart.scale;
ctx.save();
ctx.fillStyle = color;
ctx.translate(point.x, point.y);
ctx.beginPath();
ctx.moveTo(0, 0);
for (var i = 0; i < heart.figure.length; i++) {
var p = heart.figure.get(i, scale);
ctx.lineTo(p.x, -p.y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
},
drawCirle: function() {
var ctx = this.tree.ctx, cirle = this.cirle;
var point = cirle.point, color = cirle.color,
scale = cirle.scale, radius = cirle.radius;
ctx.save();
ctx.fillStyle = color;
ctx.translate(point.x, point.y);
ctx.scale(scale, scale);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
},
drawText: function() {
var ctx = this.tree.ctx, heart = this.heart;
var point = heart.point, color = heart.color,
scale = heart.scale;
ctx.save();
ctx.strokeStyle = color;
ctx.fillStyle = color;
ctx.translate(point.x, point.y);
ctx.scale(scale, scale);
ctx.moveTo(0, 0);
ctx.lineTo(15, 15);
ctx.lineTo(60, 15);
ctx.stroke();
ctx.moveTo(0, 0);
ctx.scale(0.75, 0.75);
ctx.font = "12px 微软雅黑,Verdana"; // 字号肿么没有用? (ˉ(∞)ˉ)
ctx.fillText("click here", 23, 16);
ctx.restore();
},
clear: function() {
var ctx = this.tree.ctx, cirle = this.cirle;
var point = cirle.point, scale = cirle.scale, radius = 26;
var w = h = (radius * scale);
ctx.clearRect(point.x - w, point.y - h, 4 * w, 4 * h);
},
hover: function(x, y) {
var ctx = this.tree.ctx;
var pixel = ctx.getImageData(x, y, 1, 1);
return pixel.data[3] == 255
}
}
Footer = function(tree, width, height, speed) {
this.tree = tree;
this.point = new Point(tree.seed.heart.point.x, tree.height - height / 2);
this.width = width;
this.height = height;
this.speed = speed || 2;
this.length = 0;
}
Footer.prototype = {
draw: function() {
var ctx = this.tree.ctx, point = this.point;
var len = this.length / 2;
ctx.save();
ctx.strokeStyle = 'rgb(35, 31, 32)';
ctx.lineWidth = this.height;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.translate(point.x, point.y);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(len, 0);
ctx.lineTo(-len, 0);
ctx.stroke();
ctx.restore();
if (this.length < this.width) {
this.length += this.speed;
}
}
}
Tree = function(canvas, width, height, opt) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.width = width;
this.height = height;
this.opt = opt || {};
this.record = {};
this.initSeed();
this.initFooter();
this.initBranch();
this.initBloom();
}
Tree.prototype = {
initSeed: function() {
var seed = this.opt.seed || {};
var x = seed.x || this.width / 2;
var y = seed.y || this.height / 2;
var point = new Point(x, y);
var color = seed.color || '#FF0000';
var scale = seed.scale || 1;
this.seed = new Seed(this, point, scale, color);
},
initFooter: function() {
var footer = this.opt.footer || {};
var width = footer.width || this.width;
var height = footer.height || 5;
var speed = footer.speed || 2;
this.footer = new Footer(this, width, height, speed);
},
initBranch: function() {
var branchs = this.opt.branch || []
this.branchs = [];
this.addBranchs(branchs);
},
initBloom: function() {
var bloom = this.opt.bloom || {};
var cache = [],
num = bloom.num || 500,
width = bloom.width || this.width,
height = bloom.height || this.height,
figure = this.seed.heart.figure;
var r = 240, x, y;
for (var i = 0; i < num; i++) {
cache.push(this.createBloom(width, height, r, figure));
}
this.blooms = [];
this.bloomsCache = cache;
},
toDataURL: function(type) {
return this.canvas.toDataURL(type);
},
draw: function(k) {
var s = this, ctx = s.ctx;
var rec = s.record[k];
if (!rec) {
return ;
}
var point = rec.point,
image = rec.image;
ctx.save();
ctx.putImageData(image, point.x, point.y);
ctx.restore();
},
addBranch: function(branch) {
this.branchs.push(branch);
},
addBranchs: function(branchs){
var s = this, b, p1, p2, p3, r, l, c;
for (var i = 0; i < branchs.length; i++) {
b = branchs[i];
p1 = new Point(b[0], b[1]);
p2 = new Point(b[2], b[3]);
p3 = new Point(b[4], b[5]);
r = b[6];
l = b[7];
c = b[8]
s.addBranch(new Branch(s, p1, p2, p3, r, l, c));
}
},
removeBranch: function(branch) {
var branchs = this.branchs;
for (var i = 0; i < branchs.length; i++) {
if (branchs[i] === branch) {
branchs.splice(i, 1);
}
}
},
canGrow: function() {
return !!this.branchs.length;
},
grow: function() {
var branchs = this.branchs;
for (var i = 0; i < branchs.length; i++) {
var branch = branchs[i];
if (branch) {
branch.grow();
}
}
},
addBloom: function (bloom) {
this.blooms.push(bloom);
},
removeBloom: function (bloom) {
var blooms = this.blooms;
for (var i = 0; i < blooms.length; i++) {
if (blooms[i] === bloom) {
blooms.splice(i, 1);
}
}
},
createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) {
var x, y;
while (true) {
x = random(20, width - 20);
y = random(20, height - 20);
if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) {
return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed);
}
}
},
canFlower: function() {
return !!this.blooms.length;
},
flower: function(num) {
var s = this, blooms = s.bloomsCache.splice(0, num);
for (var i = 0; i < blooms.length; i++) {
s.addBloom(blooms[i]);
}
blooms = s.blooms;
for (var j = 0; j < blooms.length; j++) {
blooms[j].flower();
}
},
snapshot: function(k, x, y, width, height) {
var ctx = this.ctx;
var image = ctx.getImageData(x, y, width, height);
this.record[k] = {
image: image,
point: new Point(x, y),
width: width,
height: height
}
},
setSpeed: function(k, speed) {
this.record[k || "move"].speed = speed;
},
move: function(k, x, y) {
var s = this, ctx = s.ctx;
var rec = s.record[k || "move"];
var point = rec.point,
image = rec.image,
speed = rec.speed || 10,
width = rec.width,
height = rec.height;
i = point.x + speed < x ? point.x + speed : x;
j = point.y + speed < y ? point.y + speed : y;
ctx.save();
ctx.clearRect(point.x, point.y, width, height);
ctx.putImageData(image, i, j);
ctx.restore();
rec.point = new Point(i, j);
rec.speed = speed * 0.95;
if (rec.speed < 2) {
rec.speed = 2;
}
return i < x || j < y;
},
jump: function() {
var s = this, blooms = s.blooms;
if (blooms.length) {
for (var i = 0; i < blooms.length; i++) {
blooms[i].jump();
}
}
if ((blooms.length && blooms.length < 3) || !blooms.length) {
var bloom = this.opt.bloom || {},
width = bloom.width || this.width,
height = bloom.height || this.height,
figure = this.seed.heart.figure;
var r = 240, x, y;
for (var i = 0; i < random(1,2); i++) {
blooms.push(this.createBloom(width / 2 + width, height, r, figure, null, 1, null, 1, new Point(random(-100,600), 720), random(200,300)));
}
}
}
}
Branch = function(tree, point1, point2, point3, radius, length, branchs) {
this.tree = tree;
this.point1 = point1;
this.point2 = point2;
this.point3 = point3;
this.radius = radius;
this.length = length || 100;
this.len = 0;
this.t = 1 / (this.length - 1);
this.branchs = branchs || [];
}
Branch.prototype = {
grow: function() {
var s = this, p;
if (s.len <= s.length) {
p = bezier([s.point1, s.point2, s.point3], s.len * s.t);
s.draw(p);
s.len += 1;
s.radius *= 0.97;
} else {
s.tree.removeBranch(s);
s.tree.addBranchs(s.branchs);
}
},
draw: function(p) {
var s = this;
var ctx = s.tree.ctx;
ctx.save();
ctx.beginPath();
ctx.fillStyle = 'rgb(35, 31, 32)';
ctx.shadowColor = 'rgb(35, 31, 32)';
ctx.shadowBlur = 2;
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, s.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) {
this.tree = tree;
this.point = point;
this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')';
this.alpha = alpha || random(0.3, 1);
this.angle = angle || random(0, 360);
this.scale = scale || 0.1;
this.place = place;
this.speed = speed;
this.figure = figure;
}
Bloom.prototype = {
setFigure: function(figure) {
this.figure = figure;
},
flower: function() {
var s = this;
s.draw();
s.scale += 0.1;
if (s.scale > 1) {
s.tree.removeBloom(s);
}
},
draw: function() {
var s = this, ctx = s.tree.ctx, figure = s.figure;
ctx.save();
ctx.fillStyle = s.color;
ctx.globalAlpha = s.alpha;
ctx.translate(s.point.x, s.point.y);
ctx.scale(s.scale, s.scale);
ctx.rotate(s.angle);
ctx.beginPath();
ctx.moveTo(0, 0);
for (var i = 0; i < figure.length; i++) {
var p = figure.get(i);
ctx.lineTo(p.x, -p.y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
},
jump: function() {
var s = this, height = s.tree.height;
if (s.point.x < -20 || s.point.y > height + 20) {
s.tree.removeBloom(s);
} else {
s.draw();
s.point = s.place.sub(s.point).div(s.speed).add(s.point);
s.angle += 0.05;
s.speed -= 1;
}
}
}
window.random = random;
window.bezier = bezier;
window.Point = Point;
window.Tree = Tree;
})(window);
因为 它太大了无法显示 source diff 。你可以改为 查看blob
此差异已折叠。
$(document).ready(function() {
$('#myRoundabout').roundabout({
shape: 'figure8',
minOpacity: 1
});
});
\ No newline at end of file
(function ($) {
function Vector(x, y) {
this.x = x;
this.y = y;
};
Vector.prototype = {
rotate: function (theta) {
var x = this.x;
var y = this.y;
this.x = Math.cos(theta) * x - Math.sin(theta) * y;
this.y = Math.sin(theta) * x + Math.cos(theta) * y;
return this;
},
mult: function (f) {
this.x *= f;
this.y *= f;
return this;
},
clone: function () {
return new Vector(this.x, this.y);
},
length: function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
subtract: function (v) {
this.x -= v.x;
this.y -= v.y;
return this;
},
set: function (x, y) {
this.x = x;
this.y = y;
return this;
}
};
function Petal(stretchA, stretchB, startAngle, angle, growFactor, bloom) {
this.stretchA = stretchA;
this.stretchB = stretchB;
this.startAngle = startAngle;
this.angle = angle;
this.bloom = bloom;
this.growFactor = growFactor;
this.r = 1;
this.isfinished = false;
}
Petal.prototype = {
draw: function () {
var ctx = this.bloom.garden.ctx;
var v1, v2, v3, v4;
v1 = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));
v2 = v1.clone().rotate(Garden.degrad(this.angle));
v3 = v1.clone().mult(this.stretchA); //.rotate(this.tanAngleA);
v4 = v2.clone().mult(this.stretchB); //.rotate(this.tanAngleB);
ctx.strokeStyle = this.bloom.c;
ctx.beginPath();
ctx.moveTo(v1.x, v1.y);
ctx.bezierCurveTo(v3.x, v3.y, v4.x, v4.y, v2.x, v2.y);
ctx.stroke();
},
render: function () {
if (this.r <= this.bloom.r) {
this.r += this.growFactor; // / 10;
this.draw();
} else {
this.isfinished = true;
}
}
}
function Bloom(p, r, c, pc, garden) {
this.p = p;
this.r = r;
this.c = c;
this.pc = pc;
this.petals = [];
this.garden = garden;
this.init();
this.garden.addBloom(this);
}
Bloom.prototype = {
draw: function () {
var p, isfinished = true;
this.garden.ctx.save();
this.garden.ctx.translate(this.p.x, this.p.y);
for (var i = 0; i < this.petals.length; i++) {
p = this.petals[i];
p.render();
isfinished *= p.isfinished;
}
this.garden.ctx.restore();
if (isfinished == true) {
this.garden.removeBloom(this);
}
},
init: function () {
var angle = 360 / this.pc;
var startAngle = Garden.randomInt(0, 90);
for (var i = 0; i < this.pc; i++) {
this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), startAngle + i * angle, angle, Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max), this));
}
}
}
function Garden(ctx, element) {
this.blooms = [];
this.element = element;
this.ctx = ctx;
}
Garden.prototype = {
render: function () {
for (var i = 0; i < this.blooms.length; i++) {
this.blooms[i].draw();
}
},
addBloom: function (b) {
this.blooms.push(b);
},
removeBloom: function (b) {
var bloom;
for (var i = 0; i < this.blooms.length; i++) {
bloom = this.blooms[i];
if (bloom === b) {
this.blooms.splice(i, 1);
return this;
}
}
},
createRandomBloom: function (x, y, Size) {
//Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max),
this.createBloom(x, y,
Size,
Garden.randomrgba(Garden.options.color.min, Garden.options.color.max, Garden.options.color.opacity),
Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max));
},
createBloom: function (x, y, r, c, pc) {
new Bloom(new Vector(x, y), r, c, pc, this);
},
clear: function () {
this.blooms = [];
this.ctx.clearRect(0, 0, this.element.width, this.element.height);
}
}
Garden.options = {
petalCount: {
min: 9,
max: 13
},
petalStretch: {
min: 0.9,
max: 3
},
growFactor: {
min: 0.1,
max: 1
},
bloomRadius: {
min: 5,
max: 10
},
density: 50,
growSpeed: 1000 / 30,
color: {
min: 0,
max: 90,
opacity: 0.05
},
tanAngle: 90
};
Garden.random = function (min, max) {
return Math.random() * (max - min) + min;
};
Garden.randomInt = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
Garden.circle = 2 * Math.PI;
Garden.degrad = function (angle) {
return Garden.circle / 360 * angle;
};
Garden.raddeg = function (angle) {
return angle / Garden.circle * 360;
};
Garden.rgba = function (r, g, b, a) {
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
};
Garden.randomrgba = function (min, max, a) {
//return Garden.rgba(Math.round(Garden.random(250, 255)), Math.round(Garden.random(200, 210)), Math.round(Garden.random(200, 210)), 0.05);//紫色
return Garden.rgba(Math.round(Garden.random(180, 250)), Math.round(Garden.random(80, 255)), Math.round(Garden.random(50, 180)), 0.15);//橙色,粉红,紫色
};
$(function () {
$window = $(window);
// garden
var gardenCtx, gardenCanvas, $garden, garden;
// saveCanvas
var saveCtx, saveCanvas;
// setup save
saveCanvas = $("#garden")[0];
saveCanvas.width = $window.width();
saveCanvas.height = $window.height();
saveCtx = saveCanvas.getContext("2d");
saveCtx.globalCompositeOperation = "lighter";
// setup garden
$garden = $("#garden");
gardenCanvas = $garden[0];
gardenCanvas.width = $window.width();
gardenCanvas.height = $window.height() - 20;
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositeOperation = "lighter";
garden = new Garden(gardenCtx, gardenCanvas);
// renderLoop
setInterval(function () {
garden.render();
}, Garden.options.growSpeed);
//---------------------------------------------------------------
//Draw My Picture
var r = 18;
var flag = 0;
var time, temp = 800;
var radian = Math.PI;//弧度
var radianDecrement = Math.PI / 370 * 2;;//弧度增量
var heartX, heartY;
var LX = 700, LY = 370;
var URowX = LX, URowY = LY;
var DRowX = LX, DRowY = LY;
var LRollX = LX, LRollY = LY;
var RRollX = LX, RRollY = LY;
for(var i=0;i<350;i++){
time = 30*(i + temp);
setTimeout(drawHeart, time);
}
for(var j = 0; j < 20; j++){
//setTimeout(drawRect_URow, 60 * j + 35000);
}
for(var j = 0; j < 21; j++){
//setTimeout(drawRect_DRow, 60 * j + 20 * 65 + 36000);
}
for(var j = 0; j < 5; j++){
//setTimeout(drawRect_LRoll, 60 * j + 20 * 65 + 37000);
}
for(var j = 0; j < 5; j++){
//setTimeout(drawRect_RRoll, 60 * j + 20 * 65 + 38000);
}
function drawRect_URow(){
garden.createRandomBloom(URowX, URowY, 12);
URowX = URowX + 25;
}
function drawRect_DRow(){
garden.createRandomBloom(DRowX, DRowY + 185, 12);
DRowX = DRowX + 25;
}
function drawRect_LRoll(){
garden.createRandomBloom(LRollX, LRollY, 12);
LRollY = LRollY + 25;
}
function drawRect_RRoll(){
garden.createRandomBloom(RRollX + 500, RRollY, 12);
RRollY = RRollY + 25;
}
function drawHeart(){
flag++;
heartX = getX(radian);
heartY = getY(radian);
radian += radianDecrement;
if(flag < 31){
if(flag%8==0){
garden.createRandomBloom(heartX, heartY, 12);
}
}else if(flag % 4 == 0){
if(radian>Math.PI+300*radianDecrement)
garden.createRandomBloom(heartX, heartY, 56 - (5.51) *(radian));
else if(!(radian<=Math.PI+205*radianDecrement&&radian>=Math.PI+180*radianDecrement))//只是让变得好看
garden.createRandomBloom(heartX, heartY, 12);
}
}
function getX(t) {//由弧度得到 X 坐标
return 305+r*(16*Math.pow(Math.sin(t),3));
}
function getY(t) {//由弧度得到 Y 坐标
return 295-r*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t));
}
//---------------------------------------------------------------
});
})(jQuery);
\ No newline at end of file
此差异已折叠。
var x,y; //鼠标当前在页面上的位置
var step=10; //字符显示间距,为了好看,step=0则字符显示没有间距
var message="Thanks for watching!"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记,
//使用span来标记字符,是为了方便使用CSS,并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
e=e||window.event;
x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX-220;
y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY-35;
}
function makesnake() { //重定位每个字符的位置
if (document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置,每个字符为前一个字符“历史”水平坐标+step间隔,
//这样随着光标移动事件,就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1]; //垂直坐标为前一字符的历史“垂直”坐标,后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证,如果鼠标光标移动到新位置,则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样,
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else{
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<=message.length-1; i++) {
var thisspan = document.getElementById("span"+i).style;
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
\ No newline at end of file
function move(){
//获取移动的DIV对象
var obj = document.getElementById("container");
//设置样式定位属性,让div从当前文档流中拖出。
//这样,他属于整个活动窗体。可以层叠。
obj.style.position = "absolute";
obj.style.opacity = 0;
//动画计数器。
var num = 0;
//获得移动div,在整个活动区域的X坐标
var left = 630;
//获得移动div,在整个活动区域的Y坐标
var top = 220;
//使用定时器移动DIV
var timer = setInterval(function(){ //移动的函数
if(num==105){ //移动105次
clearInterval(timer);
}
//通过left样式属性设置。必须带单位
obj.style.left = left + "px";
//通过top样式属性设置,必须带单位
obj.style.top = top - num * 2 + "px";
//计数器加一
obj.style.opacity = num / 140.0;
num++;
},190);
}
/**
* jQuery Roundabout - v1.1
* http://fredhq.com/projects/roundabout/
*
* Moves list-items of enabled ordered and unordered lists long
* a chosen path. Includes the default "lazySusan" path, that
* moves items long a spinning turntable.
*
* Terms of Use // jQuery Roundabout
*
* Open source under the BSD license
*
* Copyright (c) 2010, Fred LeBlanc
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* - Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* - Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials provided
* with the distribution.
* - Neither the name of the author nor the names of its contributors
* may be used to endorse or promote products derived from this
* software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
// creates a default shape to be used for pathing
jQuery.extend({
roundabout_shape: {
def: 'lazySusan',
lazySusan: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
}
}
});
jQuery.fn.roundabout = function() {
var options = (typeof arguments[0] != 'object') ? {} : arguments[0];
// set options and fill in defaults
options = {
bearing: (typeof options.bearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.bearing % 360.0),
tilt: (typeof options.tilt == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.tilt),
minZ: (typeof options.minZ == 'undefined') ? 100 : parseInt(options.minZ, 10),
maxZ: (typeof options.maxZ == 'undefined') ? 400 : parseInt(options.maxZ, 10),
minOpacity: (typeof options.minOpacity == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minOpacity),
maxOpacity: (typeof options.maxOpacity == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxOpacity),
minScale: (typeof options.minScale == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minScale),
maxScale: (typeof options.maxScale == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxScale),
duration: (typeof options.duration == 'undefined') ? 600 : parseInt(options.duration, 10),
btnNext: options.btnNext || null,
btnPrev: options.btnPrev || null,
easing: options.easing || 'swing',
clickToFocus: (options.clickToFocus !== false),
focusBearing: (typeof options.focusBearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.focusBearing % 360.0),
shape: options.shape || 'lazySusan',
debug: options.debug || false,
childSelector: options.childSelector || 'li',
startingChild: (typeof options.startingChild == 'undefined') ? null : parseInt(options.startingChild, 10),
reflect: (typeof options.reflect == 'undefined' || options.reflect === false) ? false : true
};
// assign things
this.each(function(i) {
var ref = jQuery(this);
var period = jQuery.roundabout_toFloat(360.0 / ref.children(options.childSelector).length);
var startingBearing = (options.startingChild === null) ? options.bearing : options.startingChild * period;
// set starting styles
ref
.addClass('roundabout-holder')
.css('padding', 0)
.css('position', 'relative')
.css('z-index', options.minZ);
// set starting options
ref.data('roundabout', {
'bearing': startingBearing,
'tilt': options.tilt,
'minZ': options.minZ,
'maxZ': options.maxZ,
'minOpacity': options.minOpacity,
'maxOpacity': options.maxOpacity,
'minScale': options.minScale,
'maxScale': options.maxScale,
'duration': options.duration,
'easing': options.easing,
'clickToFocus': options.clickToFocus,
'focusBearing': options.focusBearing,
'animating': 0,
'childInFocus': -1,
'shape': options.shape,
'period': period,
'debug': options.debug,
'childSelector': options.childSelector,
'reflect': options.reflect
});
// bind click events
if (options.clickToFocus === true) {
ref.children(options.childSelector).each(function(i) {
jQuery(this).click(function(e) {
var degrees = (options.reflect === true) ? 360.0 - (period * i) : period * i;
degrees = jQuery.roundabout_toFloat(degrees);
if (!jQuery.roundabout_isInFocus(ref, degrees)) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateAngleToFocus(degrees);
}
return false;
}
});
});
}
// bind next buttons
if (options.btnNext) {
jQuery(options.btnNext).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToNextChild();
}
return false;
});
}
// bind previous buttons
if (options.btnPrev) {
jQuery(options.btnPrev).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToPreviousChild();
}
return false;
});
}
});
// start children
this.roundabout_startChildren();
// callback once ready
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_startChildren = function() {
this.each(function(i) {
var ref = jQuery(this);
var data = ref.data('roundabout');
var children = ref.children(data.childSelector);
children.each(function(i) {
var degrees = (data.reflect === true) ? 360.0 - (data.period * i) : data.period * i;
// apply classes and css first
jQuery(this)
.addClass('roundabout-moveable-item')
.css('position', 'absolute');
// then measure
jQuery(this).data('roundabout', {
'startWidth': jQuery(this).width(),
'startHeight': jQuery(this).height(),
'startFontSize': parseInt(jQuery(this).css('font-size'), 10),
'degrees': degrees
});
});
ref.roundabout_updateChildPositions();
});
return this;
};
jQuery.fn.roundabout_setTilt = function(newTilt) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = newTilt;
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_setBearing = function(newBearing) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_toFloat(newBearing % 360, 2);
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustBearing = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_getBearing(jQuery(this)) + delta;
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustTilt = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = jQuery.roundabout_toFloat(jQuery(this).roundabout_get('tilt') + delta);
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_animateToBearing = function(bearing) {
bearing = jQuery.roundabout_toFloat(bearing);
var currentTime = new Date();
var duration = (typeof arguments[1] == 'undefined') ? null : arguments[1];
var easingType = (typeof arguments[2] == 'undefined') ? null : arguments[2];
var passedData = (typeof arguments[3] !== 'object') ? null : arguments[3];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout'), timer, easingFn, newBearing;
var thisDuration = (duration === null) ? data.duration : duration;
var thisEasingType = (easingType !== null) ? easingType : data.easing || 'swing';
if (passedData === null) {
passedData = {
timerStart: currentTime,
start: jQuery.roundabout_getBearing(ref),
totalTime: thisDuration
};
}
timer = currentTime - passedData.timerStart;
if (timer < thisDuration) {
data.animating = 1;
if (typeof jQuery.easing.def == 'string') {
easingFn = jQuery.easing[thisEasingType] || jQuery.easing[jQuery.easing.def];
newBearing = easingFn(null, timer, passedData.start, bearing - passedData.start, passedData.totalTime);
} else {
newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing - passedData.start, passedData.totalTime);
}
ref.roundabout_setBearing(newBearing, function() { ref.roundabout_animateToBearing(bearing, thisDuration, thisEasingType, passedData); });
} else {
bearing = (bearing < 0) ? bearing + 360 : bearing % 360;
data.animating = 0;
ref.roundabout_setBearing(bearing);
}
});
return this;
};
jQuery.fn.roundabout_animateToDelta = function(delta) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
delta = jQuery.roundabout_getBearing(jQuery(this)) + jQuery.roundabout_toFloat(delta);
jQuery(this).roundabout_animateToBearing(delta, duration, easing);
});
return this;
};
jQuery.fn.roundabout_animateToChild = function(childPos) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
if (data.childInFocus !== childPos && data.animating === 0) {
var child = jQuery(ref.children(data.childSelector)[childPos]);
ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_animateToNearbyChild = function(passedArgs, which) {
var duration = passedArgs[0], easing = passedArgs[1];
this.each(function(i) {
var data = jQuery(this).data('roundabout');
var bearing = jQuery.roundabout_toFloat(360.0 - jQuery.roundabout_getBearing(jQuery(this)));
var period = data.period, j = 0, range;
var reflect = data.reflect;
var length = jQuery(this).children(data.childSelector).length;
bearing = (reflect === true) ? bearing % 360.0 : bearing;
if (data.animating === 0) {
// if we're not reflecting and we're moving to next or
// we are reflecting and we're moving previous
if ((reflect === false && which === 'next') || (reflect === true && which !== 'next')) {
bearing = (bearing === 0) ? 360 : bearing;
// counterclockwise
while (true && j < length) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing <= range.upper && bearing > range.lower) {
jQuery(this).roundabout_animateToDelta(bearing - range.lower, duration, easing);
break;
}
j++;
}
} else {
// clockwise
while (true) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing >= range.lower && bearing < range.upper) {
jQuery(this).roundabout_animateToDelta(bearing - range.upper, duration, easing);
break;
}
j++;
}
}
}
});
return this;
};
jQuery.fn.roundabout_animateToNextChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'next');
};
jQuery.fn.roundabout_animateToPreviousChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'previous');
};
// moves a given angle to the focus by the shortest means possible
jQuery.fn.roundabout_animateAngleToFocus = function(target) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var delta = jQuery.roundabout_getBearing(jQuery(this)) - target;
delta = (Math.abs(360.0 - delta) < Math.abs(0.0 - delta)) ? 360.0 - delta : 0.0 - delta;
delta = (delta > 180) ? -(360.0 - delta) : delta;
if (delta !== 0) {
jQuery(this).roundabout_animateToDelta(delta, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_updateChildPositions = function() {
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
var inFocus = -1;
var info = {
bearing: jQuery.roundabout_getBearing(ref),
tilt: data.tilt,
stage: { width: Math.floor(ref.width() * 0.9), height: Math.floor(ref.height() * 0.9) },
animating: data.animating,
inFocus: data.childInFocus,
focusBearingRad: jQuery.roundabout_degToRad(data.focusBearing),
shape: jQuery.roundabout_shape[data.shape] || jQuery.roundabout_shape[jQuery.roundabout_shape.def]
};
info.midStage = { width: info.stage.width / 2, height: info.stage.height / 2 };
info.nudge = { width: info.midStage.width + info.stage.width * 0.05, height: info.midStage.height + info.stage.height * 0.05 };
info.zValues = { min: data.minZ, max: data.maxZ, diff: data.maxZ - data.minZ };
info.opacity = { min: data.minOpacity, max: data.maxOpacity, diff: data.maxOpacity - data.minOpacity };
info.scale = { min: data.minScale, max: data.maxScale, diff: data.maxScale - data.minScale };
// update child positions
ref.children(data.childSelector).each(function(i) {
if (jQuery.roundabout_updateChildPosition(jQuery(this), ref, info, i) && info.animating === 0) {
inFocus = i;
jQuery(this).addClass('roundabout-in-focus');
} else {
jQuery(this).removeClass('roundabout-in-focus');
}
});
// update status of who is in focus
if (inFocus !== info.inFocus) {
jQuery.roundabout_triggerEvent(ref, info.inFocus, 'blur');
if (inFocus !== -1) {
jQuery.roundabout_triggerEvent(ref, inFocus, 'focus');
}
data.childInFocus = inFocus;
}
});
return this;
};
//----------------
jQuery.roundabout_getBearing = function(el) {
return jQuery.roundabout_toFloat(el.data('roundabout').bearing) % 360;
};
jQuery.roundabout_degToRad = function(degrees) {
return (degrees % 360.0) * Math.PI / 180.0;
};
jQuery.roundabout_isInFocus = function(el, target) {
return (jQuery.roundabout_getBearing(el) % 360 === (target % 360));
};
jQuery.roundabout_triggerEvent = function(el, child, eventType) {
return (child < 0) ? this : jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType);
};
jQuery.roundabout_toFloat = function(number) {
number = Math.round(parseFloat(number) * 1000) / 1000;
return parseFloat(number.toFixed(2));
};
jQuery.roundabout_updateChildPosition = function(child, container, info, childPos) {
var ref = jQuery(child), data = ref.data('roundabout'), out = [];
var rad = jQuery.roundabout_degToRad((360.0 - ref.data('roundabout').degrees) + info.bearing);
// adjust radians to be between 0 and Math.PI * 2
while (rad < 0) {
rad = rad + Math.PI * 2;
}
while (rad > Math.PI * 2) {
rad = rad - Math.PI * 2;
}
var factors = info.shape(rad, info.focusBearingRad, info.tilt); // obj with x, y, z, and scale values
// correct
factors.scale = (factors.scale > 1) ? 1 : factors.scale;
factors.adjustedScale = (info.scale.min + (info.scale.diff * factors.scale)).toFixed(4);
factors.width = (factors.adjustedScale * data.startWidth).toFixed(4);
factors.height = (factors.adjustedScale * data.startHeight).toFixed(4);
// alter item
ref
.css('left', ((factors.x * info.midStage.width + info.nudge.width) - factors.width / 2.0).toFixed(1) + 'px')
.css('top', ((factors.y * info.midStage.height + info.nudge.height) - factors.height / 2.0).toFixed(1) + 'px')
.css('width', factors.width + 'px')
.css('height', factors.height + 'px')
.css('opacity', (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))
.css('z-index', Math.round(info.zValues.min + (info.zValues.diff * factors.z)))
.css('font-size', (factors.adjustedScale * data.startFontSize).toFixed(2) + 'px')
.attr('current-scale', factors.adjustedScale);
if (container.data('roundabout').debug === true) {
out.push('<div style="font-weight: normal; font-size: 10px; padding: 2px; width: ' + ref.css('width') + '; background-color: #ffc;">');
out.push('<strong style="font-size: 12px; white-space: nowrap;">Child ' + childPos + '</strong><br />');
out.push('<strong>left:</strong> ' + ref.css('left') + '<br /><strong>top:</strong> ' + ref.css('top') + '<br />');
out.push('<strong>width:</strong> ' + ref.css('width') + '<br /><strong>opacity:</strong> ' + ref.css('opacity') + '<br />');
out.push('<strong>z-index:</strong> ' + ref.css('z-index') + '<br /><strong>font-size:</strong> ' + ref.css('font-size') + '<br />');
out.push('<strong>scale:</strong> ' + ref.attr('current-scale'));
out.push('</div>');
ref.html(out.join(''));
}
return jQuery.roundabout_isInFocus(container, ref.data('roundabout').degrees);
};
\ No newline at end of file
/**
* jQuery Roundabout Shapes v1.1
* http://fredhq.com/projects/roundabout-shapes/
*
* Provides additional paths along which items can move for the
* jQuery Roundabout plugin (v1.0+).
*
* Terms of Use // jQuery Roundabout Shapes
*
* Open source under the BSD license
*
* Copyright (c) 2009, Fred LeBlanc
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* - Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* - Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following
* disclaimer in the documentation and/or other materials provided
* with the distribution.
* - Neither the name of the author nor the names of its contributors
* may be used to endorse or promote products derived from this
* software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
jQuery.extend(jQuery.roundabout_shape,
{
theJuggler: function(r, a, t) {
return {
x: Math.sin(r + a),
y: Math.tan(Math.exp(Math.log(r)) + a) / (t - 1),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
figure8: function(r, a, t) {
return {
x: Math.sin(r * 2 + a),
y: (Math.sin(r + Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
waterWheel: function(r, a, t) {
return {
x: (Math.sin(r + Math.PI/2 + a) / 8) * t,
y: Math.sin(r + a) / (Math.PI/2),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
square: function(r, a, t) {
var sq_x, sq_y, sq_z;
if (r <= Math.PI/2) {
sq_x = (2/Math.PI) * r;
sq_y = -(2/Math.PI) * r + 1;
sq_z = -(1/Math.PI) * r + 1;
} else if (r > Math.PI/2 && r <= Math.PI) {
sq_x = -(2/Math.PI) * r + 2;
sq_y = -(2/Math.PI) * r + 1;
sq_z = -(1/Math.PI) * r + 1;
} else if (r > Math.PI && r <= (3 * Math.PI) / 2) {
sq_x = -(2/Math.PI) * r + 2;
sq_y = (2/Math.PI) * r - 3;
sq_z = (1/Math.PI) * r - 1;
} else {
sq_x = (2/Math.PI) * r - 4;
sq_y = (2/Math.PI) * r - 3;
sq_z = (1/Math.PI) * r - 1;
}
return {
x: sq_x,
y: sq_y * t,
z: sq_z,
scale: sq_z
}
},
conveyorBeltLeft: function(r, a, t) {
return {
x: -Math.cos(r + a),
y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.sin(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
conveyorBeltRight: function(r, a, t) {
return {
x: Math.cos(r + a),
y: (Math.cos(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.sin(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
goodbyeCruelWorld: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.tan(r + 3*Math.PI/2 + a) / 8) * (t + 0.5),
z: (Math.sin(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
diagonalRingLeft: function(r, a, t) {
return {
x: Math.sin(r + a),
y: -Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
diagonalRingRight: function(r, a, t) {
return {
x: Math.sin(r + a),
y: Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
},
rollerCoaster: function(r, a, t) {
return {
x: Math.sin(r + a),
y: Math.sin((2 + t) * r),
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
}
},
tearDrop: function(r, a, t) {
return {
x: Math.sin(r + a),
y: -Math.sin(r/2 + t) + 0.35,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
}
}
});
\ No newline at end of file
此差异已折叠。
此差异已折叠。
var charIndex = -1;
var stringLength = 0;
var inputText;
function writeContent(init){
if(init){
inputText = document.getElementById('contentToWrite').innerHTML;
}
if(charIndex==-1){
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('myContent').innerHTML;
initString = initString.replace(/<SPAN.*$/gi,"");
var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);
if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
theChar = '<BR>';
charIndex+=3;
}
initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
document.getElementById('myContent').innerHTML = initString;
charIndex = charIndex/1 +1;
if(charIndex%2==1){
document.getElementById('blink').style.display='none';
}else{
document.getElementById('blink').style.display='inline';
}
if(charIndex<=stringLength){
setTimeout('writeContent(false)',140);
}else{
blinkSpan();
}
}
var currentStyle = 'inline';
function blinkSpan(){
if(currentStyle=='inline'){
currentStyle='none';
}else{
currentStyle='inline';
}
document.getElementById('blink').style.display = currentStyle;
setTimeout('blinkSpan()',100);
}
function showTime() {
var currentDate = new Date();
var startDate = new Date(2014, 12, 01);
var date3 = currentDate-startDate;
var days=Math.floor(date3/(24*3600*1000));
var leave1=date3%(24*3600*1000); //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
var currentTimeString = "Dear Nicole:<br>"
+ "I have been in love with you for:<br> "
+ "&nbsp&nbsp&nbsp&nbsp&nbsp"
+ "<c style=\"color: #CCFF99; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:24px\" >" + days +" </c>day "
+ "<c style=\"color: #CCFF99; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:24px\" >" + hours+" </c>hour "
+"<c style=\"color: #CCFF99; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:24px\" >" + minutes+" </c>min "
+"<c style=\"color: #CCFF99; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:24px\" >" +seconds+" </c>sec<br>"
+ "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp只愿执子之手,与子偕老.<br>"
+ "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"
+ "<c style=\"color: #CCCCCC; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:20px\" >----Mike 2014-01-01</c>";
document.getElementById("show").innerHTML=currentTimeString; //改这地方
window.setTimeout("showTime()", 1000);
}
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册