CSS图片点击拷贝

I. CSS图片点击拷贝

点击实现文本or图片的复制, 主要利用 document.execCommand('Copy')来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
function copy2board()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}

function copyimg(e) {
var range = document.createRange();
range.selectNode(e); //selectable为下面页面中DIV中的id
window.getSelection().addRange(range);
document.execCommand("Copy");
alert("复制ok");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copy2board()" value="点击复制代码" />



<img src="http://a.hiphotos.baidu.com/image/pic/item/8326cffc1e178a82112604dffa03738da977e8b3.jpg" width=200 height=200 onclick="copyimg(this)"></img>

II. 其他

个人博客: 一灰灰Blog

基于hexo + github pages搭建的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

声明

尽信书则不如,已上内容,纯属一家之言,因本人能力一般,见识有限,如发现bug或者有更好的建议,随时欢迎批评指正

扫描关注

QrCode

Css实战训练之图片点击放大

Css实战训练之图片点击放大

I. 背景

非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片

那么这个功能是怎么实现的呢? 正好学习了下css的基础知识,现在可以来实际的操作一把

Css学习手册之基本篇

Css学习手册之基本篇

每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时,又得百度一下该怎么用,低效且不愉快,强制自己好好的学习下基本功

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×