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 相关文章推荐
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
四年级下册教学反思
2014/02/01 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
车辆工程专业求职信
2014/04/28 职场文书
律师授权委托书范本
2014/10/07 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
nginx rewrite功能使用场景分析
2022/05/30 Servers