JQ版圖片的鼠標放上效果

網頁效果中常常會用到圖片的hover效果，本文中展現的是使用Jquery書寫的效果，相比較ImageHover.css兼容性更好。

兼容性

插件是使用jquery書寫的，因此兼容性比ImageHover.css更好。若是不須要考慮兼容性建議考慮 ImageHover.css 這個插件樣式更多。

效果演示地址

Demo：http://weber.pub/demo/160920/index.html

下載

直接下載

連接：http://pan.baidu.com/s/1qXPy5y8 密碼：7b8i

使用

• 一、css樣式代碼

.hover-down{
    width: 285px;
    height: 150px;
    position: relative;
    overflow: hidden;
}
.hover-down img{
    position: absolute;
}
.hover-down .hd-font{
    position: absolute;
    width: 285px;
    height:150px;
    z-index: 1;
    margin-top: -150px;
    color: #ddd;
    background: #000;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
.hd-font span{
    padding: 20px;
    font-size: 14px;
    display: inline-block;
    line-height: 18px;
}
.hover-up{
    width: 285px;
    height: 135px;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.hover-up img{
    width: 100px;
}
.hover-up .hu-font{
    height: 135px;
    width: 285px;
}
.hover-up .qr{
    position: absolute;
    width: 285px;
    height:135px;
    line-height: 135px;
    z-index: 1;
    margin-bottom: -135px;
    background: #fff;
    text-align: center;
}
.hover-up a{
    color: #4b8ce5;
}
.hover-up a:hover{
    color: #f8b600;
}

• 二、HTML代碼

<div class="hover-down">
    <div class="hd-font">
        <span>web.pub測試文字測試web.pub測試測試文字</span>
    </div>
    <img src="img/11.jpg" alt="web.pub測試文字測試">
</div>
<div class="hover-up">
    <div class="hu-font center pr-lg pl-lg">
        <p class="f-20 c-333 mb-xs pt-md">web.pub</p>
        <p class="f-14 c-666 mb-none">web開發者-努力學習中、、</p>
        <hr class="solid mt-md mb-md">
        <a href="" class="">參觀網站</a>
    </div>
    <div class="qr">
        <img src="img/qr.png" alt="web.pub">
    </div>
</div>

• 三、js代碼 （須要引入jquery）

$('.hover-down').hover(function () {
    $(this).addClass(' case-test');
    $('.case-test .hd-font').animate({marginTop:'0px'},'1000')
},function () {
    $('.case-test .hd-font').animate({marginTop:'-150px'},'1000')
    $(this).removeClass(' case-test');
})
$('.hover-up').hover(function () {
    $(this).addClass(' case-test');
    $('.case-test .qr').animate({marginTop:'-135px'},'1000')
},function () {
    $('.case-test .qr').animate({marginTop:'0px'},'1000')
    $(this).removeClass(' case-test');
})

演示地址：http://weber.pub/demo/160920/index.html

結尾

by Weber.pub

本文地址：http://weber.pub/jq版圖片的鼠標hover效果/211.html