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高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vue中使用props传值的方法
2019/05/08 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
params有什么用
2016/03/01 面试题
暑期实习鉴定
2013/12/16 职场文书
大课间活动实施方案
2014/03/06 职场文书
询价采购方案
2014/06/09 职场文书
学校四群教育实施方案
2014/06/12 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
python神经网络ResNet50模型
2022/05/06 Python