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 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
VueCli生产环境打包部署跨域失败的解决
Nov 13 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下的权限算法的实现
2007/04/28 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php的hash算法介绍
2014/02/13 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
对python sklearn one-hot编码详解
2018/07/10 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python求解汉诺塔游戏
2020/07/09 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
学生会竞选自荐信
2013/10/12 职场文书
给物业的表扬信
2014/01/21 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
春节晚会开场白
2015/05/29 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书