jQuery缩略图功能鼠标移上显示大缩略图

最新推荐文章于 2023-07-21 08:51:41 发布

转载最新推荐文章于 2023-07-21 08:51:41 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/s7mmersupport/archive/2010/06/24/1764086.html

文章标签：

#xhtml #javascript #前端 #ViewUI

本文介绍了一种使用jQuery实现的鼠标悬停显示大缩略图的功能，适用于图像画廊，可提升用户体验。该功能支持动画效果，当鼠标在小图上移动时，预览图也随之移动。

查看效果

下载地址

Easy Image Preview jQuery鼠标移上显示大缩略图功能

Easy Image Preview jQuery鼠标移上显示大缩略图功能，上边的不带动画，下边那个带有动画效果，就是鼠标在小图上移动的话，弹出的大预览图也会跟着移动，更人性一点，其原理大同小异，欢迎jQuery爱好者参考。

前台部分代码

代码

<! 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 >
< meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />
< title > Image Preview with jQuery by 网页前端设计吧 http: // www.jscss8.com</title>
< meta name = " description " content = " Easiest jQuery Tooltip Ever " >
< script src = " jquery.js " type = " text/javascript " ></ script >
< script src = " main.js " type = " text/javascript " ></ script >
</ meta >

< style >
body {
    margin: 0 ;
    padding:40px;
    background:#fff;
    font: 80 % Arial, Helvetica, sans - serif;
    color:# 555 ;
    line - height: 180 % ;
}

h1{
    font - size: 180 % ;
    font - weight:normal;
    color:# 555 ;
}
h2{
    clear:both;
    font - size: 160 % ;
    font - weight:normal;
    color:# 555 ;
    margin: 0 ;
    padding:.5em 0 ;
}
a{
    text - decoration:none;
    color:#f30;
}
p{
    clear:both;
    margin: 0 ;
    padding:.5em 0 ;
}
pre{
    display:block;
    font: 100 % " Courier New " , Courier, monospace;
    padding:10px;
    border:1px solid #bae2f0;
    background:#e3f4f9;
    margin:.5em 0 ;
    overflow:auto;
    width:800px;
}

img{border:none;}
ul,li{
    margin: 0 ;
    padding: 0 ;
}
li{
    list - style:none;
     float :left;
    display:inline;
    margin - right:10px;
}

/*    */

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:# 333 ;
    padding:5px;
    display:none;
    color:#fff;
    }

/*    */
</ style >
</ head >
< body >

     < h1 > Easy Image Preview with jQuery </ h1 >

     < h2 > Image gallery  (without caption) </ h2 >

     < ul >
         < li >< a href = " 1.jpg " class = " preview " >< img src = " 1s.jpg " alt = " gallery thumbnail " /></ a ></ li >
         < li >< a href = " 2.jpg " class = " preview " >< img src = " 2s.jpg " alt = " gallery thumbnail " /></ a ></ li >
         < li >< a href = " 3.jpg " class = " preview " >< img src = " 3s.jpg " alt = " gallery thumbnail " /></ a ></ li >
         < li >< a href = " 4.jpg " class = " preview " >< img src = " 4s.jpg " alt = " gallery thumbnail " /></ a ></ li >
     </ ul >

     < h2 > Image gallery (with caption) </ h2 >

     < ul >
         < li >< a href = " 1.jpg " class = " preview " title = " Lake and a mountain " >< img src = " 1s.jpg " alt = " gallery thumbnail " /></ a ></ li >
         < li >< a href = " 2.jpg " class = " preview " title = " Fly fishing " >< img src = " 2s.jpg " alt = " gallery thumbnail " /></ a ></ li >
         < li >< a href = " 3.jpg " class = " preview " title = " Autumn " >< img src = " 3s.jpg " alt = " gallery thumbnail " /></ a ></ li >
         < li >< a href = " 4.jpg " class = " preview " title = " Skiing on a mountain " >< img src = " 4s.jpg " alt = " gallery thumbnail " /></ a ></ li >
     </ ul >

</ body >
</ html >

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/24/1764086.html