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 > ){
setTimeout(function(){
oShare.style.display = "block";
oShare.style.left = left+"px";
oShare.style.top = top+"px";
}, );
}
}
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实现选中文字 分享功能的更多相关文章
- php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义
https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...
- js 控制选中文字
//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = documen ...
- 天坑之路:用js给选中文字添加样式
前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做 ...
- 不让复制是不可能的----js获取选中文字
在360百科.知乎上经常会遇见禁止复制文本的情形,这能挡住一部分人复制,却挡不住程序员的复制. HTML都给我了,难道一小段文本我都拿不下来吗? F12打开控制台,然后选中文本,在控制台下粘贴以下代码 ...
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- js页面文字选中后分享到新浪微博实现
demo您可以狠狠地点击这里:js文字选中分享到新浪微博demo 方法与代码 选中即分享的功能看上去比较高级,其实实现是相当简单的.其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过.这个js文字 ...
- AppCan接入微信并且进行文字分享
AppCan接入微信并且进行文字分享 接入指引 实现简单的文字分享功能 接入指引 详情请参见:http://newdocx.appcan.cn/index.html?templateId=412 实现 ...
- js页面文字选中后分享实现
var $sinaMiniBlogShare = function(eleShare, eleContainer) { var eleTitle = document.getElementsByTag ...
- js分享功能(微信,QQ,微博,空间,豆瓣等)
日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功 ...
随机推荐
- 潭州课堂25班:Ph201805201 爬虫高级 第二课 sclapy 框架 (课堂笔记)
win 下安装 sclapy 先安装 pip install wheel py 库下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted 在这 ...
- 潭州课堂25班:Ph201805201 第四课:Linux的命令以及VIM的使用 (课堂笔记)
Linux的常用命令 引入 1:如果我们要在Linux里面实现一些比如查看文件和文件夹.新建文件夹之类的操作,应该是通过什么来实现 2:讲解Linux目录树 3:讲解Linux只区分文件名,Linux ...
- perl debug
1. 进入debug模式 # perl -d ./perl_debugger.pl it prompts, DB<1> 2. 查看从第10行开始的代码. 查看函数get_pattern ...
- Mac下如何设置Eclipse默认浏览器为chrome
http://stackoverflow.com/questions/5322574/how-can-i-set-chrome-as-default-external-browser-in-eclip ...
- C#高级编程----错误和异常的总结
错误和异常的总结 因为总结吗,,可能概念啥的比较多,大家要学着适应. 首先是C#中的异常用老处理系统级和用户级的错误状态,是一种结构化,统一的类型安全的处理机制. 因为鄙人开始想走C++的道路,所以搞 ...
- 用ndk-stack分析应用native程序异常crash掉
adb logcat | "/home/hxl/bin/android-ndk-r10d/ndk-stack" -sym "/home/hxl/plu/BadGame/p ...
- oracle-用户和表空间创建
windows下 创建临时表空间 create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle11i\user_te ...
- VMware: Non-VI workload detected on the datastore
check ref: Unmanaged I/O workload detected on shared datastore running Storage I/O Control (SIOC) fo ...
- 最简单的配置Centos中JAVA的环境变量的方法
一.用途 做云开发,经常用到配置java环境变量,但是每次都写太麻烦了,所以写本文,方便以后复制粘贴. 二.安装Java 1.搜索Java包:yum search java 2.安装Java包:yum ...
- document.domain 实现跨域
该方式只能用于二级域名相同的情况下,比如 a.test.com 和 b.test.com 适用于该方式. 只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同 ...