分享更有价值
被信任是一种快乐

html5表白模板怎么实现

文章页正文上

这篇文章主要讲解了“html5表白模板怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5表白模板怎么实现”吧!
  HTML代码如下:
  (function(){
  var canvas=$(’#ke’+’leyi’);
  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 () {
  $(”#code”)。show()。typewriter();
  }));
  var runAsync=eval(Jscex.compile(”async”, function () {
  $await(seedAnimate());
  $await(growAnimate());
  $await(flowAnimate());
  $await(moveAnimate());
  textAnimate()。start();
  $await(jumpAnimate());
  }));
  runAsync()。start();
  })();
  适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。 不支持IE8及以下浏览器。感谢各位的阅读,以上就是“html5表白模板怎么实现”的内容了,经过本文的学习后,相信大家对html5表白模板怎么实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: Angular独立组件怎么使用

这篇文章主要介绍“Angular独立组件怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular独立组件怎么使用”文章能帮助大家解决问题。在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册