<!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. Redis之创建

    redis配置文件信息 public sealed class RedisConfigInfo { /// <summary> /// 可写的Redis链接地址 /// format:ip ...

  2. windows 手动添加服务

    windows 手动添加服务方法一:修改注册表 在注册表编辑器,展开分支"HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services" ...

  3. CodeChef November Challenge 2013 部分题解

    http://www.codechef.com/NOV13 还在比...我先放一部分题解吧... Uncle Johny 排序一遍 struct node{ int val; int pos; }a[ ...

  4. ES6学习笔记（十）代理器Proxy

    Java可以使用面向切面(AOP)的方法来实现某些统一的操作,比如某个操作的前置通知,后置通知等等,这种操作非常方便,其本质便是动态代理,JS的代理Proxy代理该如何使用呢? 某位大神的实现如下: ...

  5. BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)

    Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作,操作分三种: Cv x v':把第x个字符串的权值修改为v' Cs x a':把第x个字符串修改成a ...

  6. mysql索引工作原理、分类

    一.概述 在mysql中,索引(index)又叫键(key),它是存储引擎用于快速找到所需记录的一种数据结构.在越来越大的表中,索引是对查询性能优化最有效的手段,索引对性能影响非常关键.另外,mysq ...

  7. 【Uva 1630】Folding

    [Link]: [Description] 你能对字符串进行压缩的操作; 即把连续出现的相同的子串改成它出现的次数+这个最基本的字符串的形式; 问你这个字符串最短能被压缩得多短; [Solution] ...

  8. Struts（18）标签

    控件标签 Struts 2 的标签有一组标签.更easy控制流程页面运行.下面是重要的Struts2控制标签列表: if /else 标签: 这些标签运行可在每一种语言找到的一种基本条件流程. 'If ...

  9. Your Ruby version is 2.2.3, but your Gemfile specified 2.2.2

    在文章 Ruby On Rails中REST API使用演示样例--基于云平台+云服务打造自己的在线翻译工具 中,从Bluemix上下载的初始Hello World演示样例代码在本地环境下运行调试时提 ...

  10. jQuery源码04 data() : 数据缓存

    /* Implementation Summary 1. Enforce API surface and semantic compatibility with 1.9.x branch 2. Imp ...