JavaScript简单实现弹出拖拽窗口(二)

前端之家收集整理的这篇文章主要介绍了JavaScript简单实现弹出拖拽窗口(二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

接上文进行学习。 下面开始具体分析代码部分: 首先我们先确认下结构: 悬浮窗口:初始不可见。包括标题栏和内容栏,标题栏内有标题和关闭按钮。 遮罩层:初始不可见。用于设置弹出悬浮窗口时的半透明背景, 按钮:用于点击弹出悬浮窗口。

下面进行详细解释

1、要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute);

2.给窗口添加标题栏,同时将标题栏的鼠标光标设置为拖动(move)形状(在chrome中拖动的时候,光标会变成文字光标,松开鼠标键后恢复),这里需要对标题栏的左上角和右上角设置一下圆角。

这里有几个知识点需要理解: 1. css3(border-radius)边框圆角 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。 支持的浏览器:

2. cursor: move

cursor 属性规定所显示的指针(光标)的类型。 属性值为move时,表示此光标所指的对象是可以移动的,通常为一个交叉箭头,如图。

3.user-select:用来控制内容的可选择性 auto——默认值,用户可以选中元素中的内容 none——用户不能选择元素中的任何内容 text——用户可以选择元素中的文本 element——文本可选,但仅限元素的边界内(只有IE和FF支持) 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整

user-select说明:

设置或检索是否允许用户选中文本。 (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):

unselectable=on

-webkit-user-select:none;

-moz-user-select:none;

onselectstart="return false;"

在各浏览器中效果如下:

注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"

解决方案 给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= "on" ,保证各浏览器都可以禁止内容选中。 如案例中给悬浮差弹出窗的标题栏设置禁止选中样式,可以这样设置:

属性目前并未支持,写在这里为了减少风险 */ }

注意:本文为原创,地址:nofollow" target="_blank" href="http://www.cnblogs.com/wanghuih/p/5576910.html">http://www.cnblogs.com/wanghuih/p/5576910.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/47799.html

猜你在找的JavaScript相关文章