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 保存数组到Cookie的代码
Apr 14 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue中进行微博分享的实例讲解
Oct 14 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
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
javascript 函数式编程
2007/08/16 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
iframe实用操作锦集
2014/04/22 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript实现连续赋值
2015/08/10 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python处理session的方法整理
2019/08/29 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
大三毕业自我鉴定
2014/01/15 职场文书
思想品德自我评价
2014/02/04 职场文书
《长城》教学反思
2014/02/14 职场文书
网络管理员岗位职责
2014/03/17 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
单位委托函范文
2015/01/29 职场文书
企业年会祝酒词
2015/08/11 职场文书
礼仪培训心得体会
2016/01/22 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
Python find()、rfind()方法及作用
2022/12/24 Python