2 liangtian0915 liangtian0915 于 2016.09.06 14:19 提问

html根据坐标动态生成图形 10C

假如后台给我的数据把每列的设备的位置用坐标传给我了,有什么办法可以动态生成这样的图形。![图片说明](http://img.ask.csdn.net/upload/201609/06/1473142652_635359.png)图片说明

6个回答

zhuzige521888
zhuzige521888   2016.09.06 14:30

用iframe,准备好小图片,跟图数据循环的拼成整张图,根据位置状态,改变颜色或者准备两个其他颜色图形。

showbo
showbo   Ds   Rxr 2016.09.06 14:52

不就是个absolute定位的问题,自己依据坐标计算好对应的格子位置就行了

qq_29594393
qq_29594393   Ds   Rxr 2016.09.06 15:29
    $('p').append("<img src=''>")
                $("p>img:eq("+j+")").css({"top":y+'px',"left":x+'px',"width":circle,'height':circle,'border-radius':circle})
            //  把X和Y改成鼠标坐标,如果不想乱生成,就限制一个判定范围,参考下棋时选定棋子的范围,和棋子的生成坐标
            //CSS中吧img设置为绝对定位
qq_29594393
qq_29594393   Ds   Rxr 2016.09.06 16:39
$("").click(function(e){
 $('').append("<img src=''>")
                $("p>img:eq("+j+")").css({"top":e.pageY+'px',"left":e.pageX+'px'})
})

        如果不想乱生成,就限制一个判定范围,参考下棋时选定棋子的范围,和棋子的生成坐标
       CSS中img设置为绝对定位       
qq_29594393
qq_29594393   Ds   Rxr 2016.09.06 16:43
 $().click(function(e){
$().append("<img src=''>")
                    $("p>img:eq("+j+")").css({
                    "top":e.pageY+'px',
                    "left":e.pageX+'px'
                    })                  
})

img要绝对定位, 如果不想乱生成,就限制一个判定范围,参考下棋时选定棋子的范围,和棋子的生成坐标

liangtian0915
liangtian0915 乱了
大约一年之前 回复
liangtian0915
liangtian0915 回复当作看不见: 按照你说的,我动态把坐标放进去了,效果是这样的
大约一年之前 回复
qq_29594393
qq_29594393 鼠标选择一下就能看到,csdn的一个bug
大约一年之前 回复
liangtian0915
liangtian0915   2016.09.06 17:17

图片说明
图片说明

liangtian0915
liangtian0915 回复当作看不见: 1216403253,可以加你qq聊吗
大约一年之前 回复
qq_29594393
qq_29594393 注意,e.pageX 和e.pageY是系统方法,就是鼠标的位置,e为前面的click函数的参数
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片