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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 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在线生成ico文件的代码
2007/10/09 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
js实现表格字段排序
2014/02/19 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python魔法方法功能与用法简介
2019/04/04 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
大学四年个人自我小结
2014/03/05 职场文书
大学生自我鉴定书
2014/03/24 职场文书
项目合作协议书范本
2014/04/16 职场文书
英文导游词
2015/02/13 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android