js实现选中文字 分享功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title>分享</title> <style> ::selection { background-color:#FDC4ED; } ::-webkit-selection { background-color:#FDC4ED; } ::-moz-selection { background-color:#FDC4ED; } #box { width:600px; margin:20px auto; } #share { width:26px; height:26px; position:absolute; cursor:pointer; display:none; } </style> </head><body><div id="box"><h2>CSS布局的未来</h2><p>大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的。</p><p>在这里,我能够保证在数年之后,css3必定能够引领潮流。一揽子的前端工具正在应运而生,方便为我们带来rounded corners圆角,gradients渐变,opacity透明度,transformations,transitions,animations,甚至更多效果。但是现在我们都有了fun stuff,eye candy,还有需要什么呢?</p><p>下一个我们需要面对的就是关于定位css3的布局问题,虽然现在我们在可以使用float,relative定位,负值margin进行定位,但是我们仍然很难在多栏目的布局上大展身手。</p><p>W3C组织以及浏览器制作商意识到了这个问题,也推出了一揽子解决方案。其中的主力军是IE团队。IE10就好比步入css布局新时代的先驱者,它让我们的网站变得更加丰富多彩,灵活多变,吸引大家的眼球。</p><p>在这篇文章当中,我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具,也许在这些阶段中你不一定用得到他们,(至少不是现在),但仍然还很有必要去了解,通过这样可以透过迷雾,看清未来。如果你需要在这个文章当中对这些工具需要更多细节的介绍,或者更多介绍css3的内容,可以向大家推荐 这本书。</p><p>多列布局(Columns)<br> 在多栏目中分配好内容是排版的重中之重,CSS Multi-Columns module同样能够为我们在网页上实现自适应的效果。下面有两种方法实现栏目的布局,值得一提的是这两种方法都采用了不同的属性(而且他们都需要有个干爹罩着-父级容器)。第一个方法就是直接指定,也就是说你直接指明需要在文本当中设置的栏目列数就行了。下面的代码能够产生三栏的文本,其宽度大小填满了父级的宽度。</p> </div><div id="share"><img src="http://static.bshare.cn/frame/images/logos/m2/sinaminiblog.gif" alt=""></div><script type="text/javascript">window.onload = function(){var oBox = document.getElementById("box");var oShare = document.getElementById("share");oBox.onmouseup = function(ev){var ev = ev||event;var left = ev.clientX;var top = ev.clientY;if(selectText().length > 10){setTimeout(function(){oShare.style.display = "block";oShare.style.left = left+"px";oShare.style.top = top+"px";}, 100);}}oBox.onclick = function(ev){var ev = ev||event;oBox.cancelBubble = true;}document.onclick = function(){oShare.style.display = "none";}oShare.onclick = function(){window.location.href = "http://v.t.sina.com.cn/share/share.php?searchPic=false&title=" + selectText() + "http://www.cnblogs.com/huanlei/";} }function selectText(){if(document.selection){return document.selection.createRange().text; //IE}else{return window.getSelection().toString(); //getSelection()获取的是对象,toString()转成字符串 } } </script></body> </html>
js实现选中文字 分享功能相关推荐
- js实现第三方平台分享功能
1. qq好友分享实现 API文档:https://connect.qq.com/intro/sharetoqq/ 链接为 : http://connect.qq.com/wi ...
- js 控制选中文字
//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = documen ...
- java实现给选中文字添加样式,天坑之路:用js给选中文字添加样式
前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做 ...
- 不让复制是不可能的----js获取选中文字
在360百科.知乎上经常会遇见禁止复制文本的情形,这能挡住一部分人复制,却挡不住程序员的复制. HTML都给我了,难道一小段文本我都拿不下来吗? F12打开控制台,然后选中文本,在控制台下粘贴以下代码 ...
- 利用NativeShare.js实现移动端分享功能
原文地址 https://github.com/fa-ge/NativeShare/blob/master/README.md 下载地址:https://github.com/fa-ge/Native ...
- js——发表评论和分享功能
js部分: window.onload=function(){var btnShare=document.getElementById('btn_share');var btnPut=document ...
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- js页面文字选中后分享到新浪微博实现
一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享 ...
- 一、功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享
一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享 ...
最新文章
- C#初学——doWhile
- 清华男女图鉴 | 有电车会拍照,我在清华还是找不到女朋友
- 使用express搭建第一个Web应用【Node.js初学】
- 通过电机编码器AB相输出确定电机转向
- 阅读应用的社交还能做什么?
- Andlinux 使用记录(转)
- ldap数据库--ODSEE--复制协议
- 计算机复试通知学校,提醒:部分学校复试通知已经出了!教育部关于21考研复试的规定!...
- 部署java项目_企业最看重什么样的Java人才?
- 搞不定的C语言--extern的作用
- ASP.NET MVC多语言 仿微软网站效果(转)
- 三星Galaxy S22系列零部件开始量产:搭载骁龙898 最早1月亮相
- 收款收据设计html,统一收款收据打印软件怎么制作收据 制作打印的方法
- 神经网络中常用的误差平方和损失函数是什么
- 都要2022年了,你还在纠结pytorch还是tensorflow?
- Ubuntu 安装字体
- 错误:80040154 没有注册类 的问题
- 看完《长安十二时辰》惊呆了!难道唐朝就已经有大数据和云计算?
- PageHelper分页永远返回第一页数据
- 二分搜索几种写法分析