html5 css3 实现连线功能
来源：互联网 发布：逆袭网络剧 百度云 编辑：程序博客网 时间：2024/05/10 23:51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<table style="text-align: center;width: 100%;">
<tr>
<td>
<button class="c1" style="background-color: #0f0; margin: 10px;height: 50px; width: 100px; border: solid 3px #f00;">
猫
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0;margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
dog
</button>
</td>
</tr>
<tr>
<td>
<button class="c1" style="background-color: #0f0;margin: 10px; height: 50px; width: 100px; border: solid 3px #f00;">
狗
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0; margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
cow
</button>
</td>
</tr>
<tr>
<td>
<button class="c1" style="background-color: #0f0;margin: 10px; height: 50px; width: 100px; border: solid 3px #f00;">
牛
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0;margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
cat
</button>
</td>
</tr>
<tr>
<td>
<button class="c1" style="background-color: #0f0; margin: 10px;height: 50px; width: 100px; border: solid 3px #f00;">
猪
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0; margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
pig
</button>
</td>
</tr>
</table>
<canvas id="myCanvas" width="400" height="600" style="position: absolute;top:0;left:0 ;z-index:-99 ;"></canvas>
<!--<canvas id="myCanvas1" style="position: absolute;top: 0;left:0 ;">
</canvas>
<canvas id="myCanvas2" style="position: absolute;top: 0;left:0 ;">
</canvas>
<canvas id="myCanvas3" style="position: absolute;top: 0;left:0 ;">
</canvas>-->
<script type="text/javascript" charset="utf-8">
var prenum = {
"leftt": 0,
"topp": 0
}; //
$("button").click(function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "red";
if($(this).hasClass("c1")) {
prenum.leftt = $(this).offset().left + $(this).outerWidth();
prenum.topp = $(this).offset().top + $(this).outerHeight() / 2;
} else if($(this).hasClass("c2")) {
if(prenum.leftt != 0 && prenum.topp != 0) {
ctx.moveTo(prenum.leftt, prenum.topp);
ctx.lineTo($(this).offset().left, $(this).offset().top + $(this).outerHeight() / 2);
ctx.stroke();
prenum = {
"leftt": 0,
"topp": 0
}; //
}
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<table style="text-align: center;width: 100%;">
<tr>
<td>
<button class="c1" style="background-color: #0f0; margin: 10px;height: 50px; width: 100px; border: solid 3px #f00;">
猫
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0;margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
dog
</button>
</td>
</tr>
<tr>
<td>
<button class="c1" style="background-color: #0f0;margin: 10px; height: 50px; width: 100px; border: solid 3px #f00;">
狗
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0; margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
cow
</button>
</td>
</tr>
<tr>
<td>
<button class="c1" style="background-color: #0f0;margin: 10px; height: 50px; width: 100px; border: solid 3px #f00;">
牛
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0;margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
cat
</button>
</td>
</tr>
<tr>
<td>
<button class="c1" style="background-color: #0f0; margin: 10px;height: 50px; width: 100px; border: solid 3px #f00;">
猪
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0; margin: 10px;
height: 50px; width: 100px; border: solid 3px #f00;">
pig
</button>
</td>
</tr>
</table>
<canvas id="myCanvas" width="400" height="600" style="position: absolute;top:0;left:0 ;z-index:-99 ;"></canvas>
<!--<canvas id="myCanvas1" style="position: absolute;top: 0;left:0 ;">
</canvas>
<canvas id="myCanvas2" style="position: absolute;top: 0;left:0 ;">
</canvas>
<canvas id="myCanvas3" style="position: absolute;top: 0;left:0 ;">
</canvas>-->
<script type="text/javascript" charset="utf-8">
var prenum = {
"leftt": 0,
"topp": 0
}; //
$("button").click(function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "red";
if($(this).hasClass("c1")) {
prenum.leftt = $(this).offset().left + $(this).outerWidth();
prenum.topp = $(this).offset().top + $(this).outerHeight() / 2;
} else if($(this).hasClass("c2")) {
if(prenum.leftt != 0 && prenum.topp != 0) {
ctx.moveTo(prenum.leftt, prenum.topp);
ctx.lineTo($(this).offset().left, $(this).offset().top + $(this).outerHeight() / 2);
ctx.stroke();
prenum = {
"leftt": 0,
"topp": 0
}; //
}
}
});
</script>
</body>
</html>
0 0
- html5 css3 实现连线功能
- [HTML5&CSS3]拖放功能的实现
- html5+javascript+css3实现下拉列表以及折叠功能
- <html5+css3+js>javascript实现图片滚动播放功能
- <html5+css3+js>javascript实现点击打开小窗口功能
- html5+css3实现扇形
- 高德地图实现多点连线功能
- 高德地图实现多点连线功能
- CSS3 实现动画功能
- jsPlumb开发入门教程（实现html5拖拽连线）
- jsPlumb开发入门教程（实现html5拖拽连线）
- jsPlumb实例（实现html5拖拽连线）
- 基于html5 拖拽连线加强版实现
- CSS3+HTML5实现圆角
- css3+html5实现的钟表
- HTML5、CSS3实现旋转特效
- 8款最新HTML5/CSS3功能插件
- 超酷HTML5和CSS3实现的登录及其注册功能表单
- entryset遍历打印元素
- 基于FPGA的CRC校验码生成器
- css :not的多个条件的写法
- 【android】Android studio 开发的app突然报NoClassDefFoundError
- 行测数字推理题整理
- html5 css3 实现连线功能
- 浏览器常见报错
- JVM学习-java垃圾回收(三)-内存分配
- 微信和支付宝支付实战
- Mysql命令行添加用户
- 表空间配额和UNLIMITED TABLESPACE权限
- Matlab实现批量处理图像的两种方法
- Cypher查询语言--Neo4j中的SQL（3）
- 修改eclipse中maven插件仓库地址
