Javascript特效实现鼠标移动到小图，查看大图效果；
首先感谢“杨中科”老师，免费发布教学视频；
老规矩，先上传图片素材；一共六张图片，三大，三小（大的图片大家可以把他下载下来，当成手机屏保哦，由于图片太大，我只让他显示200*300了
）。
小图片都是通过document.createElement("img") 创建的html标签
图片上传完了，下面就该是代码了，代码里都有注释，所以在这里我就不白话了；直接看注释就OK了；
<!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>
<title>点小图看大图</title>
<style type="text/css">
.imgStyle
{
margin: 10px;
padding: 2px;
border: 1px solid #000;
}
</style>
<script language="javascript" type="text/javascript">
var data = { "Images/01_small.jpg": ["Images/01.jpg", "图片1"], "Images/02_small.jpg": ["Images/02.jpg", "图片2"], "Images/03_small.jpg": ["Images/03.jpg", "图片3"] }; //Key:Value;
function LoadImg() {
//遍例小图（Key）地址；
for (var smallImgPath in data) {
//动态创建一个img标签
var smallImg = document.createElement("img");
//动态添加Css样式；imgStyle为样式的类名；
smallImg.className = "imgStyle";
//给创建后的img赋值；（图片路径）
smallImg.src = smallImgPath;
//通过setAttribute改变大图片的(相对)路径;如果不这么写下面取到的会是绝对路径；
smallImg.setAttribute("a1", data[smallImgPath][0]);
smallImg.setAttribute("a2", data[smallImgPath][1]);
smallImg.onmousemove = function () {
//取大图片的地址；
document.getElementById("bigImg").src = this.getAttribute("a1");
//取大图片的标题；
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
//获取隐藏的层的id；
var showDiv = document.getElementById("showDiv");
//让显示的层的位置等于鼠标的位置；
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
//显示层；
showDiv.style.display = "block";
}
smallImg.onmouseout = function () {
document.getElementById("bigImg").src = this.getAttribute("a1");
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
var showDiv = document.getElementById("showDiv");
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
showDiv.style.display = "none";
}
//加载到body中；
document.body.appendChild(smallImg);
}
}
</script>
</head>
<body onload="LoadImg()">
<div id="showDiv" style="display: none; position: absolute;">
<img id="bigImg" src="" width="20%" height="20%" alt="" />
<p id="imgTitle">
</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点小图看大图</title>
<style type="text/css">
.imgStyle
{
margin: 10px;
padding: 2px;
border: 1px solid #000;
}
</style>
<script language="javascript" type="text/javascript">
var data = { "Images/01_small.jpg": ["Images/01.jpg", "图片1"], "Images/02_small.jpg": ["Images/02.jpg", "图片2"], "Images/03_small.jpg": ["Images/03.jpg", "图片3"] }; //Key:Value;
function LoadImg() {
//遍例小图（Key）地址；
for (var smallImgPath in data) {
//动态创建一个img标签
var smallImg = document.createElement("img");
//动态添加Css样式；imgStyle为样式的类名；
smallImg.className = "imgStyle";
//给创建后的img赋值；（图片路径）
smallImg.src = smallImgPath;
//通过setAttribute改变大图片的(相对)路径;如果不这么写下面取到的会是绝对路径；
smallImg.setAttribute("a1", data[smallImgPath][0]);
smallImg.setAttribute("a2", data[smallImgPath][1]);
smallImg.onmousemove = function () {
//取大图片的地址；
document.getElementById("bigImg").src = this.getAttribute("a1");
//取大图片的标题；
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
//获取隐藏的层的id；
var showDiv = document.getElementById("showDiv");
//让显示的层的位置等于鼠标的位置；
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
//显示层；
showDiv.style.display = "block";
}
smallImg.onmouseout = function () {
document.getElementById("bigImg").src = this.getAttribute("a1");
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
var showDiv = document.getElementById("showDiv");
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
showDiv.style.display = "none";
}
//加载到body中；
document.body.appendChild(smallImg);
}
}
</script>
</head>
<body onload="LoadImg()">
<div id="showDiv" style="display: none; position: absolute;">
<img id="bigImg" src="" width="20%" height="20%" alt="" />
<p id="imgTitle">
</p>
</div>
</body>
</html>
