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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
javascript内置对象操作详解
Feb 04 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue router总结 $router和$route及router与 router与route区别
Jul 05 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动态图像的创建
2006/10/09 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
深入理解vue中的$set
2017/06/01 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
20招让你的Python飞起来!
2016/09/27 Python
python妙用之编码的转换详解
2017/04/21 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python pandas模块基础学习详解
2019/07/03 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
js实现弹框效果
2021/03/24 Javascript
国际商务专业学生个人的自我评价
2013/09/28 职场文书
医院总经理职责
2013/12/26 职场文书
办理房产过户的委托书
2014/09/14 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
农村党员干部承诺书
2015/05/04 职场文书
交通事故代理词范文
2015/05/23 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL