HTML5网页设计

图片效果

鼠标滑过图片由暗变亮

时间:2014-11-28 17:28来源:未知作者:admin点击:
鼠标滑过图片由暗变亮渐变过渡效果,jQuery简单几行代码实现。

鼠标滑过图片由暗变亮渐变过渡效果,jQuery简单几行代码实现。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script src="http://www.shejicool.com/demo/jquery.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">            
$(document).ready(function(){
    $(".rollover").css({'opacity':'0.5'});

    $('.img_list a').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 1);
        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0.5);
        }
    )

});        
</script>
<style type="text/css">
img { border:0px; }    
ul.img_list {
    display:inline;
    height:280px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}        
li.image_one a {
    display:block;
    width:400px;
    height:300px;
    position:relative;
    background:#000;
}    
li.image_one a .rollover {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:400px;
    height:300px;
}
</style>
<div style="width:280px; margin:100px auto 0px auto;">
    <ul class="img_list">
        <li class="image_one">
            <a href="#"><img class="rollover" alt="shejicool" height="300" src="http://www.shejicool.com/images/demo/400_5.jpg" width="400" /></a></li>
    </ul>
</div>
上一篇:上一篇:jQuery图片鼠标经过显示大图 上一篇:下一篇:jquery控制图片最大显示宽度
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐