<!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'" ...

  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. java中浮点数的比较（double, float)(转)

    问题的提出:如果我们编译运行下面这个程序会看到什么? public static void main(String args[]){ System.out.println(0.05+0.01); Sy ...

  2. 微通道对接ERP、CRM、OA、HR、SCM、PLM和其他管理系统解决方案

    公司现有ERP.CRM.OA.HR.SCM.PLM等管理系统的对接微信公共平台服务 方法1:开放接口 企业开放现有系统数据接口给第三方,或由第三方开发数据接口对接微信公众平台 方法2:获取数据库 企业 ...

  3. 利用SVNKit进行版本库的树的导出

    public List searchByTree(String userName,String passwd,String SVNServerUrl,String dirUrl){ //这里有点像 s ...

  4. 扔鸡蛋问题具体解释（Egg Dropping Puzzle）

    经典的动态规划问题,题设是这种: 假设你有2颗鸡蛋,和一栋36层高的楼,如今你想知道在哪一层楼之下,鸡蛋不会被摔碎,应该怎样用最少的測试次数对于不论什么答案楼层都可以使问题得到解决. 假设你从某一层楼 ...

  5. session与cookie的差别

    session     session 的工作机制是:为每一个訪客创建一个唯一的 id (UID),并基于这个 UID 来存储变量.UID 存储在 cookie 中,或者通过 URL 进行传导.   ...

  6. Java 8 时间日期库的20个使用示例

    java 8是如何处理时间及日期的 有人问我学习一个新库的最佳途径是什么?我的回答是,就是在实际项目中那样去使用它.在一个真实的项目中会有各种各样的需求,这会促使开发人员去探索和研究这个新库.简言之, ...

  7. VMware vSphere 服务器虚拟化之十六 桌面虚拟化之VMware Horizon View

       VMware vSphere服务器虚拟化之十六 桌面虚拟化之VMware Horizon View  VMware Horizon View (原VMware View的升级版现在版本5.2)是 ...

  8. gcc #define 学习记录

    //test.c #include <stdio.h> #include <stdlib.h> //字符串化运算符 #define EXPAND(name) ({ \ prin ...

  9. 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

    为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...

  10. Oracle集合操作函数:Union、Union All、Intersect、Minus

    Union.对两个结果集进行并集操作.不包含反复行,同一时候进行默认规则的排序: Union All.对两个结果集进行并集操作,包含反复行.不进行排序: Intersect,对两个结果集进行交集操作. ...