在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想实现当鼠标单击对应的层的时候，这个层的边框样式改变，并且四周加上圆点，可以用于改变这个div的大小，自己写了代码觉得很臃肿，而且很不智能，大家知道什么好的方法吗？或者有没有类似专门做这个的js库
&div id="main_box" class="main_box"&
&div class="text"&jkljdasjlkdjaslk&/div&
&div class="text"&fdgdfgd&/div&
&div class="text"&gdfgfd&/div&
&div class="text"&ghgfhfg&/div&
function addDot(num) {
for(i=0;i&=7;i++) {
var addDot = document.createElement('div');
this.appendChild(addDot);
this.appendChild(addDot).className
this.setAttribute("class","editArea_click");
this.setAttribute("id","editArea");
var editArea = document.getElementById("editArea");
var dot = this.getElementsByClassName("dot");
objWidth = editArea.offsetW
objHeight = editArea.offsetH
dot[0].style.cursor = "nwse-resize";
dot[1].style.left = (objWidth / 2)-8 + "px";
dot[1].style.cursor = "ns-resize";
dot[2].style.left = objWidth-10 + "px";
dot[2].style.cursor = "nesw-resize";
dot[3].style.left = objWidth-10 + "px";
dot[3].style.top = (objHeight / 2)-8 + "px";
dot[3].style.cursor = "ew-resize";
dot[4].style.left = objWidth-10 + "px";
dot[4].style.top = objHeight -10 + "px";
dot[4].style.cursor = "nwse-resize";
dot[5].style.left = (objWidth / 2)-8 + "px";
dot[5].style.top = objHeight -10 + "px";
dot[5].style.cursor = "ns-resize";
dot[6].style.top = objHeight -10 + "px";
dot[6].style.cursor = "nesw-resize";
dot[7].style.top = (objHeight / 2)-8 + "px";
dot[7].style.cursor = "ew-resize";
比较麻烦的是，每个圆点鼠标放上去的时候都是不同的鼠标手势，这个如何智能的实现呢？
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。当前位置: >
上一页页次1/ 5
&共153 条记录
广告服务：
Copyright @ 0sucai.com, All Rights Reserved解决a标签点击后的虚线框问题
素材网12421 次
a {outline:;}这样写瑕疵，不完美。体现在页面调用JS动作比较频繁的情况下，页面很卡~~~半个月内遇到两次这个问题，都是自己公司的平台。而网上却没有关 于这个的说法·~~而大家也都是按部就班，我不得不写一写。
解决办法就是写成这样：
a:active {outline:;}
有 的人怀疑，未什么不直接写在a里呢，为什么不这样写呢a {outline:;}， 这样不是可以包含了所有的A了吗？其实这样理论上是对的，原来我也这么用，原来也发现没什么问题，可最近在做另一个项目的时候，页面调用的JS比较多，问 题就来了~整个页面会很卡，起初找不到原因，一直抓狂~~~后来一个个排除原因，最终找到罪魁祸首竟然是CSS样式表·~~
因 为如果写在A里，那么不管是鼠标放上，鼠标点击，还是默认，都会执行 ;， 这个代码相对于IE来说就是一个CSS的动作调用，和JS原理一样，页面资源耗不起啊，也算是IE的BUG吧~~~我们实现的效果是要点击的时候没有虚 线，所以就写在a:active里就可以了，意思就是点击时才执行，才去掉虚线框。这样鼠标在放上A和默认的情况下就不会卡。
要同时兼容IE和火狐浏览器，样式直接写成以下就可以：
a {outline:}
a:active {star:expression(this.onFocus=this.blur());}
也可以单独写：
为链接添加onFocus事件
if(this.blur)this.blur()或者用IE的私有属性hideFocus=”hide”;
===Firefox===
:focus{outline:0}
该CSS可以作为全局存在，即在样式表中单独存在一行该代码即可时全页面的链接不带有虚线框
===Chrome, Safari===
这两个浏览器在点击链接时本身没有虚线框
===Jquery框架===
如果你使用Jquery框架的话，可以添加以下代码即可实现(raycross 提供)
$(“a”).bind(“focus”,function() {
if(this.blur) {this.blur()};
最终我的用法是在CSS文件直接加入：
a {outline:}
a:active {star:expression(this.onFocus=this.blur());}
:focus { outline:0; }
如果页面上只有一两个链接的话，直接加到&a&里面也行，就像这样
&a href=”#” onFocus=”this.blur()”&&img src=”img.jpg” border=0&&/a&
46 人Likes
您可能还会对这些文章感兴趣！
公司的页面是这么写的就是不知道原理！~看了看才明白为什么要这样写
汇聚素材网是一个致力于分享免费素材、模版程序、PSD素材、矢量素材、设计欣赏、网页设计、建站源码、网页重构、字体下载的免费素材网。建立本站旨在与更多人分享网络资源给人们带来的快乐与精彩！
汇聚素材网为个人免费素材网，本站内容仅供观摩学习交流之用，将不对任何资源负法律责任。如有侵犯您的权利，请及时联系本站，本站将尽快处理。HTML+js,如何实现拖动鼠标绘制一个矩形，鼠标拖动矩形还可以移动位置？_百度知道
HTML+js,如何实现拖动鼠标绘制一个矩形，鼠标拖动矩形还可以移动位置？
之前看你回答过这个问题，可是想看完整的答案你的空间还上不去。要加上调整大小，还加双击移除。同时还想实现可以画斜线，画多边形等功能。大神求帮助。
最好 用JQ做jQuery Sparklines jqPlot 可以用这2个库中的一个最好
我有更好的答案
&!--&a&href=&&&&meta&charset=&gb2312&&&title&&/title&&style&type=&text/css&&.box&{&&&&background:&#f00;&&&&width:&0&&&&height:&0&&&&position:&&&&&opacity:&0.5;&&&&cursor:&}&/style&&script&type=&text/javascript&&window.onload&=&function(e)&{&&&&e&=&e&||&window.&&&&//&startX,&startY&为鼠标点击时初始坐标&&&&//&diffX,&diffY&为鼠标初始坐标与&box&左上角坐标之差，用于拖动&&&&var&startX,&startY,&diffX,&diffY;&&&&//&是否拖动，初始为&false&&&&var&dragging&=&&&&&&&&&&&&&&&//&鼠标按下&&&&document.onmousedown&=&function(e)&{&&&&&&&&startX&=&e.pageX;&&&&&&&&startY&=&e.pageY;&&&&&&&&&&&&&&&&&&//&如果鼠标在&box&上被按下&&&&&&&&if(e.target.className.match(/box/))&{&&&&&&&&&&&&//&允许拖动&&&&&&&&&&&&dragging&=&&&&&&&&&&&&&&&&&&&&&&&//&设置当前&box&的&id&为&moving_box&&&&&&&&&&&&if(document.getElementById(&moving_box&)&!==&null)&{&&&&&&&&&&&&&&&&document.getElementById(&moving_box&).removeAttribute(&id&);&&&&&&&&&&&&}&&&&&&&&&&&&e.target.id&=&&moving_box&;&&&&&&&&&&&&&&&&&&&&&&//&计算坐标差值&&&&&&&&&&&&diffX&=&startX&-&e.target.offsetL&&&&&&&&&&&&diffY&=&startY&-&e.target.offsetT&&&&&&&&}&&&&&&&&else&{&&&&&&&&&&&&//&在页面创建&box&&&&&&&&&&&&var&active_box&=&document.createElement(&div&);&&&&&&&&&&&&active_box.id&=&&active_box&;&&&&&&&&&&&&active_box.className&=&&box&;&&&&&&&&&&&&active_box.style.top&=&startY&+&'px';&&&&&&&&&&&&active_box.style.left&=&startX&+&'px';&&&&&&&&&&&&document.body.appendChild(active_box);&&&&&&&&&&&&active_box&=&&&&&&&&&}&&&&};&&&&&&&&&&&&&&&//&鼠标移动&&&&document.onmousemove&=&function(e)&{&&&&&&&&//&更新&box&尺寸&&&&&&&&if(document.getElementById(&active_box&)&!==&null)&{&&&&&&&&&&&&var&ab&=&document.getElementById(&active_box&);&&&&&&&&&&&&ab.style.width&=&e.pageX&-&startX&+&'px';&&&&&&&&&&&&ab.style.height&=&e.pageY&-&startY&+&'px';&&&&&&&&}&&&&&&&&&&&&&&&&&&&//&移动，更新&box&坐标&&&&&&&&if(document.getElementById(&moving_box&)&!==&null&&&&dragging)&{&&&&&&&&&&&&var&mb&=&document.getElementById(&moving_box&);&&&&&&&&&&&&mb.style.top&=&e.pageY&-&diffY&+&'px';&&&&&&&&&&&&mb.style.left&=&e.pageX&-&diffX&+&'px';&&&&&&&&}&&&&};&&&&&&&&&&&&&&&//&鼠标抬起&&&&document.onmouseup&=&function(e)&{&&&&&&&&//&禁止拖动&&&&&&&&dragging&=&&&&&&&&&if(document.getElementById(&active_box&)&!==&null)&{&&&&&&&&&&&&var&ab&=&document.getElementById(&active_box&);&&&&&&&&&&&&ab.removeAttribute(&id&);&&&&&&&&&&&&//&如果&a&href=&长宽&/a&均小于&3px，移除&box&&&&&&&&&&&&if(ab.offsetWidth&&&3&||&ab.offsetHeight&&&3)&{&&&&&&&&&&&&&&&&document.body.removeChild(ab);&&&&&&&&&&&&}&&&&&&&&}&&&&};};&/script&&&&p&点击鼠标左键并拖动绘制矩形&/p&
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。html中有很多粒子线条，鼠标轻轻移动会以鼠标为中心吸附，鼠标快速移动就会断开。就像磁铁一样_百度知道
html中有很多粒子线条，鼠标轻轻移动会以鼠标为中心吸附，鼠标快速移动就会断开。就像磁铁一样
请问这是什么特效
我有更好的答案
我在一个人的博客里看到过这种效果，鼠标移动会吸附页面背景中自由碰撞的小粒子，粒子与粒子之间吸附就会成一个线条，很有意思~我准备重新找一下这个效果自己把它抠出来的PS：源码是github里面的canvas-nest.js插件，已经找到了
采纳率：36%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。