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 >

 

转载于:https://www.cnblogs.com/zhuiyi/archive/2011/04/25/2028490.html