<!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的使用方法迷迷糊糊，知道一些简单的使用方法，有时用起来非常easy把自己搞混。今天专门查了一下相关的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>

javaScript实现选中文字提示新浪微博分享的效果的更多相关文章

  1. jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 用js实现文字提示层 ---总结

    文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下:  需求: 当鼠标移入到红色字体是,提示框会显示在下 ...

  3. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  4. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  5. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  6. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...

  7. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  8. c# webbrowser  获取用户选中文字

    原文:c# webbrowser  获取用户选中文字 最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, webbrowser  获取用户选中文字" tit ...

  9. Javascript之模拟文字高亮

    在我们平时浏览网页的时候,我们常常会用到Ctrl+F(搜索)功能,被搜索到的文字就是高亮显示.那么,如何在Javascript中模拟文字高亮显示这一功能呢? 以下为笔者写的样例代码: <!DOC ...

随机推荐

  1. 30.angularJS第一个实例

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 Angu ...

  2. hibernate generator id

    以下内容整理自网络 “assigned” 主键由外部程序负责生成,在   save()   之前指定一个.  “hilo” 通过hi/lo   算法实现的主键生成机制,需要额外的数据库表或字段提供高位 ...

  3. Conservative GC （Part one）

    目录 保守式GC 不明确的根 指针和非指针的区别 貌似指针的非指针 不明确数据结构 优点 准确式GC 正确的根 打标签 不把寄存器和栈等当做根 优点 缺点 间接引用 经由句柄引用对象 优缺点 保守式G ...

  4. 重装python 和 yum

    https://blog.csdn.net/ghostyusheng/article/details/https://segmentfault.com/q/1010000009194060/a-102 ...

  5. Django_shell命令操作

  6. 洛谷——P1043 数字游戏

    https://www.luogu.org/problem/show?pid=1043 题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要 ...

  7. [Python] Python Libs

    The Python Standard Library has a lot of modules! To help you get familiar with what's available, he ...

  8. Spark 性能相关參数配置具体解释－任务调度篇

    作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ 随着Spark的逐渐成熟完好, ...

  9. dlmalloc 2.8.6 源代码具体解释(5)

    本文章由vector03原创, 转载请注明出处. 邮箱地址: mmzsmm@163.com, 欢迎来信讨论.     3. 分配及实现 本章节介绍dlmalloc的分配算法和实现.由于存在多mspac ...

  10. javafx KeyFrame

    import javafx.animation.Animation; import javafx.animation.KeyFrame; import javafx.animation.Timelin ...