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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
详解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读取flv文件的播放时间长度
2009/09/03 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHPThumb图片处理实例
2014/05/03 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
用Python写冒泡排序代码
2016/04/12 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
毕业生自荐信
2013/12/14 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
安全生产实施方案
2014/02/23 职场文书
班主任评语大全
2014/04/26 职场文书
2014年班级工作总结
2014/11/14 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Python实现简繁体转换
2021/06/07 Python