jquery.zclip轻量级复制失效问题


Posted in Javascript onJanuary 08, 2017

工作原理

利用一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了

<script src="js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-zclip/jquery.zclip.js"></script>
<script type="text/javascript">
 $(function(){
    var $copyBtn = $('#copy-video-link');
    copyVideoLink($copyBtn);
  });
  //复制视频网址
  function copyVideoLink($that){
    //设置flash动画
    ZeroClipboard.setMoviePath("js/jquery-zclip/ZeroClipboard.swf");
    var clip = new ZeroClipboard.Client();
    // 设置鼠标为手型
    clip.setHandCursor(true);
    //设置要复制的文本 
    clip.setText($that.attr("data-href"));
    clip.glue($that.attr("id"));
     
    //复制完成后的监听事件    
    clip.addEventListener('complete', function (client, text) {
      alert("你已经复制成功" + text);
      // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
    });
  }
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
动态加载jquery库的方法
Feb 12 Javascript
Javascript中With语句用法实例
May 14 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 #Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 #Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 #Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 #Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 #Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
Three.js基础部分学习
Jan 08 #Javascript
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php命令行模式代码实例详解
2021/02/26 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python读取网页内容的方法
2015/07/30 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
详解python中eval函数的作用
2019/10/22 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
医院党员公开承诺书
2014/08/30 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
先进个人评语大全
2015/01/04 职场文书
同学聚会邀请函
2015/01/30 职场文书
三国演义读书笔记
2015/06/25 职场文书
物资采购管理制度
2015/08/06 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python