0顶

画直线程序

稿源：互联网 2022-07-23 05:12:57 点击： 1785 撤稿纠错

在网页中点击两点就可以自动画出一条直线了，仅限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();">
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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>"
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
}
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;
}
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>

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

·上一篇： 漂亮全选反选效果
·下一篇： js模拟select下拉菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

画直线程序

文章分类LIST >>返回首页

最新游戏

最新新闻