JavaScript实现选中文字提示新浪微博分享效果

 更新时间:2017年06月15日 10:16:07   作者:liguangsunls  
这篇文章主要为大家详细介绍了JavaScript实现选中文字提示新浪微博分享效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS新浪微博分享功能,供大家参考,具体内容如下

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS对象转换为Jquery对象实现代码

    JS对象转换为Jquery对象实现代码

    很多新手朋友们都不知道js对象如何转换为jquery对象,其实很简单,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12
  • 根据身份证号自动输出相关信息(籍贯,出身日期,性别)

    根据身份证号自动输出相关信息(籍贯,出身日期,性别)

    为了减少客户的在页面的输入,做了这个效果,他可以根据用户输入的身份证号输出籍贯、出身日期、性别的相关信息,需要的朋友可以参考下
    2013-11-11
  • 如何用JavaScript动态呼叫函数(两种方式)

    如何用JavaScript动态呼叫函数(两种方式)

    下面介绍一下动态呼叫函数目前应该有下面两种方式,它们之间的使用及对比,感兴趣的朋友可以研究下,希望可以帮助到你
    2013-05-05
  • js脚本中执行java后台代码方法解析

    js脚本中执行java后台代码方法解析

    这篇文章主要介绍了js脚本中执行java后台代码方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • js实现DOM走马灯特效的方法

    js实现DOM走马灯特效的方法

    这篇文章主要介绍了js实现DOM走马灯特效的方法,以实例形式较为详细的分析了走马灯效果的实现原理与具体步骤,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • Javascript 实现TreeView CheckBox全选效果

    Javascript 实现TreeView CheckBox全选效果

    Javascript 实现TreeView CheckBox 选中父节点时所有子节点全选,取消时全部取消
    2010-01-01
  • JavaScript观察者模式(经典)

    JavaScript观察者模式(经典)

    Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种。Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态
    2015-12-12
  • JavaScript交换变量的常用方法小结【4种方法】

    JavaScript交换变量的常用方法小结【4种方法】

    这篇文章主要介绍了JavaScript交换变量的常用方法,结合实例形式总结分析了JavaScript交换变量的4种实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • Avalonjs 实现简单购物车功能(实例代码)

    Avalonjs 实现简单购物车功能(实例代码)

    avalon是国内最强大的MVVM框架,最近小编在高购物车的项目,我们是用avalon来实现一些模块的,所以顺其自然的用avalon来实现购物车。接下来通过本文给大家分享Avalonjs 实现简单购物车功能的实例代码,需要的的朋友参考下
    2017-02-02
  • js获取css的各种样式并且设置他们的方法

    js获取css的各种样式并且设置他们的方法

    下面小编就为大家带来一篇js获取css的各种样式并且设置他们的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论