js实现点击图片将图片地址复制到粘贴板的方法


Posted in Javascript onFebruary 16, 2015

本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="robots" content="all" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>点击图片直接把图片地址复制到粘贴板</title>

<style type="text/css">

 #www_3water_net_hidden {

  position:absolute;

  visibility:hidden;

 }

 img {

  cursor:pointer ;

 }

</style>

</head>

<body>

点击下面的图片直接获取得地址。

 <div id="3water_net">

  <img src="images/m10.jpg"><br />

 </div>

 <span id="www_3water_net_hidden"></span>

</body>

<script type="text/javascript">

<!--

 $id=function(id) {

  return document.getElementById(id);

 }

 var objs =$id("3water_net").getElementsByTagName("img") ;

 for (var i=0;i<objs.length;i++ ) {

  objs[i].onclick=function () {

   $id("www_3water_net_hidden").innerHTML=this.src ;

   var my_range =document.body.createTextRange() ;

   my_range.moveToElementText($id("www_3water_net_hidden"));

   my_range.execCommand("copy");

   alert("图片地址已经复制到剪贴板");

   return false ;

  }

 }

//-->

</script>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
javascript类型转换使用方法
Feb 08 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 #Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
javascript 闭包详解
Feb 15 #Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 #Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 #Javascript
You might like
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php数据访问之增删改查操作
2016/05/09 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
移动端js图片查看器
2016/11/17 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python获取当前路径实现代码
2017/05/08 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
汽车运用工程毕业生自荐信
2013/10/29 职场文书
销售文员的岗位职责
2013/11/20 职场文书
公司薪酬管理制度
2014/01/31 职场文书
百日安全活动总结
2014/05/04 职场文书
装修施工安全责任书
2014/07/24 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2015年路政工作总结
2015/05/22 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python