ASP  jQuery图片展示效果
（1）首先新建一个名为slidepic.html的HTML文件，将下面的代码添加到该页面的<body>标记内。该页面中，id为“photoShow”的<div>标记，是效果的展示区域；class为“photo”的<div>标记为5组图片及文字。
<div id="photoShow">
    <div class="photo">
        <img src="p1.jpg" />
        <span>张娜拉，韩国的</span>
    </div>
    <div class="photo">
        <img src="p2.jpg" />
        <span>My Digital Story</span>
    </div>
    <div class="photo">
        <img src="p3.jpg" />
        <span>不知道是什么图来的</span>
    </div>
    <div class="photo">
        <img src="p4.jpg" />
        <span>我的Logo，Studio拼错了都不知道，汗一个。</span>
    </div>
    <div class="photo">
        <img src="p5.jpg" />
        <span>四季图吧这是，但我分不清夏和秋</span>
    </div>
    </div>
</div>
（2）然后添加CSS样式表，为页面中的效果区域、图片及文字定义CSS样式。代码如下所示：
#photoShow{
    border: solid 1px #C5E88E;
    overflow: hidden; /*图片超出DIV的部分不显示*/
    width: 580px;
    height: 169px;
    background: #C5E88E;
    position: absolute;
}
.photo{
    position: absolute;
    top: 0px;
    width: 490px;
    height: 169px;
}
.photo img{
    width: 490px;
    height: 169px;
}
.photo span{}{
    padding: 5px 0px 0px 5px;
    width: 490px;
    height: 30px;
    position: absolute;
    left: 0px;
    bottom: -32px; /*介绍内容开始的时候不显示*/
    background: black;
    filter: alpha(opacity=50); /*IE透明*/
    opacity: 0.5; /*FF透明*/
    color: #FFFFFF;
}
（3）完成上面的准备工作后，下面开始编写jQuery代码。首先就是做一些初始化的工作：
$(document).ready(function(){
    var imgDivs = $("#photoShow>div");
    var imgNums = imgDivs.length; //图片数量
    var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
    var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
    var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度
    var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //图片介绍信息的高度
    imgDivs.each(function(i){
        $(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
        $(imgDivs[i]).hover(function(){
            //处理鼠标进入的时候
        },function(){
            //处理鼠标离开的时候
        });
    });
});
上述代码中，首先定义了一些变量，方便后面使用。然后就是使用了一个each()的函数在每一个匹配的元素进行事件处理。这里是每一个<div class="photo">元素分别进行事件的处理。
看一下下面的语句：
$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums), "top":"0px"});
该语句是通过CSS来控制每一个图片的层次和显示位置。然后就是用一个hover()函数来处
jquery在线图片理鼠标的hover事件。
（4）首先看一下鼠标进入图片的时候该怎么处理：
$(imgDivs[i]).hover(function(){
    //$(this).find("img").css("opacity","1");
    $(this).find("span").stop().animate({bottom: 0}, "slow");
    imgDivs.each(function(j){
        if(j<=i){
            $(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
        }else{
            $(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
        }
    });
}
在这里所有的动画效果都通过animate()函数修改CSS来控制元素的显示位置来实现。并且在调用animate()函数前都调用了stop()函数。stop()函数是用来停止当前元素的所有执行中的事件。
判断j<=i的语句是实现鼠标hover的当前图片及左面的图片向左移动，当前图片右面的图片向右移动的效果。
（5）下面设计鼠标离开的处理，代码如下所示：
        function(){
            imgDivs.each(function(k){
                //$(this).find("img").css("opacity","0.7");
                $(this).find("span").stop().animate({bottom: -spanHeight}, "slow");
                $(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow");
            });
        });
（6）保存网页，在浏览器中预览，效果如图7-11所示：
图7-11  鼠标移动到第3张图上时的效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。