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


Posted in Javascript onJune 15, 2017

本文实例为大家分享了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>

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

Javascript 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
详解vue跨组件通信的几种方法
Jun 15 #Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 #Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 #Javascript
JS自动生成动态HTML验证码页面
Jun 14 #Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 #Javascript
详解AngularJS 模块化
Jun 14 #Javascript
JS判断时间段的实现代码
Jun 14 #Javascript
You might like
PHP 数组教程 定义数组
2009/10/23 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
简单学习Python time模块
2016/04/29 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python之str操作方法(详解)
2017/06/19 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python之array赋值技巧分享
2019/11/28 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
市场安全管理制度
2014/01/26 职场文书
就业表自我评价分享
2014/02/06 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
植树节标语
2014/06/27 职场文书
科学发展观活动总结
2014/08/28 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
五年级学生期末评语
2014/12/26 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript