您当前的位置：首页 > 网站建设 > javascript
\| php \| asp \| css \| H5 \| javascript \| Mysql \| Dreamweaver \| Delphi \| 网站维护 \| 帝国cms \| React \| 考试系统 \| ajax \| jQuery \| 小程序 \|

jquery hove事件制作鼠标悬停图片上滑动显示文字内容

51自学网 2021-01-30 11:42:38

javascript

jquery hove事件制作鼠标悬停图片上滑动显示文字内容

源文件：http://files.cnblogs.com/xiaoky/%E5%9B%BE%E7%89%87%E4%B8%8A%E6%BB%91%E6%95%88%E6%9E%9C.rar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.gudingWrap {
    position: relative;
    width:940px;
    height:200px;
    background:#abcdef;
    margin:0 auto;
    padding:50px 20px;
}

.guding {
    width: 298px;
    height: 172px;
    float: left;
    z-index: 200;
    position: relative;
    display: block;
    overflow:hidden;
    margin-right:10px;
}

.guding .show img {
    width: 299px;
    height: 170px;
    border: 1px solid #ccc;
    float: left;
    z-index: 100;
}

.guding .cover {
    position: absolute;
    height: 172px;
    width: 299px;
    background: url(images/cover_img.png);
    z-index: 300;
    top: 0;
    left: 0;
    margin-top:172px;
}

.guding .cover .cover_zi {
    color: #fff;
    text-align: center;
    min-height: 20px;
    margin-top: 10px;
    font-size: 20px;
    float: left;
    width: 100%;
}

.guding .cover .cover_zi span {
    font-size: 14px;
    color: #fff;
}

.guding .cover_img {
    margin-top: 10px;
    float: left;
    margin-left: 22px;
    margin-top: 17px;
    cursor: pointer;
}

.guding .cover_img img {
    height: 80px;
    width: 150px;
    float: left;
    border: 2px solid #fff;
}

.guding .cover_img .zi_bof {
    height: 30px;
    width: 80px;
    font-size: 16px;
    text-align: center;
    line-height: 28px;
    margin-left: 30px;
    margin-top: 52px;
    border: 1px solid #fff;
    color: #fff;
    background: #009aff;
    float: left;
    cursor: pointer;
}

.guding2 .cover_img .zi_bof:hover {
    background: #4bb8fc;
}

.show_img, .guCover{
-webkit-transition: top .2s ease;
-moz-transition: top .2s ease;
-ms-transition: top .2s ease;
-o-transition: top .2s ease;
transition: top .2s ease;
}

</style>
</head>
<script language="javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.guding').hover(function(){
        $(".cover", this).stop().animate({top:'-172px'},{queue:false,duration:300});
    }, function() {
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
    });    
});
</script>
<body>
<div class="gudingWrap">
    <div class="guding">
        <div class="show">
            <img src="images/dianji_4.jpg" alt="" />
        </div>
        <div class="cover">
            <div class="cover_zi">成语：此地无银三百两<br /><span>发布者：aobama |</span><span>播放次数：1435 </span></div>
            <div class="cover_img">
                <img  alt="" src="images/guding1.jpg" />
                <div class="zi_bof">点击播放</div>
            </div>
        </div>
    </div>

    <div class="guding">
        <div class="show">
            <img src="images/dianji_5.jpg" alt="" />
        </div>
        <div class="cover">
            <div class="cover_zi">字词："安"的写法和意义<br /><span>发布者：aobama |</span><span>播放次数：2257 </span></div>
            <div class="cover_img">
                <img  alt="" src="images/guding2.jpg" />
                <div class="zi_bof">点击播放</div>
            </div>
        </div>
    </div>

    <div class="guding">
        <div class="show">
            <img src="images/dianji_3.jpg" alt="" />
        </div>
        <div class="cover">
            <div class="cover_zi">星诺汉语：第一集 "东方之旅"<br /><span>发布者：zzzz |</span><span>播放次数：3005 </span></div>
            <div class="cover_img">
                <img  alt="" src="images/guding3.jpg" />
                <div class="zi_bof">点击播放</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

所需图片（共7个）：

好文要顶关注我收藏该文

下载地址:
jQuery+css3优质源代码大全免费下载
javascript实现页面上的ppt效果