原生JavaScript实现的demo例子,web前端中文站在前面介绍不少的实例。今天,我们用原生js来实现地图领域的效果,交互式地球模型。
主要涉及到JavaScript中的onmousemove,createElement及描点等基础知识。
效果图
交互式地球模型
代码实现
<script type="text/javascript"> //www.lisa33xiaoq.net
var object = [];
var world = "001F8C0C400031F30E7FE000FF964FFFFF00FFB067FFFE001FF03FFFFA001FF07FFFFC003F806BFFF4001F8020FFF4001D007FFFF4000E80FFE7F0000600FFC6680001E07FC2180001F00FC0780001FC0F81730001FC0F80940000FC0F400F0020780F403F00007006001F00006000000640006000000080006000000000002000000000";
var xm = -1000,
ym = -1000,
xmb = 0,
ymb = 0,
nx = 0,
ny = 0,
sx,
sy,
sp,
bv,
bh,
pt;
/* mouse events */
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = (e.x || e.clientX) - nx;
ym = (e.y || e.clientY) - ny;
xm = Math.round(Math.round(xm/11)*11);
ym = Math.round(Math.round(ym/11)*11);
}
function resize() {
sx = sp.offsetLeft;
sy = sp.offsetTop;
nx = document.body.offsetWidth * .5 + sx;
ny = document.body.offsetHeight * .5 + sy;
}
onresize = resize;
/* create pixel */
function CObj(x, y){
var o = document.createElement("span");
o.style.left = Math.round(x * 11)+"px";
o.style.top = Math.round(y * 11)+"px";
sp.appendChild(o);
o = document.createElement("span");
sp.appendChild(o);
this.obj = o.style;
this.x = x;
this.y = y;
this.x0 = x * 11;
this.y0 = y * 11;
this.anim = true;
}
CObj.prototype.mainloop = function(){
var dx = xm - this.x0;
var dy = ym - this.y0;
var dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 140) {
/* globe */
if(!this.anim){
this.anim = true;
this.obj.background = (((this.x>16&&this.x<23&&this.y<8)&&!(this.x==22&&this.y==6))||(this.x==23&&this.y==3))?"#F80":"#FFF";
this.obj.zIndex = 5;
}
var M = Math.cos(.5 * Math.PI * dist / 140);
this.obj.left = Math.round(-sx -xm + this.x0 - dx * M)+"px";
this.obj.top = Math.round(-sy -ym + this.y0 - dy * M)+"px";
this.obj.width = this.obj.height = Math.round(M * 14)+"px";
} else {
if(this.anim){
/* background */
this.obj.left = this.x0+"px";
this.obj.top = this.y0+"px";
this.obj.width = this.obj.height = "";
this.obj.background = (((this.x>16&&this.x<23&&this.y<8)&&!(this.x==22&&this.y==6))||(this.x==23&&this.y==3))?"#C70":"#666";
this.obj.zIndex = 3;
this.anim = false;
}
}
}
function mainloop(){
/* mainloop */
if(xm!=xmb || ym!=ymb){
bv.left = xm+"px";
bh.top = ym+"px";
pt.left = xm+"px";
pt.top = ym+"px";
for(i in object) object[i].mainloop();
}
xmb = xm;
ymb = ym;
setTimeout(mainloop, 16);
}
onload = function(){
/* pointers */
bv = document.getElementById("bv").style;
bh = document.getElementById("bh").style;
pt = document.getElementById("pt").style;
sp = document.getElementById("sp");
/* decompress world */
var bits = "";
var o;
for(var i=0, n=world.length; i<n; i+=2){
o = parseInt(world.substring(i,i+2), 16).toString(2);
bits += "00000000".substring(0, 8-o.length)+o;
}
/* create pixels */
var k = 0;
for(var y=0;y<22;y++){
for(var x=0;x<48;x++){
if(bits.charAt(k++)=="1")object.push(new CObj(x, y));
}
}
/* run */
resize();
mainloop();
}
</script>
原文链接:web前端中文站 https://www.lisa33xiaoq.net/1283.html