<!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. C++中友元类使用场合

    在C++中我们可以將函数定义成类的友元函数,这样在函数中就可以访问类的私有成员.与函数相同,类也可以作为另一个类的友元类,在友元类中可以访问另外一个类的所有成员. 声明友元类的方法很简单,只需在类中写 ...

  2. Python(九) Python的高级语法与用法

    本章节我们揭开Python进阶部分的高级特性,详细讲解枚举.闭包,并对函数式编程做出介绍 一. 枚举其实是一个类 from enum import Enum #枚举类 class VIP(Enum): ...

  3. 学习NLP:《精通Python自然语言处理》中文PDF+英文PDF+代码

    自然语言处理是计算语言学和人工智能之中与人机交互相关的领域之一. 推荐学习自然语言处理的一本综合学习指南<精通Python自然语言处理>,介绍了如何用Python实现各种NLP任务,以帮助 ...

  4. Vue2.0八——知识点整理

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  5. cassandra install - +HeapDumpOnOutOfMemoryError -Xss180k

    原因分析: You are running out of allocted memory for the JAVA VM (128k) is to less. Modify the line belo ...

  6. VS 格式化代码 Ctrl + K, Ctrl + F

  7. 3.Maven之（三）Maven插件

    转自:https://yq.aliyun.com/ziliao/312162 Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,像编译是通过maven- ...

  8. 暑假集训-二分图,网络流,2-SAT

    匈牙利算法DFS bool dfs(int u){ ; i <= n; i++){ if(a[u][i] && !visit[i]){ visit[i] = true; || d ...

  9. OpenCV —— ROI

    通过 cvResetImageRoI 函数释放ROI是非常重要的,否则其他操作将默认在ROI区域中进行 通过巧妙的使用widthStep,可以达到同ROI一样的效果 —— 如果想设置和保持一副图像的多 ...

  10. errpt命令

    errpt –a 详细信息 errpt  -a –s [TIMESTAMP] errpt –aj  [IDENTIFIER] errclear 清除(后面接参数) errpt -aj BFE4C025 ...