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

稿源：互联网 2022-06-13 10:13:26 点击： 565 撤稿纠错

IE里画直线，两点一线，只需要任意位置点2个点，自动生成直线效果

以下讨论的是和画直线程序相关的类似fireworks画直线的程序【仅支持IE】教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<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>&nbsp;</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> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于类似fireworks画直线的程序【仅支持IE】的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200811294180.shtml方便下次再访问哦。

·上一篇： 单选框和复选框的js取值判断
·下一篇： 一个全选,反选操作操作特效,分享一下！

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

文章分类LIST >>返回首页

最新游戏

最新新闻