<body><audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /></audio><div id="main"> <div id="wrap"> <div id="text"> <div id="code"> <font color="#FF0000"> <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> <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> </font> </div> </div> <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">愿得一心人，白首不相离</font> <span class="STYLE1">这简单的话语……</span> <div id="clock"></div> </div> <canvas id="canvas" width="1100" height="680"></canvas> </div></div>
<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,1 , 15); //时间年月日 together.setHours(16);//小时 together.setMinutes(53);//分钟 together.setSeconds(0);//秒前一位 together.setMilliseconds(2);//秒第二位 $("#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>特效二
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>zhaoyeming</title><link rel="stylesheet" href="css/hovertree.css" /></head><body><div class="hovertreeinfo"><h2></h2></div><!-- 仅自动播放音乐 --><audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio><script type="text/javascript">//--创建页面监听，等待微信端页面加载完毕 触发音频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();});//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();});</script><!--/*外层最大容器*/--><div class="wrap"><!--/*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="img/img01.jpg " class="pic" /></div><!--后面图片 --><div class="out_back"><img src="img/img02.jpg" class="pic"/></div><!--左图片 --><div class="out_left"><img src="img/img03.jpg" class="pic" /></div><div class="out_right"><img src="img/img04.jpg" class="pic" /></div><div class="out_top"><img src="img/img05.jpg" class="pic" /></div><div class="out_bottom"><img src="img/img06.jpg" class="pic" /></div><!--小正方体 --><span class="in_front"><img src="img/img07.jpg" class="in_pic" /></span><span class="in_back"><img src="img/img08.jpg" class="in_pic" /></span><span class="in_left"><img src="img/img09.jpg" class="in_pic" /></span><span class="in_right"><img src="img/img10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/img11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/img12.jpg" class="in_pic" /></span></div></div></body></html>特效三
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery爱心表白动画代码</title><link href="css/default.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/garden.js"></script><script type="text/javascript" src="js/functions.js"></script></head><body><div id="mainDiv"><div id="content"><div id="code"><h1><span class="comments">我这一辈子走过许多地方的路</span><br /></h1> <span class="comments"></span><br /><h1><span class="comments">行过许多地方的桥</span><br /></h1><span class="comments"></span><br /><h1><span class="comments">看过许多次数的云</span><br /></h1><span class="comments"></span><br /><h1><span class="comments">喝过许多种类的酒</span><br /><span class="comments"></span><br /><h1><span class="comments">却只爱过一个正当最好年龄的人</span><br /></h1><span class="comments"></span><br /></div><div id="loveHeart"><canvas id="garden"></canvas><div id="words"><div id="messages"><h4><p class="text">I love you three thousand times </p></h4><div id="elapseClock"></div></div></div></div></div><div id="copyright"><a href="#">....</a><br /><a href="#">....</a><br /></div></div><script type="text/javascript">var offsetX = $("#loveHeart").width() / 2;var offsetY = $("#loveHeart").height() / 2 - 55;var together = new Date();together.setFullYear(2013, 2, 28);together.setHours(20);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);if (!document.createElement('canvas').getContext) {var msg = document.createElement("div");msg.id = "errorMsg";msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14 /IE 9 /Firefox 7 /Safari 4 "; document.body.appendChild(msg);$("#code").css("display", "none")$("#copyright").css("position", "absolute");$("#copyright").css("bottom", "10px");document.execCommand("stop");} else {setTimeout(function () {startHeartAnimation();}, 5000);timeElapse(together);setInterval(function () {timeElapse(together);}, 500);adjustCodePosition();$("#code").typewriter();}</script> </body></html>特效四
