Javascript特效实现鼠标移动到小图,查看大图效果;

首先感谢“杨中科”老师,免费发布教学视频;

老规矩,先上传图片素材;一共六张图片,三大,三小(大的图片大家可以把他下载下来,当成手机屏保哦,由于图片太大,我只让他显示200*300了Javascript特效实现鼠标移动到小图,查看大图效果;)。

 

小图片都是通过document.createElement("img") 创建的html标签

 

Javascript特效实现鼠标移动到小图,查看大图效果; Javascript特效实现鼠标移动到小图,查看大图效果;

 

图片上传完了,下面就该是代码了,代码里都有注释,所以在这里我就不白话了;直接看注释就OK了;

 

Javascript特效实现鼠标移动到小图,查看大图效果; Javascript特效实现鼠标移动到小图,查看大图效果;

Javascript特效实现鼠标移动到小图,查看大图效果; Javascript特效实现鼠标移动到小图,查看大图效果;

 

 

<!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="" />
        
<id="imgTitle">
        
</p>
    
</div>
</body>
</html>

 

上一篇:认真看!工资两三千,你的出路在哪里?


下一篇:SLC教程