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)