欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

<title>jquery旅游网站带标题的焦点图片切换代码_js代码</title>

<meta name="keywords" content="jquery特效,焦点图,图片切换,图片文字,带标题的焦点图" />

<meta name="description" content="jquery旅游网站带标题的焦点图片切换代码。" />

 

<link rel="stylesheet" href="css/style.css" type="text/css" />

 

</head>

 

<body>

 

<div class="teacherPic">

 

         <div class="content" id="sirendingzhi1">

                   <div class="txt">

                            <h3>新疆</h3>

                            <h4>草场丰腴、林木葱郁,有着“塞外江南”的美称</h4>

                            <p>发团日期:7-10<br>

                               参考价格:5280<br>

                               摄影器材: 单反 广角 中长焦 三脚架等</p>

                   </div>

         </div>

        

         <div class="content" id="sirendingzhi2">

                   <div class="txt">

                            <h3>云南</h3>

                            <h4>东川红土地的炫彩、高原明珠——抚仙湖的柔美</h4>

                            <p>发团日期:7-11<br>

                               参考价格:2780<br>

                               摄影器材: 单反 广角 中长焦 三脚架等</p>

                   </div>

         </div>

        

         <div class="content" id="sirendingzhi3">

                   <div class="txt">

                            <a href="#" ><h3>贵州</h3></a>

                            <h4>西江千户苗寨 以美丽回答一切</h4>

                            <p>发团日期:7-12<br>

                               参考价格:2680<br>

                               摄影器材: 单反 广角 中长焦 三脚架等</p>

                   </div>

         </div>

        

         <div class="content" id="sirendingzhi4">

                   <div class="txt">

                            <h3>色达</h3>

                            <h4>地球上最后的一片净土,心灵净化之旅</h4>

                            <p>发团日期:7-10<br>

                               参考价格:3900<br>

                               摄影器材: 单反 广角 中长焦 三脚架等</p>

                   </div>

         </div>

        

         <div class="content" id="sirendingzhi5">

                   <div class="txt">

                            <h3>斯里兰卡</h3>

                            <h4>印度洋上的一滴眼泪!</h4>

                            <p>发团日期:6-12<br>

                               参考价格:1250美金<br>

                               摄影器材: 单反 广角 中长焦 三脚架等</p>

                   </div>

         </div>

        

</div>

 

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

$(".content") .hover(function(){

         $(this) .children(".txt").stop() .animate({height:"360px"},200);

         $(this) .parent(".teacherPic") .css({"background":"url(images/"+($(this).attr('id'))+".jpg) no-repeat","-webkit-transition":"all 0.8s ease 0.2s","transition":"all 0.8s ease 0.2s"});

/*                        $(this) .parent(".teacherPic") .css("background","url(images/"+($(this).attr('id'))+".jpg) no-repeat");*/

         $(this) .find(".txt h3").stop() .animate({paddingTop:"130"},550);

         $(this) .find(".txt p").stop() .show();

},function(){

         $(this) .children(".txt").stop() .animate({height:"100px"},200);

         $(this) .find(".txt h3").stop().animate({paddingTop:"0px"},550);

         $(this) .find(".txt p").stop() .hide();

})

</script>

 

</body>

</html>

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h14899.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-03 10:12 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。