前段时间做项目，要实现，一张图片，鼠标放上去图片自动变大的效果，虽然难度不大，但当时也想了一段时间，当时没时间记录一下，现在有时间了，写篇博客把代码给记录一下；

效果如下：

代码如下：

<!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>
	<style>
		#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
		#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
		#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
	</style>
</head>

<body>
	<div id="demo"> <img src="pic.png"> </div>
	<div id="enlarge_images"></div>

	<script>
		var demo = document.getElementById("demo");
		var images = demo.getElementsByTagName("img");
		var large_image = document.getElementById("enlarge_images");
		for(i=0; i<images.length; i++)
		{
			var temp = images[i];
			temp.onmousemove = function(event)
			{
				event = event || window.event;
				large_image.style.display = "block";
				large_image.innerHTML = '<img src="' + this.src + '" />';
				large_image.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
				large_image.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
			}
			temp.onmouseout = function()
			{
				large_image.innerHTML = "";
				large_image.style.display = "none";
 			}
			temp.onclick = function()
			{
				window.open( this.src);
			}
		}
	</script>
</body>
</html>

注：

a）两个div，一个用于显示小图片，另一个用于显示大图片；

b）JS，当鼠标移动到上面时，设置第二个div的显示内容及显示位置；

c）需注意的是，large_image的display在none和block之间转化，是为了鼠标，多次放到图片上时的情况；

JS实现 鼠标放上去 图片自动放大的效果的更多相关文章

  1. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  2. 鼠标放上去图片慢慢变大js 或 变大

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

  3. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  4. JS实现鼠标移上去图片停止滚动移开恢复滚动效果

    这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...

  5. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  6. jq实现鼠标移动到 图片上放大，移开图片缩小效果（打算封装成插件）

    先看代码 <script> $(function() { $('div').mouseover(function() { $('img').animate({ opacity: '0.9' ...

  7. js中网页图片自动更换的效果

    <script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...

  8. 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  9. 实例讲解如何利用jQuery设置图片居中放大或者缩小

    大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...

随机推荐

  1. 深入理解linux网络技术内幕读书笔记(七)--组件初始化的内核基础架构

    Table of Contents 1 引导期间的内核选项 2 注册关键字 3 模块初始化代码 引导期间的内核选项 linux运行用户把内核配置选项传给引导记录,然后引导记录再把选项传给内核. 在引导 ...

  2. window下安装FTP服务器

    系统window8.1 1.安装IIS组件:点开始菜单-选择控制面板--程序--打开或关闭WINDOWS功能--展开Internet信息服务,勾选FTP服务器(包括FTP服务和FTP扩展性),点确定. ...

  3. writev/readv

    ```cpp#include <sys/uio.h>ssize_t readv(int fd, const struct iovec *iov, int iovcnt);ssize_t w ...

  4. C++基础学习笔记----第十三课（操作符重载-下）

    本节主要讲使用成员函数重载操作符,包括[],=,(),->四种操作符的重载以及&&和||的问题. 类的成员函数进行操作符重载 基本概念 类的成员函数也可以进行操作符的重载.类的普 ...

  5. 数据库系统原理及其应用总结---ShinePans

    第一章  数据库概论 1.在数据库管理技术的发展过程中.数据库独立性最高的是"数据库系统"阶段 2.三大经典的数据结构模型是"关系.层次和网状模型" 3.单个用 ...

  6. linux diff具体解释

    diff是Unix系统的一个非常重要的工具程序. 它用来比較两个文本文件的差异,是代码版本号管理的基石之中的一个.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件 ...

  7. Android中Context具体解释 ---- 你所不知道的Context

                                                                                                         ...

  8. Word01-从正文处开始插入页码

    一份正式的文档应该由以下几部分组成:封面.目录.摘要.正文…… 现在要求前三页不需要插入页码,从正文部分插入页码为第一页,原文档如下: 步骤: 第一步:将光标移动到摘要页的末尾,选择页面部局--> ...

  9. Sybase datetime 时间转换格式 convert(varchar(10),字段名,转换格式)

    convert(varchar(10),字段名,转换格式)sybase下convert函数第三个参数(时间格式)比如:1.select user_id,convert(varchar(10),dayt ...

  10. NS2仿真：两个移动节点网络连接及协议性能分析

    NS2仿真实验报告2 实验名称:两个移动节点网络连接及协议性能分析 实验日期:2015年3月9日~2015年3月14日 实验报告日期:2015年3月15日 一.实验环境(网络平台,操作系统,网络拓扑图 ...