一天JavaScript示例-点击图片显示大图片添加鼠标

时间：2022-08-22 12:46:33
<!DOCTYPE html>

<html>

<head>

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

<title>每天一个JavaScript实例-点击图片显示大图加入鼠标操作</title>

<style>

	img{padding:5px;width:100px;height:auto;}

	#outer{

		width:100%;

		height:100%;

	}

	.overlay{

		background-color:#000;

		opacity: .7;

		filter:alpha(opacity=70);

		position: fixed;

		top:0;

		left:0;

		width:100%;

		height:100%;

		z-index: 10;

	}

	.overlayimg{

		position: absolute;

		z-index: 11;

		left:50px;

		top:30px;

		width:auto;

	}

</style>

<script>

function imgKeyDown(evnt){

	//console.log("aaa");

	evnt = (evnt) ? event : ((window.event) ? window.event : "");

	var keycode = (event.which) ?

evnt.which : evnt.keyCode;

	//console.log(keycode);

	//console.log(evnt);

	if(document.getElementById("overlay")){

		if(keycode == 27){

			restore();

			return false;

		}else{

			if(keycode == 13){

				restore();

			return false;

			}

		}

	}

}

function expandPhoto(){

	var overlay = document.createElement("div");

	overlay.setAttribute("id","overlay");

	overlay.setAttribute("class","overlay");

	document.body.appendChild(overlay);

	var img = document.createElement("img");

	img.setAttribute("class","overlayimg");

	img.src = this.getAttribute("src");

	document.getElementById("overlay").appendChild(img);

	//img.blur();

	document.onkeydown = imgKeyDown;

	img.onclick = restore;

}

function restore(){

	document.body.removeChild(overlay);

	//document.body.removeChild(img);

}

window.onload = function(){

	var imgs = document.getElementsByTagName("img");

	imgs[0].focus();

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

		imgs[i].onclick = expandPhoto;

		//imgs[i].onkeydown = expandPhoto;

	}

}

</script>

</head>

<body>

<div id = "outer">

	<p>点击图片</p>

	<img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" />

	<img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" />	

</div>

</body>

</html>

版权声明：本文博主原创文章，博客，未经同意不得转载。

一天JavaScript示例-点击图片显示大图片添加鼠标的更多相关文章

  1. android高仿微信UI点击头像显示大图片效果

    用过微信的朋友朋友都见过微信中点击对方头像显示会加载大图,先贴两张图片说明下: 这种UI效果对用户的体验不错,今天突然有了灵感,试着去实现,结果就出来了.. 下面说说我的思路: 1.点击图片时跳转到另 ...

  2. android高仿微信UI点击头像显示大图片效果， Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果

    http://www.cnblogs.com/Jaylong/archive/2012/09/27/androidUI.html http://blog.csdn.net/xiaanming/arti ...

  3. img如果没有图片显示默认图片效果

    img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'&quot ...

  4. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

  5. HTML学习笔记——图片显示、图片跳转、图片相对路径

    1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  6. jQuery点缩略图显示大图片

    2015年繁忙的一月份,无更多时间去学习ASP.NET MVC程序,二月份又是中国的新年,长达半个月的假期,望回到老家中,在无电脑无网络的日子里,能有更多时间陪伴年迈的父母亲. 今天学习jQuery的 ...

  7. Android 显示大图片

    主要的代码如下: BitmapFactory.Options options = new BitmapFactory.Options(); //图片解析配置 options.inJustDecodeB ...

  8. java查询图片显示无图片显示项目默认图片

    /** * 读取图片 * @param request * @param record * @return */ @RequestMapping(params ="method=queryW ...

  9. jQuery 鼠标移入图片 显示大图并跟随鼠标移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  2. Java Generics and Collections-2&period;2

    2.2 Wildcards with extends 前面介绍过List<Integer>不是List<Number>的子类,即前者不能替换后者, java使用? extend ...

  3. redis在window环境下的安装

    1.下载客户端文件 地址:https://github.com/dmajkic/redis/downloads 客户端文件目录说明: 2.启动redis服务端 1.在客户端文件目录下新建一个bat文件 ...

  4. mysql 字段存储类型

    摘自:http://zuo.ai.xiao.blog.163.com/blog/static/6079155320121293750732/ 1.数字类型                        ...

  5. （转载）HDU4565

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4565 这个博客讲的比较好:http://blog.csdn.net/ljd4305/article/d ...

  6. linux mail 简操作

    1. 如何查看linux的mailqueue 检查所传送的电子邮件是否送出,或滞留在邮件服务器中 语法:/usr/lib/sendmail -bp 2. 如何发送mail 1)将文件当做电子邮件的内容 ...

  7. jQuery与js的length属性

    js:length 属性可返回字符串中的字符数目. stringObject.length jQuery:length 属性包含 jQuery 对象中元素的数目. $(selector).length ...

  8. 项目Alpha冲刺Day6

    一.会议照片 二.项目进展 1.今日安排 熟悉后台框架并编写.继续搭建前台框架模版.熟悉前端框架开发流程.完成前端热部署配置.完成部分后台用户信息相关接口.解决后台jdk1.8日期在框架中的使用. 2 ...

  9. &lbrack;Postman&rsqb;排除API请求&lpar;9&rpar;

    可能存在API无法运行或出现意外行为的情况.如果您没有收到任何回复,邮递员将显示有关连接服务器时出错的消息. 有关错误可能原因的更多详细信息,请打开Postman Console.它有关于故障的详细信 ...

  10. write命令帮助文档&lpar;ubuntu 18&period;04&rpar;

    WRITE() BSD General Commands Manual WRITE() NAME write — send a message to another user SYNOPSIS wri ...

相关文章