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 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
mysql总结之explain
2012/02/27 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python刷投票的脚本实现代码
2014/11/08 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
详解Python_shutil模块
2019/03/15 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
交通事故私了协议书
2014/04/16 职场文书
项目工作说明书
2014/07/29 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
产品质量保证书范本
2015/02/27 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
PHP命令行与定时任务
2021/04/01 PHP