只是初步demo，仅供学习，事件机制可以自己研究加入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>line</title>
<meta name="description" content="" />
<meta name="author" content="Administrator" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="CSS/line.css" />
<!--[if IE]><script type="text/javascript" src="JS/excanvas.js"></script><![endif]-->
<script src="JS/jquery-1.8.2.js"></script>
</head>
<body>
<div style="float: left;width: 1px;">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</div>
<div id="left">
<ul>
<li>节点一</li>
<li>节点一</li>
</ul>
</div>
<div id="right">
<ul>
<li>节点二</li>
<li>节点二</li>
</ul>
</div>
<script src="JS/jquery.line.js"></script>
</body>
</html>
js
/**
* @author wsf
*/
(function(win,$) {
var jl = {};
win.jl = jl;
//默认属性
var _defaults = {
cwidth : 400,
cheight : 300,
ctx:null,
everything : [],
curwall:null,
wallwidth : 5,
wallstyle : "lightblue",
walls : [],
inmotion : false,
unit : 10
};
/**
* 开始画画
*/
jl.startWall = function(e) {
var mx = e.pageX-this.offsetLeft,my = e.pageY-this.offsetTop;
var opts = jl.options;
opts.curwall = new jl.wall(mx, my, mx + 1, my + 1, opts.wallwidth, opts.wallstyle);
opts.inmotion = true;
opts.everything.push(opts.curwall);
jl.drawall();
};
/**
* 画画
*/
jl.stretchwall = function(e) {
var opts = jl.options;
if (opts.inmotion) {
var mx = e.pageX-this.offsetLeft,my = e.pageY-this.offsetTop;
var my;
opts.curwall.fx = mx;
opts.curwall.fy = my;
jl.drawall();
}
}
/**
* 结束画画
*/
jl.finish = function(e) {
var opts = jl.options;
opts.inmotion = false;
opts.walls.push(opts.curwall);
}
/**
* 画的样式
*/
jl.wall = function(sx, sy, fx, fy, width, stylestring){
this.sx = sx;
this.sy = sy;
this.fx = fx;
this.fy = fy;
this.width = width;
this.draw = jl.drawAline;
this.strokestyle = stylestring;
}
/**
* 不止画线，还可以扩展
*/
jl.drawall = function(){
var opts = jl.options;
opts.ctx.clearRect(0, 0, opts.cwidth, opts.cheight);
var i;
for (i = 0; i < opts.everything.length; i++) {
opts.everything[i].draw();
}
}
/**
* 画线
*/
jl.drawAline = function(){
var ctx = jl.options.ctx;
ctx.lineWidth = this.width;
ctx.strokeStyle = this.strokestyle;
ctx.beginPath();
ctx.moveTo(this.sx, this.sy);
ctx.lineTo(this.fx, this.fy);
ctx.stroke();
}
/**
* 初始化
*/
jl.init=function(settings) {
jl.options = $.extend({},_defaults,settings);//加入自定义属性
var srcEle = $(settings.canvasId);//element
jl.options.ctx = srcEle[0].getContext('2d');
var _method = {
'mousedown':jl.startWall,
'mousemove':jl.stretchwall,
'mouseup':jl.finish
}
for(var ename in _method){
srcEle.bind(ename,_method[ename]);
}
jl.drawall();
};
jl.init({"canvasId":"canvas"});
})(window,jQuery);
css
#canvas{
background-color: #fff;
}
#left{
border:4px solid #ccc;
border-right:none;
height: 300px;
width:200px;
float: left;
}
#right{
border:4px solid #ccc;
border-left:none;
height: 300px;
width: 200px;
float: left;
}
#left li{
list-style:hiragana;
font-size:14px;
}
#right li{
list-style:cjk-ideographic;
font-size: 14px;
}
tips:css中有诀窍，自己研究吧
分享到：
相关推荐
通过阅读这两个文件，你可以更深入地理解如何在jQuery项目中实现数据绑定和分页功能，以及如何根据实际需求对其进行调整和扩展。 总的来说，掌握jQuery数据绑定分页源码对于提升前端开发能力，特别是处理大数据集和...
原绑定方法： $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为： $("#sdfsd").unbind(...在绑定新click方法前对元素所绑定的click方法解绑
在Jquery中为元素绑定事件时，需要区分对待静态和动态内容。对于静态元素，可以使用bind()方法，但对于动态生成的元素，建议使用on()方法，并将其绑定在非动态生成的父节点上。通过这种方式，无论元素何时添加到DOM...
**jQuery绑定事件**是JavaScript库jQuery中的核心功能之一，它极大地简化了DOM元素事件处理的流程，使得开发者能够更加高效地编写代码。在JavaScript原生语法中，为元素添加事件监听器通常涉及到`addEventListener`...
为了更加灵活地处理多个单选框元素，我们通常不会为每个单选框都写一遍绑定代码，而是利用Jquery强大的选择器和遍历功能。示例中的代码`$(".imagezz").click($test_image_check_box_click);`通过` $(".imagezz")`...
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要...
本项目是基于jQuery实现的一个特定功能，即"jQuery输入框提示绑定车牌所属省份代码"，旨在提升用户输入车牌号码时的体验。 首先，我们需要理解这个功能的核心需求：当用户在输入框中输入车牌号码的首字母时，系统...
本文将详细讲解如何使用jQuery实现获取绑定自定义事件元素的方法，以及涉及到的事件绑定和元素操作技巧。 首先，我们要理解jQuery的事件绑定机制。`$.fn.bind`是jQuery用于绑定事件处理函数的核心方法。默认情况下...
`.bind()`是jQuery中更通用的事件绑定方法，不仅可以绑定`click`事件，还可以绑定其他多种事件，如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子： ```javascript $('#clickmebind')....
在学习和使用这个"关系图谱代码"时，你需要熟悉d3.js的基本语法，理解如何创建数据绑定、定义图形元素和设置交互行为。同时，对jQuery的掌握也很重要，以便利用其简化DOM操作和事件处理。如果你计划自定义图谱，还...
jQuery Shortcuts 是个超轻量级的方法，使用 jQuery 来绑定快捷键（热键）。 标签：jquery
通过查看并运行这些例子，你可以更直观地理解jQuery事件绑定的工作原理，并学习如何将它们应用到自己的项目中。 总结来说，jQuery的事件绑定功能是其强大功能的一部分，它使开发者能够轻松响应用户交互，提供更加...
二级联动是指两个或多个下拉列表之间存在依赖关系，当一个列表的选择改变时，另一个列表会相应地更新其选项。在地址选择中，通常先选择省份，然后根据省份选择城市。实现这种联动效果，我们首先需要建立一个数据模型...
然而，正如标题和描述所指出的，jQuery的事件绑定有时也会带来一些问题，比如内存消耗过大、动态生成元素需要重新绑定事件以及语法冗余。本文将深入探讨这些问题，并提供相应的解决方案。 首先，让我们看看jQuery中...
《jQuery项目深度解析》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。在这个名为“jquery项目”的压缩包中，我们聚焦于jQuery的核心...
way.js是一个简单的，轻量级的，持续的，framework-agnostic JavaScript库，允许您将DOM元素绑定到一个内存数据中存储。浏览器要求ie9以上版本，演示地址：http://www.jq22.com/jquery-info546
在处理动态生成的元素时，jQuery提供了强大的选择器和方法，这使得开发者能够以简洁的方式操作这些元素，包括为它们添加事件监听器。 2. 动态生成元素的事件处理难题：在Web开发中，经常遇到需要动态生成页面元素的...
`bind()`方法是jQuery提供的一种事件绑定功能，它可以将一个或多个事件处理器函数绑定到选择器匹配的元素上。当指定的事件发生时，这些函数将会被调用。`bind()`的基本语法如下： ```javascript $(selector).bind...
在这个例子中，`#sdfsd`是一个元素的选择器，`on`是jQuery中的事件绑定方法，用于监听并响应指定的事件。每次执行这段代码时，一个新的事件处理函数会被添加到元素的`click`事件列表中。如果这段代码在页面加载、...
HTMLRender是一款基于jQuery的数据绑定模板引擎，主要用于帮助开发者在JavaScript中高效地进行DOM操作和数据渲染。这款插件是jQuery的一个扩展，它提供了一种简洁的语法来将数据与HTML结构进行绑定，使得动态生成和...