类似fireworks画直线的程序【仅支持IE】-JS特效-爱易网页

类似fireworks画直线的程序【仅支持IE】

日期：2014-05-18　浏览次数：20400 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<html>
<head>
<style type="text/css">
body{
margin:0px;
color:#ffffff;
background:#000000;
font-size:12px;
}
div{
float:inline;
margin:0px;
}
#box{
position:absolute;
left:50%;
top:50%;
margin-left:-390px;
margin-top:-270px;
width:740px;
height:540px;
border:1px solid #eeeeee;
background:#cccccc;
}
#container{
position:absolute;
left:50%;
top:50%;
margin-left:-320px;
margin-top:-240px;
width:640px;
height:480px;
border:1px solid #666666;
background:#ffffff;
overflow:hidden;
cursor:crosshair;
}
#contain{
position:absolute;
left:0;
top:0;
width:640px;
height:480px;
overflow:hidden;
z-index:1;
}
#cy{
color:#000000;
text-align:right;
padding-top:14px;
position:absolute;
left:0px;
top:10px;
width:50px;
border-right:1px solid #666666;
height:30px;
}
#cx{
color:#000000;
text-align:right;
padding-right:18px;
padding-top:2px;
position:absolute;
bottom:0px;
right:10px;
height:30px;
border-top:1px solid #666666;
width:50px;
}
#o{
color:#000000;
text-align:right;
padding-right:2px;
padding-top:6px;
position:absolute;
bottom:10px;
left:0px;
height:30px;
width:50px;
}
</style>
</head>
<body scroll="no" onload="initTab();">
<div id="box"><div id="cy">(0,480)</div><div id="cx">(640,0)</div><div id="o">(0,0)</div><div id="container" onclick="draw()" oncontextmenu="window.location=window.location;return false;" onmousemove="return false"><div id="contain"></div></div></div>
<script language="javascript">
/*
作者：hsb008 QQ:416143054
使用方法：
1.鼠标在白色区域内取点 ，取到两点就画线
2.右击清除。
*/
var z=1;
var flag=0,xx1,xx2,yy1,yy2;
function initTab(){
var contain=document.getElementById("contain");
var str,i,j;
str="<table width='640' height='480' border='1' cellpadding='0' cellspacing='0'  style='border-collapse:collapse;border-color:#eeeeee;background:white;position:absolute;top:-1px;left:0px;'>"
for(i=0;i<12;i++){
str+="<tr>"
for(j=0;j<16;j++){
str+="<td> </td>"
}
str+="</tr>"
}
str+="</table>"
contain.innerHTML=str;
}
function setpixel(x,y,color,size){
var div=document.createElement("div");
var container=document.getElementById("container");
size=size==""?"5px":""+size+"px";
div.style.zIndex=z++;
div.style.overflow="hidden";
div.style.position="absolute";
div.style.left=x;
div.style.bottom=y;
div.style.width=size;
div.style.height=size;
div.style.backgroundColor=color;
container.appendChild(div);
}
function DDALine(x1,y1,x2,y2){
var dx,dy,x,y,t,i;
dx=x2-x1;
dy=y2-y1;
t=Math.abs(dx)>Math.abs(dy)?Math.abs(dx):Math.abs(dy);
dx/=t;
dy/=t;
x=x1;
y=y1;
for(i=0;i<t;i++){
setpixel(Math.round(x),Math.round(y),"#000000",1);
x+=dx;
y+=dy;
}
}
function draw(){
var box=document.getElementById("box");
var container=document.getElementById("container");
var x=event.x-box.offsetLeft-container.offsetLeft-4;
var y=document.body.clientHeight-event.y-box.offsetTop-container.offsetTop-2;
if(flag==0){
xx1=x;
yy1=y;
setpixel(xx1,yy1,"#000000",2);
flag=1;
}else{
xx2=x;
yy2=y;
setpixel(xx2,yy2,"#000000",2);
DDALine(xx1,yy1,xx2,yy2);
flag=0;
}
}
</script>
</body>
</html></font>
<a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

类似fireworks画直线的程序【仅支持IE】

相关资料更多>

推荐阅读更多>