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 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JavaScript Event Loop相关原理解析
Jun 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下10件你也许并不了解的事情
2008/09/11 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
javascript常用方法汇总
2014/12/02 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python调用C语言的实现
2019/07/26 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
小学生竞选班干部演讲稿
2014/04/24 职场文书
活动总结报告怎么写
2014/07/03 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python