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 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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获取301跳转URL简单实例
2013/12/16 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js 异步处理进度条
2010/04/01 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
python 递归相关知识总结
2021/03/03 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
C#的几个面试问题
2016/05/22 面试题
尽职尽责村干部自我鉴定
2014/01/23 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang