jquery鼠标悬停图片放大滑动显示标题

来源：互联网发布：手机编程工具编辑：程序博客网时间：2024/05/22 03:16

HTML:

<!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"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>jquery鼠标悬停图片放大滑动显示标题</title>    <link rel="stylesheet" href="css/style.css"/>    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>    <script src="js/jquery.big.js"></script></head><body>    <div id="wrap">        <ul>            <li>                <div class="imgBox"><a href="" title=""><img src="images/1.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/2.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/3.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/4.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/5.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/6.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/7.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/8.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/9.png" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/10.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/11.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>            <li>                <div class="imgBox"><a href="" title=""><img src="images/12.jpg" /></a></div>                <div class="textBox">广东省对抗赛的道路</div>            </li>        </ul>  </div></body></html>

CSS:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{    margin:0;    padding:0;    border:0;    font:inherit;    font-size:100%;    vertical-align:baseline}ul { list-style: none; }img { border: none;}#wrap { width: 690px; margin: 40px auto; }#wrap li {width: 220px;  height: 140px; overflow: hidden; position: relative; z-index: 10; float: left; display: inline-block; margin: 5px; }#wrap li .imgBox { width: 220px; height: 140px;  }#wrap li .imgBox  img { width: 220px; height: 140px; position: relative; z-index: 40; }#wrap li .textBox { width: 220px; height: 30px; line-height: 30px; text-align: center; color: #FFF; background: #000; opacity: 0.6; font-size: 12px; position: absolute; bottom:0px; z-index: 50; display: none;  }

JS:

$(window).load(function(){    var $wrap = $('#wrap');    var objPara = {        imgIncrease : 100, //鼠标进入时候图片增加的像素大小        effectDuration : 500, //效果持续时间        //把本身图片的width height大小 变量存起来        imgWidth : $wrap.find('img').width(),        imgHeight : $wrap.find('img').height()    };    $wrap.find('li').hover(function(){        $(this).find('img').animate({            width : objPara.imgWidth + objPara.imgIncrease,            height : objPara.imgHeight + objPara.imgIncrease,            left : objPara.imgIncrease/2*(-1),            top : objPara.imgIncrease/2*(-1)        },{           duration : objPara.effectDuration,           queue : false        });        $(this).find('.textBox:not(:animated)').slideDown(objPara.effectDuration);    },function(){        $(this).find('img').animate({            width : objPara.imgWidth,            height : objPara.imgHeight,            left : 0,            top : 0        },{            duration : objPara.effectDuration        });        $(this).find('.textBox').slideUp(objPara.effectDuration);    });});

0 0