这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了 js 实现文字选中分享功能的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
总结:文字选中 IE 和其他浏览器不一样
在 IE 中文字选中后鼠标抬起,图片显现触发有点快所以用定时器。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=utf-8 />
- <title>
- </title>
- <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
- </script>
- <style type="text/CSS">
- *{padding: 0;margin: 0;} #p1{width: 300px;} #div1{display: none;position:
- absolute;} img{width:26px;height:26px;}
- </style>
- </head>
- <body>
- <p id="p1">
- 文字的选中功能是不太常用的功能,多出现在文本编辑器中,或是文本域之类的光标处理上。所以呢,使用的一些属性也并不是常见的。在IE浏览器下使用的是createTextRange而Firefox/chrome等现代浏览器下使用的是setSelectionRange。
- </p>
- <div id='div1'>
- <img src='http://cdn.attach.qdfuns.com/notes/pics/201701/23/221744ud9ggjjjgg85e90m.gif.editor.gif'>
- </div>
- <script type="text/javascript">
- function selectText() {
- if (document.selection) {
- //IE
- return document.selection.createRange().text
- } else {
- //ff chrom
- return window.getSelection().toString()
- }
- }
- var oP = document.getElementById('p1') var oDiv = document.getElementById('div1') oP.onmouseup = function(ev) {
- var ev = ev || event
- var left = ev.clientX
- var top = ev.clientY
- if (selectText().length > 10) {
- setTimeout(function() {
- oDiv.style.display = 'block';
- oDiv.style.left = left + 'px'oDiv.style.top = top + 'px'
- },
- 100)
- } else {
- oDiv.style.display = 'none';
- }
- }
- //点击oP阻止冒泡到document上
- oP.onclick = function(ev) {
- var ev = ev || window.event ev.cancelBubble = true
- }
- document.onclick = function() {
- oDiv.style.display = 'none';
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0531/328137.html