网站效果见这里:给力壁纸http://wordsmotivate.me/
前一段发现了这个优秀的网站,看到在鼠标点击时网页背景在当前位置会触发一个线条动画效果,而且动画线条的颜色方向都是随机的。
今天有空研究了一下,把代码拿下来放这里和大家分享一下。
HTML中的秘密:
<div style="z-index:0; position:fixed; top: 0pt; left: 0pt; width:100%; overflow:hidden;"><canvas id="canvas" width="1366" height="384"></canvas></div>
关键的JS:
<script type="text/javascript">
(function() {
if(window.IElt9||document.domain.match(/jigsy.com/)) return;
$j.ajax({
url: 'http://img.wordsmotivate.me/sitebg/tunneler.js?ver=6',
dataType: 'script',
cache: true
});
})();
</script>
把这个JS下载下来后把最后两行修改一下,使其不依赖jQuery
原: $j(document).ready(function(){initTunneler();}); $j(window).resize(function(){resizeTunneler();}); 改: window.οnlοad=initTunneler; window.οnresize=resizeTunneler;
自已创建个html页面,放入div和canvas,引入修改后的js,运行就看到效果了!
好吧,为懒人准备了一份代码在附件中。