<!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. RPC和Socket

    RPC和Socket的区别 rpc是通过什么实现啊?socket! RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台机器上运行的 ...

  2. apache-maven-3.0.4-bin.zip

    http://zhidao.baidu.com/share/2a8974fd1546ef5f11ad9cccb3cabf88.html apache-maven-3.0.4-bin.zip

  3. css3 背景过度实现

    代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  4. 使用IntelliJ IDEA开发前的基本设置，有助于提高开发效率

    2.界面字体大小设置 File菜单->Settings->Appearance->Override default fonts by(not recommended): Name:宋 ...

  5. 洛谷 P1885 Moo

    P1885 Moo 题目描述 奶牛Bessie最近在学习字符串操作,它用如下的规则逐一的构造出新的字符串: S(0) = “moo” S(1) = S(0) + “m”+ “ooo” + S(0) = ...

  6. Qwt库的一个使用注意事项

    作者:朱金灿 来源:http://blog.csdn.net/clever101 一般debug版本的程序链接release版本的库是没有问题的.今天使用debug版本程序链接release版本的qw ...

  7. 码农Coding Peasant(s)：一般指从事没有发展前景的软件开发职位

    码农Coding Peasant(s):一般指从事没有发展前景的软件开发职位,这种职位只能强化职业者在单方面的技术领域技能,学不到新技术,同时也是部分从事软件开发工作人员的一个自嘲的称号.一个依靠写代 ...

  8. 一个简易版的Angular js 三层 示例

    var myApp = angular.module('produceline', []); myApp.factory('ajax', ["$http", "$q&qu ...

  9. 算法导论——lec 12 平摊分析与优先队列

    在平摊分析中,运行一系列数据结构操作所须要的时间是通过对运行的全部操作求平均得出.反映在不论什么情况下(即最坏情况下),每一个操作具有平均性能.掌握了平摊分析主要有三种方法,聚集分析.记账方法.势能方 ...

  10. 设计模式(7)-结构型模式-Bridge模式

    2.结构性模式 2.2  BRIDGE模式 别名:handle/body 这个模式体现了组合相对于继承的优势. 2.2.1动机 当一个抽象可能有多个实现时,通经常使用继承来协调它们.抽象类定义对该抽象 ...