几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
Clipboard.js无需Flash实现剪贴板功能
来源：互联网
2023-03-16 23:56:53 382
之前我们实现实现剪贴板功能都用到了flash插件,加上自己对javascript也不是很熟也写不出来，现在我们可以用Clipboard.js库类实现无需Flash的剪贴板的功能了
工具/原料
- sublime text 3编辑器
- Clipboard.js库
- jquery1.8以上 ，这个是layer要用到的
- layer.js web弹层组件
方法/步骤
先打开submit text 3编辑器新建一个html文件，然后去下载jquery1.8以上的随便一个版本，也可以使用百度的script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">/script>
在去下载layer.js web弹层组件 百度搜索“layer.js web弹层组件”第一个就是官网
下图是目录结构
第二步把网页的结构写出来再把jquery和layer.js web弹层组件 引入进去，如下图
第三步就是实现复制表单里面的内容
表单代码和复制按钮代码如下：
input type="text" id="foo" class="inp" value="百度经验复制表单内容">
button class="btn"data-clipboard-action="copy" data-clipboard-target="#foo">复 制/button>
然后在body结束前引入Clipboard.js并写表单复制功能的javascript代码
代码如下：
script src="js/clipboard.min.js">/script>
script>
//实例化Clipboard对象并把复制按钮的类.btn传进去
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
//这里是layer.js的一个弹层提示效果
layer.msg('复制成功');
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
/script>
第四步就是实现复制DIV里面的内容了
DIV代码和复制按钮代码如下：
div class="div_copy">
div id="dd">残梦网络工作室www.cmylw.cn/div>
button class="btn btn1" data-clipboard-action="copy" data-clipboard-target="#dd">复 制/button>
/div>
javascript代码如下：
//实例化Clipboard对象并把复制按钮的类.btn1传进去
var clipboard1 = new Clipboard('.btn1');
clipboard1.on('success', function(e) {
//这里是layer.js的一个弹层提示效果
layer.msg('复制成功',{
time: 3000, //3s后自动关闭
btn: ['明白了', '知道了']
});
console.log(e);
});
clipboard1.on('error', function(e) {
console.log(e);
});
全部代码如下
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>Clipboard.js无需Flash实现剪贴板功能/title>
script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">/script>
script src="js/layer/layer.js">/script>
style type="text/css">
* {margin: 0; padding:0; font-family: '微软雅黑'}
#con {width: 800px; overflow: hidden; padding: 10px; margin: 20px auto; background: #F9F9F9; border: 1px solid #ccc;}
h3 {text-align: center; color: red;}
.copy {width: 400px; height: 100px; margin: 10px auto;}
.inp {width: 288px; height: 38px; border: 1px solid #3BB4F2; border-right: 1px; outline:none; float: left; font-size: 20px; color:red; padding: 0 5px;}
.btn {width: 100px; height: 40px; border: none; float: left; color: #fff; background: #3BB4F2; outline:none; font-size: 24px;}
.btn1 {border-radius: 5px; margin-left:150px; margin-top: 10px;}
.div_copy {width: 400px; height: 100px; margin: 10px auto; text-align: center;}
#dd {border: 1px solid #ccc; padding: 5px; color: red;}
/style>
/head>
body>
div id="con">
h3>复制表单里面的/h3>
div>
input type="text" id="foo" value="百度经验复制表单里面的内容">
buttondata-clipboard-action="copy" data-clipboard-target="#foo">复 制/button>
/div>
h3>复制DIV里面的/h3>
div>
div id="dd">百度经验复制DIV里面的内容/div>
button class="btn btn1" data-clipboard-action="copy" data-clipboard-target="#dd">复 制/button>
/div>
/div>
script src="js/clipboard.min.js">/script>
script>
//实例化Clipboard对象并把复制按钮的类.btn传进去
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
//这里是layer.js的一个弹层提示效果
layer.msg('复制成功');
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
//实例化Clipboard对象并把复制按钮的类.btn1传进去
var clipboard1 = new Clipboard('.btn1');
clipboard1.on('success', function(e) {
//这里是layer.js的一个弹层提示效果
layer.msg('复制成功',{
time: 3000, //3s后自动关闭
btn: ['明白了', '知道了']
});
console.log(e);
});
clipboard1.on('error', function(e) {
console.log(e);
});
/script>
/body>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： flashJAVASCRIPT
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 256 JAVASCRIPT
- 详细阅读