java、js怎么实现连线题功能

JavaScript017

java、js怎么实现连线题功能,第1张

你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整

代码如下

<%@ page contentType="text/htmlcharset=utf-8" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>测试</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

function drawThis(obj){

if(obj.style.border=="1px solid red"){

obj.style.border="1px solid blue"

}else{

obj.style.border="1px solid red"

}

var div = document.getElementsByTagName("div")

var leftX = ""

var leftY = ""

var rightX=""

var rightY=""

for ( var i = 0i <div.lengthi++) {

if(div[i].style.border=="1px solid blue"){

if(div[i].className=="left"){

leftX = $(div[i]).position().left+70

leftY = $(div[i]).position().top+35

}else if(div[i].className=="right"){

rightX = $(div[i]).position().left

rightY = $(div[i]).position().top+35

}

}

}

if(rightX!=""&&leftX!=""){

for ( var i = 0i <(rightX-leftX)/2i++) {

var newDiv = document.createElement("div")

var y = (rightY-leftY)/((rightX-leftX)/2)

$(newDiv).css("background-color", "red")

$(newDiv).css("z-index","2")

$(newDiv).css("left",(leftX+i*4))

$(newDiv).css("top",(leftY+i*y))

$(newDiv).css("height",y+"px")

$(newDiv).css("width","4px")

$(newDiv).css("position","absolute")

$("#detail").append(newDiv)

}

}

}

</script>

</head>

<body>

<div align="center" style="margin-top: 20pxmargin-left: 30%" id="detail">

<div class="left" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px" onclick="drawThis(this)">a</div>

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">1</div>

<br />

<br />

<br />

<br />

<br />

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">b</div>

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">2</div>

<br />

<br />

<br />

<br />

<br />

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">c</div>

<div class="right" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px" onclick="drawThis(this)">3</div>

</div>

</body>

</html>

设置一个带border的div，对象A在

mousedown

的时候监听

mousemove

事件，根据鼠标的位移来设置其宽度，mouseup的时候，移除mousemove事件。