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动态调整iframe高度的代码
Apr 10 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
详解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的人气开发框架Laravel
2015/10/15 PHP
Nginx实现反向代理
2017/09/20 Servers
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python中wheel的用法整理
2020/06/15 Python
在校生党员自我评价
2013/09/25 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
应用外语系自荐信
2014/06/26 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
教师党员自我评价范文
2015/03/04 职场文书
运动会报道稿大全
2015/07/23 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python