Question

jquery获取标签的位置

jquery获取标签的位置,并把它们用canvas依次连接

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
var path="";
for(var i=0;i<$(".li_1").length-1;i++){
var lineLeft_1=$(".li_1")[i].offsetLeft+10; //直线的左顶点，加10也可以改为li宽度的一半
var lineTop_1=$(".li_1")[i].offsetTop+10;
var j=i+1;
var lineLeft_2=$(".li_1")[j].offsetLeft+10;
var lineTop_2=$(".li_1")[j].offsetTop+10;

var html_i = '<line x1="'+lineLeft_1+'" y1="'+lineTop_1+'" x2="'+lineLeft_2+'" y2="'+lineTop_2+'" style="stroke:rgb(99,99,99);stroke-width:2"/>';
path += html_i;

}
$("#mySvg").html(path);
})
</script>
<style>
*{margin:0px;
padding:0px;}
li{list-style:none;}
svg{
width:100%;
height:100%;
position:absolute;
z-index:-1;
}
#cont{
width:200px;
height:150px;
border:1px #abcdef solid;
margin-left:50px;
}
#cont li{
width:15px;
height:15px;
float:left;
}
.li_1{
background:#ffcccc;
z-index:1;
border:1px solid #f9f9f9;
}
</style>

<svg id="mySvg"></svg>

<div id="cont">
<ul>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="li_1"></li>
</ul>
</div>

这是我用svg来写的，时间比较赶，只测试了谷歌浏览器，IE好像不兼容，你自己再想想办法吧希望采纳