接上文[url=http://www.1sucai.cn/article/86796.htm]JavaScript简单实现弹出拖拽窗口（一）[/url]进行学习。  下面开始具体分析代码部分：  首先我们先确认下结构： [b] 悬浮窗口：[/b]初始不可见。包括标题栏和内容栏，标题栏内有标题和关闭按钮。 [b] 遮罩层：[/b]初始不可见。用于设置弹出悬浮窗口时的半透明背景， [b] 按钮：[/b]用于点击弹出悬浮窗口。  下面进行详细解释  [b]1、要让窗口能自由移动，那么窗口的定位（position）应该采用绝对定位（absolute）；   [/b] [b]2.给窗口添加标题栏，同时将标题栏的鼠标光标设置为拖动（move）形状（在chrome中拖动的时候，光标会变成文字光标，松开鼠标键后恢复），这里需要对标题栏的左上角和右上角设置一下圆角。  [/b] 这里有几个知识点需要理解： [b] 1. css3(border-radius)边框圆角[/b]  border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：  1.只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。  2.有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值  3.有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。  4.有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。  支持的浏览器：  [img]http://files.jb51.net/file_images/article/201606/201606171118343.png[/img] [b]2.  cursor: move[/b] cursor 属性规定所显示的指针（光标）的类型。  属性值为move时，表示此光标所指的对象是可以移动的，通常为一个交叉箭头，如图。 [img]http://files.jb51.net/file_images/article/201606/201606171118344.png[/img] [b]3.user-select：[/b]用来控制内容的可选择性  auto——默认值，用户可以选中元素中的内容  none——用户不能选择元素中的任何内容  text——用户可以选择元素中的文本  element——文本可选，但仅限元素的边界内(只有IE和FF支持)  需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整 [b] user-select说明： [/b] 设置或检索是否允许用户选中文本。  (1)IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；  (2)直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；  (3)unselectable 的另一个值是 off；除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。  不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本.  分析以下代码（注意：此代码及此代码的分析结果来自w3help）： 在各浏览器中效果如下： [img]http://files.jb51.net/file_images/article/201606/201606171118345.png[/img] 注1：可以禁止内容选中。 注2：没有禁止内容选中。  可见，禁止内容选中的方法如下：  IE 给标签设置 unselectable= "on" ，设置标签方法 onselectstart="return false;"  Firefox 给标签设置私有样式 -moz-user-select:none 。  Chrome Safari 给标签设置私有样式 -webkit-user-select:none ，设置标签方法 onselectstart="return false;"。  Opera 给标签设置 unselectable= "on"  [b] 解决方案 [/b] 给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= "on" ，保证各浏览器都可以禁止内容选中。  如案例中给悬浮差弹出窗的标题栏设置禁止选中样式，可以这样设置：  注意：本文为原创， 地址：[url=http://www.cnblogs.com/wanghuih/p/5576910.html]http://www.cnblogs.com/wanghuih/p/5576910.html[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。