<!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实现选中文字 分享功能的更多相关文章

  1. php框架tp3.2.3和js写的微信分享功能心得，分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  2. js 控制选中文字

     //脚本获取网页中选中文字 var word = document.selection.createRange().text;  //获取选中文字所在的句子 var range =  documen ...

  3. 天坑之路：用js给选中文字添加样式

    前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做 ...

  4. 不让复制是不可能的----js获取选中文字

    在360百科.知乎上经常会遇见禁止复制文本的情形,这能挡住一部分人复制,却挡不住程序员的复制. HTML都给我了,难道一小段文本我都拿不下来吗? F12打开控制台,然后选中文本,在控制台下粘贴以下代码 ...

  5. 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

    常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...

  6. js页面文字选中后分享到新浪微博实现

    demo您可以狠狠地点击这里:js文字选中分享到新浪微博demo 方法与代码 选中即分享的功能看上去比较高级,其实实现是相当简单的.其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过.这个js文字 ...

  7. AppCan接入微信并且进行文字分享

    AppCan接入微信并且进行文字分享 接入指引 实现简单的文字分享功能 接入指引 详情请参见:http://newdocx.appcan.cn/index.html?templateId=412 实现 ...

  8. js页面文字选中后分享实现

    var $sinaMiniBlogShare = function(eleShare, eleContainer) { var eleTitle = document.getElementsByTag ...

  9. js分享功能(微信,QQ,微博,空间,豆瓣等)

    日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功 ...

随机推荐

  1. [HDU1392]Surround the Trees

    思路: 凸包模板题. 注意n=1和n=2的情况. 当n=1时,不需要绳子. 当n=2时,绳子长度为两棵树之间距离. 当n≥e时,Graham求凸包即可.最后将凸包上的所有相邻点距离求和. #inclu ...

  2. bzoj 2013 上升计数

    题意: 给一个数集和一个数d,问满足下列要求的排列数(相同的数要区分):  a[i]+d>=a[i+1] ( i in [1,n) ) 因为数的给出顺序不重要,所以先排序,假如我们已经解决了前i ...

  3. Saltstack 安装 命令

    主机规划 10.0.0.21 master 10.0.0.22 minion 10.0.0.23 minion 基础环境 [root@10.0.0.21 ~]# cat /etc/redhat-rel ...

  4. mxnet安装及NDArray初体验

    一.mxnet安装 (以下均为mac环境) 有二种方式: 1.1 用conda安装 #创建gluon目录 mkdir gluon-tutorials && cd gluon-tutor ...

  5. [Go] 开发 go web 项目，踩到的一些“坑”

    注意:这些“坑”不是bug,只是自己当时没搞明白. 用到的框架为 Beego 1.字典 map 是“引用类型”,本身就是指针,作为参数传递时,直接传 map 变量名即可(不要传 map 变量指针). ...

  6. GOCN每日新闻(2017-08-12)

    1.为什么我们从 Python 转向 Go 2.Go 实现常见数据结构 3.3年半,50万行 Go 代码 4.Go 游戏引擎 oka 5.Go 是隐藏学习曲线的语言

  7. c++内存管理的一些资料

      C++内存分配方式详解--堆.栈.自由存储区.全局/静态存储区和常量存储区 如何动态调用DLL中的导出类 在dll中导出类,并结合继承带来的问题 如何更好的架构一个界面库,欢迎大家一起讨论 pim ...

  8. p4 环境变量的优先级

    Perforce settings such as port, user, and workspace names using the following methods, listed in ord ...

  9. windows环境下面批量移动文件到指定文件夹里面

    move D:批量新建文件夹\upload\20171225173033565_2052.jpg D:批量新建文件夹\1623 move D:批量新建文件夹\upload\20171225174344 ...

  10. vs2013修改书签（vs书签文件位置）

    visual studio 2013 的书签功能很好用,可以记录一些代码的位置:方便查阅: 不过当项目被他人修改过后,svn update 更新过后,书签的文件行号不变,但是已经不再是原来记录的哪一行 ...