鼠标经过滚动显示三or N张图片js+jQuery

2010-12-30 13:08:35 by 【6yang】, 217 visits, 收藏 | 返回

特效预览地址:

http://www.6yang.net/myjavascriptlib/mousePic3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标经过滚动显示三or N张图片js+jQuery</title>

<style type="text/css">
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li, pre,
form, fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}

body, button, input, select, textarea {
    font: 12px/1 Tahoma, Helvetica, Arial, sans-serif;
}

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }

ul, ol { list-style: none; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

q:before, q:after { content: ''; }

legend { color: #000; }
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: none;
    height: 1px;
}
a{
    color:#333
}
a:hover{
    color:#F00;
}
.clearfix{
    clear:both;
    font-size:0;
    height:0;
    visibility:hidden;
}

.container{
    background:#f90;
    margin:15px auto;
    padding:16px;
    width:400px;
}
.boxPicture{
    clear:both;
    padding:2px;
    height:48px;
    position:relative;
    margin:50px 0;
}
.boxPicture .Thumbnail01,
.boxPicture .Thumbnail02,
.boxPicture .Thumbnail03{
    background:#fff;
    float:left;
    height:48px;
    overflow:hidden;
    width:80px;
    margin:0 5px 0 0;
    opacity:0.8;
    filter:alpha(opacity=80);
}
.boxPicture .lnkThumbnail{
    display:block;
    height:40px;
    padding:2px;
    border:2px solid #ccc;
}
.boxPicture .Thumbnail01{
    position:absolute;
    left:0px;
    z-index:3;
}
.boxPicture .Thumbnail02{
    position:absolute;
    left:20px;
    z-index:2;
}
.boxPicture .Thumbnail03{
    position:absolute;
    left:40px;
    z-index:1;
}
.btnhover .text{
    display:inline-block;
    background:#333;
    color:#fff;
    text-align:center;
    padding:3px 15px;
}
.btnhover{
    position:absolute;
    display:none;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

/*    author    6yang.net
    The effects that display when mouseOver it toggle hide picture;
*/
    $.fn.jquerOffset = function(obj){
        this.each(function(){
            var that = $(this);

            that.hover(
                function(){
                    var curTitle = $(this).attr("title");
                    var _xOffset = that.offset().left;
                    var _yOffset = that.offset().top;
                    var _oWidth = that.outerWidth();
                    var _oHeight = that.outerHeight();
                    obj.show().css({"top":(_yOffset-25) + "px","left":(_xOffset) + "px"}).children(".text").text(curTitle);
                },
                function(){
                    obj.hide().children(".text").text('');
                }
            );

        });
        return this;
    };
    $(".boxPicture").hover(
            function(){
                $(this).children(".Thumbnail02").stop(true,true).animate({"left":"82px","opacity":1},200);
                $(this).children(".Thumbnail03").stop(true,true).animate({"left":"164px","opacity":1},200);
            },
            function(){
                $(this).children(".Thumbnail02").stop(true,true).animate({"left":"20px","opacity":0.8},200);
                $(this).children(".Thumbnail03").stop(true,true).animate({"left":"40px","opacity":0.8},200);
            }
    );
    $(".boxPicture .lnkThumbnail").jquerOffset($("#btnstandard_btnhover"));

});
</script>
</head>
<body>
<div class="container">
    <h1>鼠标经过滚动显示三or N张图片js+jQuery</h1>
    <div class="boxPicture">
        <div class="Thumbnail01"><a href="#~" class="lnkThumbnail" title="你图片的标题"><img src="images/5584.png" alt="" /></a></div>
        <div class="Thumbnail02"><a href="#~" class="lnkThumbnail" title="bbbbbbbbbbbbb"><img src="images/13219.png" alt="" /></a></div>
        <div class="Thumbnail03"><a href="#~" class="lnkThumbnail" title="ccccccccccccc"><img src="images/13296.png" alt=""/></a></div>
    </div>
    <div class="boxPicture">
        <div class="Thumbnail01"><a href="#~" class="lnkThumbnail" title="aaaaaaaaaaaaa"><img src="images/5584.png" alt="" /></a></div>
        <div class="Thumbnail02"><a href="#~" class="lnkThumbnail" title="aaaaaaaaaaaaa"><img src="images/13219.png" alt="" /></a></div>
        <div class="Thumbnail03"><a href="#~" class="lnkThumbnail" title="aaaaaaaaaaaaa"><img src="images/13296.png" alt=""/></a></div>
    </div>
    <div class="boxPicture">
        <div class="Thumbnail01"><a href="#~" class="lnkThumbnail" title="aaaaaaaaaaaaa"><img src="images/5584.png" alt="" /></a></div>
        <div class="Thumbnail02"><a href="#~" class="lnkThumbnail" title="aaaaaaaaaaaaa"><img src="images/13219.png" alt="" /></a></div>
        <div class="Thumbnail03"><a href="#~" class="lnkThumbnail" title="aaaaaaaaaaaaa"><img src="images/13296.png" alt=""/></a></div>
    </div>
</div>

<div id="btnstandard_btnhover" class="btnhover">
    <span class="text">...</span>
</div>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?cid=7&id=874

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

鼠标经过滚动显示三or N张图片js+jQuery

图片原图