Maison > interface Web > js tutoriel > le corps du texte

Exemple de tutoriel sur la réalisation de l'effet de partage Sina Weibo dans JS

零下一度
Libérer: 2017-06-17 10:40:58
original
1747 Les gens l'ont consulté

Cet article présente principalement en détail JavaScript pour réaliser l'effet de partage d'invite de texte sélectionné Sina Weibo. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article. partage la fonction de partage JS Sina Weibo pour votre référence. Le contenu spécifique est le suivant


<!DOCTYPE html>
<html xmlns:wb="http://open.weibo.com/wb">
<head>
  <meta charset="utf-8">
  <title>javaScript实现选中文字提示新浪微博分享的效果</title>
  <style type="text/css">
   #p1{ 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>
  <p id="p1"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=163431486,1136892253&fm=58"></p>
  <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(&#39;txt&#39;);
      var op = document.getElementById(&#39;p1&#39;);

      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(){
            op.style.display = &#39;block&#39;;
            op.style.left =left+&#39;px&#39;;
            op.style.top = top +&#39;px&#39;;
          },1000)
        } else{
          op.style.display = &#39;none&#39;;
        }
      };
      oTxt.onclick =function(ev){
        var ev =ev||window.event;
        ev.cancelBubble = true;
      }
      document.onclick = function(){
        op.style.display = &#39;none&#39;;
      };
      //点击分享的实现
      op.onclick = function(){
        window.location.href=&#39;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&#39;+selectText()+window.location.href;
      }
    }
  </script>

</body>
</html>
Copier après la connexion
.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal