热力图插件heatmap.js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是热力图插件heatmap.js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
  <head>
    <title>����ͼ���heatmap.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/commons.css" />
    <link rel="stylesheet" href="css/landingpage.css" />
  </head>
  <body>
    <div class="heatmap-wrapper">
      <div class="heatmap">

      </div>
    </div>
    <div class="wrapper">
  <section class="header">
        <h2 class="primary">heatmap.js</h2>
        <h1 class="secondary">Dynamic Heatmaps for the Web</h1>
    <img src="css/front.png" style="display:block;margin:auto;"/>
        <br/>This JavaScript library will help you make your 3 dimensional data speak up.<br /><br />Use heatmap.js v2.0 to add new value to your project, build a business based on it, study and visualize user behaviour, and much more.<br /><br /> Whether you want to have an aggregated overview of your users behaviour, or look at thousands of events distributed on a map...<div style="margin-top:15px;text-align:center;"><strong>heatmap.js has all your heatmap visualization needs covered!</strong></div><br />
      </section>
  <section>
        <h2>Why heatmap.js?</h2>
heatmap.js v2.0 is the <strong>most advanced heatmap visualization library on the web.</strong><br /> 
It has a light footprint (~3kB gzip) and with the new 2.0 release heatmap.js just got 
<ul>
  <li><strong>faster</strong>, with a new rendering module</li>
  <li><strong>stronger</strong>, to handle even <strong>more datapoints</strong> (40k+)</li>
  <li><strong>easier to use</strong> so you can get up to speed quickly</li>
  <li><strong>easier to extend</strong> for custom functionality</li>
</ul>
than ever before. Also:<div style="margin-top:15px;text-align:center;">All the struggles with unpredictably bad open source support have an end<br /><strong>The new support license will secure you the premium support you deserve</strong></div>
      </section>
  <section class="example">
        <h2>A Quick Example</h2>
        With only a few lines of code you can create your own interactive web heatmap:<br style="clear:both" />
        <div class="example-1">

        </div><pre class="code"><code class="language-javascript">var heatmap = h337.create({
  container: <strong>domElement</strong>
});

heatmap.setData({
  max: 5,
  data: [{ x: 10, y: 15, value: 5}, ...]
});</code></pre>
        
      <!-- <section class="showoff">
        Even this website has a heatmap. <br /><br /><button class="btn show-hm">display your heatmap</button>
      </section> -->
      <section class="testimonials">
  <h2>What users say</h2>
  <div class="testimonial" id="t2">
    <p>"One to rule them all: Heatmap.js is great! Besides allowing us to make beautiful heatmaps, it also gives us independence to use different maps library, such as leaflet and google map."</p>
          <span>- <strong>Rodrigo Saad</strong>, PhD. Eng. in HPC and System Dependability</span>
      </section>

      
    <section class="bottomcta"></section>
      <section>
        <h2>Don't want to get your hands dirty?</h2>
        Or not a developer? Save some time and pre-register for our user behaviour tracking service optimized to get the most out of your users data.
        <div class="cta-gethm">
          <div class="cta-in">
            <input class="in-email" type="text" placeholder="your@email.com" /><!--
            --><button class="btn-gethm btn">pre-register</button>
          </div>

        </div>
         <br /><br />
    </section>
  
  </div>

  <script src="js/heatmap.min.js"></script>
  <script>
    // @TODO:
    // clean up.
      window.onload = function() {
        var ex1el = document.querySelector('.example-1');

        document.querySelector('.btn-gethm').onclick = function() {
          var email = document.querySelector('.in-email').value;
          if (email.length < 5) {
            document.querySelector('.in-email').style.outlineColor = 'red';
            document.querySelector('.in-email').focus();
            return;
          }
          var xhr = new XMLHttpRequest();
          xhr.onload = function() {
            document.querySelector('.cta-in').innerHTML = "<strong>You'll be the first to know when the beta starts</strong>";
          };
          xhr.open('GET', 'pre-register.php?email=' + email, true);
          xhr.send();
        };


        var heatmap1 = h337.create({
          container: ex1el
        });

        var refreshHeatmap1 = function() {
          var data1 = {};
          var datap1 = [];
          var max1 = 0;
          var w = 320;
          var h = 270;
          var l = 50;
          while(l--) {
            var val = Math.random()*10;
            max1 = Math.max(max1, val);
            var d = {
              x: Math.floor(Math.random()*w),
              y: Math.floor(Math.random()*h),
              value: val
            };
            datap1.push(d);
          }
          data1["max"] = max1;
          data1["data"] = datap1;

          heatmap1.setData(data1);
        };
        refreshHeatmap1();

        ex1el.onclick = function() {
          refreshHeatmap1();
        };

        window.requestAnimationFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();


        var body = document.body;
        var bodyStyle = getComputedStyle(body);
        var hmEl = document.querySelector('.heatmap-wrapper');

        hmEl.style.width = bodyStyle.width;
        hmEl.style.height = '1400px';

        var hm = document.querySelector('.heatmap');

        var heatmap = h337.create({
          container: hm
        });


        var trackData = false;

        setInterval(function() {
          trackData = true;
        }, 50);

        var idleTimeout, idleInterval;

        var lastX, lastY;
        var idleCount;

        function startIdle() {
          idleCount = 0;
          function idle() {
            heatmap.addData({
              x: lastX,
              y: lastY
            });
            idleCount++;
            if (idleCount > 10) {
              clearInterval(idleInterval);
            }
          };
          idle();
          idleInterval = setInterval(idle, 1000);
        };



        body.onmousemove = function(ev) {
          if (idleTimeout) clearTimeout(idleTimeout);
          if (idleInterval) clearInterval(idleInterval);

          if (trackData) {
            lastX = ev.pageX;
            lastY = ev.pageY;
            heatmap.addData({
              x: lastX,
              y: lastY
            });
            trackData = false;
          }
          idleTimeout = setTimeout(startIdle, 500);
        };
        
       

        setTimeout(function() {
          document.querySelector('.sharer').classList.add('show');
        },1000);

      };
    </script>
</body>
</html>

JS代码(prism.js):

/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
var self=typeof window!="undefined"?window:{
}
,Prism=function(){
	var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={
	util:{
	encode:function(e){
	return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;
	").replace(/</g,"&lt;
	").replace(/\u00a0/g," ")}
,type:function(e){
	return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]}
,clone:function(e){
	var n=t.util.type(e);
	switch(n){
	case"Object":var r={
}
;
	for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));
	return r;
	case"Array":return e.slice()}
return e}
}
,languages:{
	extend:function(e,n){
	var r=t.util.clone(t.languages[e]);
	for(var i in n)r[i]=n[i];
	return r}
,insertBefore:function(e,n,r,i){
	i=i||t.languages;
	var s=i[e],o={
}
;
	for(var u in s)if(s.hasOwnProperty(u)){
	if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);
	o[u]=s[u]}
return i[e]=o}
,DFS:function(e,n){
	for(var r in e){
	n.call(e,r,e[r]);
	t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}
}
}
,highlightAll:function(e,n){
	var r=document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code');
	for(var i=0,s;
	s=r[i++];
	)t.highlightElement(s,e===!0,n)}
,highlightElement:function(r,i,s){
	var o,u,a=r;
	while(a&&!e.test(a.className))a=a.parentNode;
	if(a){
	o=(a.className.match(e)||[,""])[1];
	u=t.languages[o]}
if(!u)return;
	r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;
	a=r.parentNode;
	/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);
	var f=r.textContent;
	if(!f)return;
	var l={
	element:r,language:o,grammar:u,code:f}
;
	t.hooks.run("before-highlight",l);
	if(i&&self.Worker){
	var c=new Worker(t.filename);
	c.onmessage=function(e){
	l.highlightedCode=n.stringify(JSON.parse(e.data),o);
	t.hooks.run("before-insert",l);
	l.element.innerHTML=l.highlightedCode;
	s&&s.call(l.element);
	t.hooks.run("after-highlight",l)}
;
	c.postMessage(JSON.stringify({
	language:l.language,code:l.code}
))}
else{
	l.highlightedCode=t.highlight(l.code,l.grammar,l.language);
	t.hooks.run("before-insert",l);
	l.element.innerHTML=l.highlightedCode;
	s&&s.call(r);
	t.hooks.run("after-highlight",l)}
}
,highlight:function(e,r,i){
	var s=t.tokenize(e,r);
	return n.stringify(t.util.encode(s),i)}
,tokenize:function(e,n,r){
	var i=t.Token,s=[e],o=n.rest;
	if(o){
	for(var u in o)n[u]=o[u];
	delete n.rest}
e:for(var u in n){
	if(!n.hasOwnProperty(u)||!n[u])continue;
	var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;
	a=a.pattern||a;
	for(var h=0;
	h<s.length;
	h++){
	var p=s[h];
	if(s.length>e.length)break e;
	if(p instanceof i)continue;
	a.lastIndex=0;
	var d=a.exec(p);
	if(d){
	l&&(c=d[1].length);
	var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];
	y&&w.push(y);
	var E=new i(u,f?t.tokenize(d,f):d);
	w.push(E);
	b&&w.push(b);
	Array.prototype.splice.apply(s,w)}
}
}
return s}
,hooks:{
	all:{
}
,add:function(e,n){
	var r=t.hooks.all;
	r[e]=r[e]||[];
	r[e].push(n)}
,run:function(e,n){
	var r=t.hooks.all[e];
	if(!r||!r.length)return;
	for(var i=0,s;
	s=r[i++];
	)s(n)}
}
}
,n=t.Token=function(e,t){
	this.type=e;
	this.content=t}
;
	n.stringify=function(e,r,i){
	if(typeof e=="string")return e;
	if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){
	return n.stringify(t,r,e)}
).join("");
	var s={
	type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{
}
,language:r,parent:i}
;
	s.type=="comment"&&(s.attributes.spellcheck="true");
	t.hooks.run("wrap",s);
	var o="";
	for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';
	return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"}
;
	if(!self.document){
	if(!self.addEventListener)return self.Prism;
	self.addEventListener("message",function(e){
	var n=JSON.parse(e.data),r=n.language,i=n.code;
	self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));
	self.close()}
,!1);
	return self.Prism}
var r=document.getElementsByTagName("script");
	r=r[r.length-1];
	if(r){
	t.filename=r.src;
	document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}
return self.Prism}
();
	typeof module!="undefined"&&module.exports&&(module.exports=Prism);
	;
	Prism.languages.clike={
	comment:{
	pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0}
,string:/("|')(\\?.)*?\1/g,"class-name":{
	pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{
	punctuation:/(\.|\\)/}
}
,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{
	pattern:/[a-z0-9_]+\(/ig,inside:{
	punctuation:/\(/}
}
,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{
	1,2}
|!|<=?|>=?|={
	1,3}
|&{
	1,2}
|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);
	/gi,punctuation:/[{
}
[\];
	(),.:]/g}
;
	;
	Prism.languages.javascript=Prism.languages.extend("clike",{
	keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}
);
	Prism.languages.insertBefore("javascript","keyword",{
	regex:{
	pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{
	0,3}
(?=\s*($|[\r\n,.;
}
)]))/g,lookbehind:!0}
}
);
	Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
	script:{
	pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{
	tag:{
	pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.javascript}
}
}
);
	;

CSS代码(commons.css):

html,body,p,div{margin:0;padding:0;}
.wrapper{width:840px;position:relative;margin:auto;}
.breadcrumb-trail{list-style:none;list-style-type:none;display:block;font-size:10pt;margin-top:0;margin-bottom:0;padding-left:0;}
.breadcrumb-trail li{display:inline-block;padding:5px;margin-right:15px;position:relative;line-height:normal;}
.breadcrumb-trail a{text-decoration:none;color:blue;font-weight:400;padding-bottom:1px;}
.breadcrumb-trail a:hover{border-bottom:1px solid blue;}
.breadcrumb-trail li:before{content:'\0BB';position:absolute;left:-14px;top:0px;font-weight:normal;font-size:14pt;}
.breadcrumb-trail li:first-child:before{content:'';margin-left:0;}
@font-face{font-family:'Mono Social Icons Font';src:url('../fonts/MonoSocialIconsFont-1.10.eot');src:url('../fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),url('../fonts/MonoSocialIconsFont-1.10.woff') format('woff'),url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),url('../fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');src:url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');font-weight:normal;font-style:normal;}
.symbol,a.symbol:before{font-family:'Mono Social Icons Font';-webkit-text-rendering:optimizeLegibility;-moz-text-rendering:optimizeLegibility;-ms-text-rendering:optimizeLegibility;-o-text-rendering:optimizeLegibility;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;}
a.symbol{font-size:50px;line-height:40px;text-decoration:none;color:#333;display:inline-block;display:block;-webkit-transition:.2s ease all;transition:.2s ease all;}
.s-tw:hover{color:#4099FF;}
.s-fb:hover{color:#3B5998;}
.s-gh:hover{color:black;}
a.symbol:hover{background:rgba(255,255,255,.6);}
.sharer{position:fixed;left:0;top:100px;padding-top:10px;padding-bottom:10px;background:rgba(0,0,0,.05);-webkit-transition:.3s ease all;transition:.3s ease all;-webkit-transform:translateX(-40px);transform:translateX(-40px);}
.sharer.show{-webkit-transform:translateX(0);transform:translateX(0);}

CSS代码(prism.css):

/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
/** * prism.js default theme for JavaScript,CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */
code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;font-size:.9em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
pre[class*="language-"]::-moz-selection,pre[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection{text-shadow:none;background:#b3d4fc;}
pre[class*="language-"]::selection,pre[class*="language-"]::selection,code[class*="language-"]::selection,code[class*="language-"]::selection{text-shadow:none;background:#b3d4fc;}
@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}
}
/* Code blocks */
pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;}
:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#f5f2f0;}
/* Inline code */
:not(pre) > code[class*="language-"]{padding:.1em;border-radius:.3em;}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}
.token.punctuation{color:#999;}
.namespace{opacity:.7;}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905;}
.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690;}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:hsla(0,0%,100%,.5);}
.token.atrule,.token.attr-value,.token.keyword{color:#07a;}
.token.regex,.token.important{color:#e90;}
.token.important{font-weight:bold;}
.token.entity{cursor:help;}

附件:下载该文件资源,减少时间成本(增值服务)