javaScript实现选中文字提示新浪微博分享的效果

最新推荐文章于 2020-03-29 00:00:00 发布

前端岚枫

最新推荐文章于 2020-03-29 00:00:00 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签：微博分享效果 javascript 选中文字分享

本文链接：https://blog.csdn.net/lfcss/article/details/46412317

版权

js 专栏收录该内容

101 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html  xmlns:wb="http://open.weibo.com/wb">
<head>
    <meta charset="utf-8">
    <title>javaScript实现选中文字提示新浪微博分享的效果</title>
    <style type="text/css">
      #div1{ position: absolute; left: 0;top: 0; display: none;}
    </style>
</head>
<body>
    <p id="txt">
        一直对json的用法迷迷糊糊，知道一些简单的用法，有时用起来很容易把自己搞混，今天专门查了一下相关的JSON的资料及用法，总结记录下来。JSON并不是一种编程语言，可以理解成它是一种数据格式，虽然具有相同的语法形式，但是JSON并不属于JavaScript。而且，并不是所有的JavaScript才使用JSON，很多编程语言都有针对JSON的解析器和序列化器。JSON的语法可以表示三种类型值：
    </p>
    <div id="div1"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=163431486,1136892253&fm=58"></div>
    <script type="text/javascript">
        window.onload=function(){
           function selectText(){
               if(document.selection){
               //兼容ie
                   return document.selection.createRange().text;
               } else{
               //标准的获取方法
                   return window.getSelection().toString();
               }
           }
            var oTxt = document.getElementById('txt');
            var oDiv = document.getElementById('div1');

            oTxt.onmouseup = function(ev){
                var ev =ev||window.event;
                var top = ev.clientY;
                var left = ev.clientX;
                if(selectText().length>10){
                    console.log(selectText())
                    setTimeout(function(){
                        oDiv.style.display = 'block';
                        oDiv.style.left =left+'px';
                        oDiv.style.top = top +'px';
                    },1000)
                } else{
                    oDiv.style.display = 'none';
                }
            };
            oTxt.onclick =function(ev){
                var ev =ev||window.event;
                ev.cancelBubble = true;
            }
            document.onclick = function(){
                oDiv.style.display = 'none';
            };
            //点击分享的实现
            oDiv.onclick = function(){
                window.location.href='http://service.weibo.com/share/share.php?url=http%3A%2F%2Flocalhost%3A63342%2Fjs2%2Fpicscroll.html&type=icon&language=zh_cn&searchPic=true&style=simple'+selectText()+window.location.href;
            }
        }
    </script>

</body>
</html>

前端岚枫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript实现选中文字提示新浪微博分享的效果

<!DOCTYPE html><html xmlns:wb="http://open.weibo.com/wb"><head> <meta charset="utf-8"> <title>javaScript实现选中文字提示新浪微博分享的效果</title> <style type="text/css"> #div1{ position: absolute;
复制链接

扫一扫