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 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
JSONP之我见
2015/03/24 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python super()方法原理详解
2020/03/31 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
经理秘书找工作求职信
2013/12/19 职场文书
商场主管竞聘书
2014/03/31 职场文书
食品安全汇报材料
2014/08/18 职场文书
如何拟写通知正文?
2019/04/02 职场文书
乔迁新居祝福语
2019/11/04 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python