网页效果中经常会用到图片的hover效果，本文中展示的是使用Jquery书写的效果，相比较兼容性更好。

兼容性

插件是使用jquery书写的，所以兼容性比更好。如果不需要考虑兼容性建议考虑 这个插件样式更多。

效果演示地址

Demo：

下载

直接下载

链接： 密码：7b8i

使用

• 1、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;}

• 2、HTML代码

    
    
     
        
      web.pub测试文字测试web.pub测试测试文字    
     
    
     
    
    
    
     
        
      
web.pub
        
      
web开发者-努力学习中、、
        
      
        
      参观网站    
     
    
     
        
          
     
    

• 3、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');})

演示地址：

结尾

by

本文地址：