Code

鼠标经过小图预览大图

此款插件是基于jQuery的图片预览效果,鼠标移动动小图片上,会显示相应的大图片。

大图片命名格式:demo.jpg

小图片命名格式:demos.jpg

(小图片的名称是在大图片的名称上加"s")

效果预览
图片预览(无标题)
图片预览(带标题)
代码
1.在body里加入如下HTML代码:

<a href="images/1.jpg" class="preview" title="Lake and a mountain">
    <img src="images/1s.jpg" alt="" />
</a>

<!--说明-->
1.  a标签的href为大图地址。
2.  定义a标签的class属性为"preview" ,就能生成图片预览效果。
3.  如果定义了title属性,大图显示的时候底下会有标题。不定义title属性,就不显示。
4.  img标签的src为小图片地址。

2.在head里加入样式:

<style type="text/css">
    #preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
        font-size:16px;
        font-weight:bold;
        -webkit-box-shadow:0px 0px 10px #000000;
        -moz-box-shadow:0 0 10px #000000;
    }
    #preview .previewtitle
    {
        font-size:12px;
        font-weight:normal;
        margin-bottom:5px;
    }
    
    #preview .previewhavetitle
    {
        padding-bottom:20px;
    }
    a.preview{display:none;}
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/JQImgPreview.js" type="text/javascript"></script>