<!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. 来自极客头条的 15个常用的javaScript正则表达式

    摘要收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. Q ...

  2. FCKEditor在IE10下的不兼容问题解决方法

    环境介绍:FCKEditor 版本 2.x.x 问题:IE10 下FCKEditor不兼容,显示不出来 关键词:不同于其他方法之处是第一个关键点,其他网友的正则表达式不对 解放方法:(可以直接< ...

  3. SpringBoot 日志框架

    默认的日志框架 logback SpringBoot使用Logback作为默认的日志框架.logback 是log4j框架的作者开发的新一代日志框架,它效率更高.能够适应诸多的运行环境,同时天然支持S ...

  4. WHY数学表达式的3D可视化

    WHY数学表达式的3D可视化 很早之前我就有这种想法,将数学表达式的图形显示出来.最近终于实现了这套较为完善的版本,将其代码公布,也为开源做点贡献.首先系统中定义一套脚本语言格式,用于描述数学表达式. ...

  5. [leetcode]Rotate List @ Python

    原题地址:https://oj.leetcode.com/problems/rotate-list/ 题意: Given a list, rotate the list to the right by ...

  6. 用 Prettier 统一团队的代码风格~

    使用 prettier 自動調整 JavaScript 樣式 GFM 格式说明 为什么你不能缺少Linter(以及代码美化工具) 使用 prettier 自動調整 JavaScript 樣式 Reac ...

  7. PPTP 在Centos 7.1 建立方法与失效处理

    # yum install pptp pptp-setup pptpsetup --create vpn --server  (serverName) --username (Username)  - ...

  8. 如何寻找linux下相关软件

    当在linux下运行程序遇到找不到库的时候可以使用yum whatprovides 来找到到需要安装的包. 例如:yum whatprovides libz.so.1  然后安装找到的包 yum in ...

  9. OkHttp踩坑记：为何 response.body().string() 只能调用一次？

    想必大家都用过或接触过 OkHttp,我最近在使用 Okhttp 时,就踩到一个坑,在这儿分享出来,以后大家遇到类似问题时就可以绕过去. 只是解决问题是不够的,本文将 侧重从源码角度分析下问题的根本, ...

  10. iOS开发之Xcode9报错 Compiling IB documents for earlier than iOS7 is no longer supported.

    升级到Xcode9时,最低的编译版本为iOS8,但是在使用一些SDK的时候就会报出Compiling IB documents for earlier than iOS7 is no longer s ...