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中的Split使用方法与技巧
Mar 09 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
vue文件树组件使用详解
Mar 29 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
JavaScript位置参数实现原理及过程解析
Sep 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
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
php和nginx交互实例讲解
2019/09/24 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
vue组件横向树实现代码
2018/08/02 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
理解Python中的With语句
2015/02/02 Python
Python中subprocess的简单使用示例
2015/07/28 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
python画双y轴图像的示例代码
2019/07/07 Python
python IDLE添加行号显示教程
2020/04/25 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
介绍一下gcc特性
2012/01/20 面试题
导游个人求职信范文
2014/03/23 职场文书
法人授权委托书
2014/04/03 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
党员四风剖析材料
2014/08/27 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
养成教育主题班会
2015/08/13 职场文书
深入理解python协程
2021/06/15 Python
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL