<!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. Spring-MVC：应用上下文webApplicationContext

    一.先说ServletContext javaee标准规定了,servlet容器需要在应用项目启动时,给应用项目初始化一个ServletContext作为公共环境容器存放公共信息.ServletCon ...

  2. BZOJ 1230 Usaco2008 Nov 开关灯 线段树

    思路: 用线段树模拟题中的操作就好 (标记异或 长度=区间总长度-当前已开灯的长度) //By SiriusRen #include <cstdio> using namespace st ...

  3. Pycharm 的安装

    一. Windows 安装 汉化 破解补丁激活 下载 `https://pan.baidu.com/s/1qjI9uHaw0x374rwu6H8djA` 并将 JetbrainsCrack-2.8-r ...

  4. 实现图片懒加载(lazyload)

    对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多 ...

  5. 10G安装DataGuard

    最后更新时间:2013年8月4日,星期日 ★ oracle 10G安装环境 数据库软件安装环境不详细描述,网上到处有这方面资料,下面只简单描述下. 也可参考官方文档: http://docs.orac ...

  6. python数据处理技巧二

    python数据处理技巧二(掌控时间) 首先简单说下关于时间的介绍其中重点是时间戳的处理,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00 ...

  7. Fastboot线刷“复活”之刷机心得（三）——错误处理

        在刷机的过程中可能不会是一帆风顺的.至少我是这种,总是会遇到这样或者那样的问题,下面是我为大家总结一些问题和解决办法,希望能对大家有所帮助. 一.电量问题     刷机和系统更新有一个共同的前 ...

  8. Mysql第八天 分区与分表

    分区表 主要提供例如以下的特性,或者适合如此场景: 数据量非常大, 或者仅仅有表中最后的部分有热点数据.其它均为历史数据 分区表数据更easy维护,能够对独立的分区删除等操作 分区表的数据能够分布在不 ...

  9. 矩阵乘法2（codevs3147）

    题目描写叙述 Description 给出两个n*n的矩阵.m次询问它们的积中给定子矩阵的数值和. 输入描写叙述 Input Description 第一行两个正整数n,m. 接下来n行,每行n个非负 ...

  10. js---10时间类

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...