#14讲项目实战内页抽出切换效果的实现
/*内页主体样式*/
img{border:0px;} .webBody{background:#f4f4f4;} /*面包屑导航样式*/ .webLogo {width:1000px; height:68px; margin:0px auto; border-bottom:2px solid #dd85b3; background:url("../images/position.png") no-repeat left center; font-size:14px; line-height:68px; text-indent:20px;} .webLogo a{color:#666; text-decoration:none; } .webLogo a:hover{color:#e20076; text-decoration:underline;}
#WebCon{width:1000px; background:url("../images/webbg1.png") no-repeat,
url("../images/webbg2.png") no-repeat right top #fff; margin:0px auto; border:1px solid red;} #web_Menu{width:940px; margin:30px auto 15px;} #web_Menu dl{width:100%;height:30px; margin-bottom:5px;} #web_Menu dl dt{width:180px; height:30px; background:#ededed; float:left; font-size:14px; text-align:center;line-height:30px; font-weight:bold;} #web_Menu dl dt a{display:block; color:#000; text-decoration:none; cursor:default;/*鼠标状态*/} #web_Menu dl dt a:hover{background:#e10076; color:#fff;} #web_Menu dl dd{width:758px;height:30px; background:#f4f4f4; float:right; line-height:30px; } #web_Menu dl dd a{font-size:14px; color:#000;text-decoration:none; float:left; padding:0px 10px;} #web_Menu dl dd a:hover{color:#e10076;}
/*第页第一部分样式*/
#webPart1{width:940px;margin:0px auto 20px;} img.webbg3{ display:block;margin:0px auto;} /*左边轮播器样式*/ #webPart1_l{width:361px; height:270px; background:green; float:left; position:relative;} #webPart1_l .webAdvcon{width:361px;height:270px; position:relative;相对定位元素/*overflow:hidden;*/} #webPart1_l .webAdvcon img{position:absolute;/*绝对定位*/ /*left top bottom right*/}
#webPart1_l ul.webAdvbutton{width:105px; height:25px;position:absolute; bottom:5px;
right:0px; z-index:333;} #webPart1_l ul.webAdvbutton li{width:20px; height:20px; background:rgba(255,255,255,0.5); float:left; border:1px solid #fff; margin:0px 2px; font-size:12px; text-align:center; line-height:20px;} #webPart1_l ul.webAdvbutton li.hover{background:#f66e08;color:#fff; border:1px solid #e63003;}
#webPart1_l dl.text{width:361px; height:38px; background:rgba(0,0,0,0.5); overflow:hidden;
position:absolute; left:0px; bottom:0px; z-index:22;} #webPart1_l dl.text dd{height:38px; color:#fff; font-size:14px; line-height:38px; text-indent:10px;}
#webPart2_r{width:568px; height:270px; background:#f9f9f9; float:right; border:1px dashed #e20076;
position:relative;} #webPart2_r img.dirl{position:absolute; left:0px; top:100px;} #webPart2_r img.dirr{position:absolute; right:0px; top:100px;} #webPart2_r #webPart2_Scroll{width:504px; height:210px; overflow:hidden;/*隐藏*/ margin:40px auto 0px; position:relative;} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon{width:1000%;height:210px; position:absolute; left:0px;/*滚动就是改变他的值*/} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl{width:150px;height:210px; float:left; margin:0px 9px;} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dt{width:150px; height:150px; background:yellow;} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd{font-size:12px; text-align:center; height:25px; line-height:25px;} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd a{color:#000; text-decoration:none;} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd a:hover{color:#e10076;} #webPart2_r #webPart2_Scroll .webPart2_ScrollCon dl dd span{color:#e10076; font-weight:bold;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码--> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <!--当前页面的三要素--> <title>魔鬼训练班_静态网站首页开发二</title> <meta name="Keywords" content="关键词,关键词"> <meta name="description" content=""> <!--css , js--> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/public.css">
</head>
<body class="webBody"> <!--网站头部开始--> <div id="Top"> <!--头部信息开始--> <div class="head"><img src="images/cart.png" align='absmiddle'/> 全省免费服务热线: <span>96556</span> <span>0731-84635555</span>旅行社同行热线:<span>0731-84402588</span> <a href="#">登陆</a> <a href="#">注册</a> </div> <!--头部信息结束-->
<!--banner开始-->
<div id="header"> <div class="banner"><a href=""><img src="images/logo.png" /></a></div> <div class="logo"> <a href="">首页</a> <a href="">出境游</a> <a href="">国内游</a> <a href="">特价游</a> <a href="">签 证</a> </div> <!--搜索开始--> <div class="search"> <form> <input type="text" class='txt' value="输入目的地"/> <input type="submit" class='but' value=""/> </form> </div> <!--搜索结束--> </div> <!--banner结束-->
<!--导航开始-->
<div class="Nav"> <div class="mainNav"> <ul> <li><a href="#">出境跟团游</a> <div class="menu"> <p><span>台湾港澳:</span> <a href="#">台湾</a> | <a href="#">香港</a> | <a href="#">澳门</a></p> <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南</a> | <a href="#">柬埔寨</a> | <a href="#">老挝</a> | <a href="#">印度</a> | <a href="#">尼泊尔</a></p> <p><span>台湾港澳:</span> <a href="#">台湾</a> | <a href="#">香港</a> | <a href="#">澳门</a></p> <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南</a> | <a href="#">柬埔寨</a> | <a href="#">老挝</a> | <a href="#">印度</a> | <a href="#">尼泊尔</a></p> </div> </li>
<li><a href="#">出境自由行</a>
<div class="menu"></div> </li>
<li><a href="#">国内跟团游</a>
<div class="menu"></div> </li>
<li><a href="#">国内自由行</a>
<div class="menu"></div> </li>
<li><a href="#">湖南周边游</a>
<div class="menu"></div> </li> </ul> </div>
<div class="smallNav"><a href="#">泰国</a> <a href="#">台湾</a> <a href="#">普吉</a></div>
</div> <!--导航结束--> </div> <!--网站头部结束-->
<!--内页主体内容开始-->
<!--面包屑导航开始--> <div class="webLogo">您现在所在的位置:<a href="">首页</a> >> <a href="">出境跟团游</a></div> <!--面包屑导航结束--> <div id="WebCon"> <!--内页二级菜单开始--> <div id="web_Menu"> <dl> <dt><a href="javascript:void(0)">台湾港澳</a></dt> <dd><a href="">台湾</a> <a href="">香港</a> <a href="">澳门</a></dd> </dl> <dl> <dt><a href="javascript:void(0)">东南亚</a></dt> <dd><a href="">香港</a> <a href="">香港</a> <a href="">澳门</a></dd> </dl> <dl> <dt><a href="javascript:void(0)">台湾港澳</a></dt> <dd><a href="">美洲:</a> <a href="">香港</a> <a href="">澳门</a></dd> </dl> <dl> <dt><a href="javascript:void(0)">台湾港澳</a></dt> <dd><a href="">台湾</a> <a href="">香港</a> <a href="">澳门</a></dd> </dl> <dl> <dt><a href="javascript:void(0)">台湾港澳</a></dt> <dd><a href="">美洲:</a> <a href="">香港</a> <a href="">澳门</a></dd> </dl> <dl> <dt><a href="javascript:void(0)">台湾港澳</a></dt> <dd><a href="">台湾</a> <a href="">香港</a> <a href="">澳门</a></dd> </dl> </div> <!--内页二级菜单结束-->
<!--内页第一个部分开始-->
<img src="images/webbg3.jpg" class="webbg3"/>
<div id="webPart1">
<!--左边开始 内页广告轮播器 start--> <div id="webPart1_l"> <!--图片列表 start--> <div class="webAdvcon"> <img src="images/webadv1.jpg" width='361' height='270' style="z-index:2"/> <img src="images/webadv2.jpg" width='361' height='270'/> <img src="images/webadv3.jpg" width='361' height='270'/> <img src="images/webadv4.jpg" width='361' height='270'/> </div> <!--图片列表 end-->
<!--按扭开始-->
<ul class="webAdvbutton"> <li class="hover">1</li> <li >2</li> <li>3</li> <li>4</li> </ul> <!--按扭结束-->
<!--文字样式start-->
<dl class="text"> <dd>以色列八日文化之旅</dd> <dd>美国西海岸双城记八日游</dd> <dd>海外独家自驾系列- 迪拜豪车、高尔夫五日游</dd> <dd>日本北海道本州品质七日游</dd> </dl> <!--文字样式end--> </div> <!--左边结束 内页广告轮播器 end-->
<!--右边开始-->
<div id="webPart2_r"> <img src="images/dirl.jpg" class="dirl" /> <img src="images/dirr.jpg" class="dirr" /> <!--scroll begin--> <div id="webPart2_Scroll"> <div class="webPart2_ScrollCon"> <dl> <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚1</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> <dl> <dt><a href="#"><img src="images/intro2.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚2</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> <dl> <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚3</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> <dl> <dt><a href="#"><img src="images/intro2.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚4</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> <dl> <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚5</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> <dl> <dt><a href="#"><img src="images/intro2.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚6</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> <dl> <dt><a href="#"><img src="images/intro.jpg" width='150' height='150' /></a></dt> <dd><a href="#">马尔代夫泰姬珊瑚四晚7</a></dd> <dd>抢购价:<span>13760元</span></dd> </dl> </div> </div> <!--scroll end-->
</div>
<!--右边结束--> <div style="clear:both;"></div> </div> <!--内页第一个部分结束--> </div> <!--内页主体内容结束-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--网站底部开始--> <div id="Footer"> <div class="Footer_con"> <!--左banner start--> <div class="Footer_conL"> <img src="images/fbanner.png" /> <div class="bshare-custom icon-medium" style="padding-top:15px;"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script> </div> <!--左banner end--> <div class="Footer_conR"> <dl> <dt><a href="">服务承诺</a></dt> <dd><a href="">我们的服务</a></dd> <dd><a href="">我们的承诺</a></dd> <dd><a href="">荣誉</a></dd> </dl> <dl> <dt><a href="">技术实力</a></dt> <dd><a href="">专家推荐</a></dd> <dd><a href="">热门推荐</a></dd> <dd><a href="">网友推荐</a></dd> </dl>
<dl>
<dt><a href="">服务承诺</a></dt> <dd><a href="">我们的服务</a></dd> <dd><a href="">我们的承诺</a></dd> <dd><a href="">荣誉</a></dd> </dl> <dl> <dt><a href="">关于我们</a></dt> <dd><a href="">公司介绍</a></dd> <dd><a href="">新闻动态</a></dd> <dd><a href="">招贤纳士</a></dd> <dd><a href="">联系我们</a></dd> </dl> </div> </div> </div> <!--网站底部结束--> <!--网站版权信息start--> <div id="Copy"> 湖南海外旅游有限公司 版权所有Copyright@2011-2013.www.hnhwly.com<br/> 湘ICP备14003721号-2 旅行社业务经营许可证号:L-HUN-CJ00008 法定代表人:陈力 湖南省旅游局投诉电话:0731-84717614<br/> <span>友情链接:</span> <a href="">湖南省旅游</a> <a href="">旅行社业务</a> <a href="">海外旅游有</a> </div> <!--网站版权信息end-->
<!--底部广告start-->
<div id="fixedBox"><div id="fixedBox_Con"> <ul> <li class="li1">全省免费服务热线: <span>96556</span></li> <li class="li2">旅游咨询 <a href="http://wpa.qq.com/msgrd?v=3&uin=783733618&site=qq&menu=yes" target="_blank">点击QQ咨询</a></li> <li class="li3"><img src="images/fixedHot.png" /> <a href="" target="_blank">当前最新活动</a></li> <li class="li4"> <a href="#" class='wxrelative'> <img src="images/fixedWx.png" class="wx"/> <img src="images/erweima.png" class="erm"/> </a> <a href="#"><img src="images/fixedWb.png" /></a> <a href="http://wpa.qq.com/msgrd?v=3&uin=783733618&site=qq&menu=yes" target="_blank"><img src="images/fixedQQ.png" /></a> <a href="#Top"><img src="images/fixedDir.png" /></a> </li> </ul> </div></div> <!--底部广告end--> <!--在线客服QQ start--> <div id="Kf"> <ul> <li><a href="#">境外线路</a></li> <li><a href="#">海岛线路</a></li> <li><a href="#">国内线路</a></li> <li><a href="#">省内线路</a></li> </ul>
<p><a href="#"><img src="images/kfQQ.png" /></a></p>
<div class="kfWx"><img src="images/erweima.png" /></div> </div> <script type="text/javascript" src="js/flqq.js"></script>
<!--在线客服QQ end-->
<!--
1、构建一个长方形盒子,利用绝对定位,把他移动到最右边 2、给这个长方形,添加背景图 3、利用ul 无序列表来制作四个客服, 分别控制每个li高度,水平竖直距中显示 -->
<!--引用外部jquery类库-->
<script type="text/javascript" src="js/jquery.js"></script> <!--最后面引用--> <script type="text/javascript" src="js/index.js"></script>
</body>
</html> JS var d_Value=$(".search input.txt").val();//获取到他的默认的值 //获取焦点时 $(".search input.txt").focus(function(){ //$(this)同等于我们的 $(".search input.txt") if($(this).val()==d_Value){ $(this).val("");//当前输入框的值设置为空 //$(this).css("border","1px solid red"); } }); //失去焦点 $(".search input.txt").blur(function(){ if($(this).val()==""){ $(this).val(d_Value);//给他赋他的初始值 } });
//二级菜单的实现
$(".Nav .mainNav ul li").hover(function(){ $(this).find(".menu").show();//显示 .menu 盒子 $(this).addClass("hover");//给li添加 class="hover" },function(){ $(this).find(".menu").hide();//隐藏 $(this).removeClass("hover");//移除 li class="hover" });
//=======广告轮播图的实现=======
var _index=0;//初始化序列 var timePlay=null; $("#Adv .ImgList").eq(0).show().siblings("div").hide();//最开始显示第一张
$("ul.button li").hover(function(){/*鼠标在上面*/
clearInterval(timePlay);//清处定时播放器 _index=$(this).index();//获取当前li序列号 //alert(_index);//弹窗 $(this).addClass("hover").siblings().removeClass("hover");//显示按扭 //fadeIn 淡入 fadeOut 淡出 $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//显示图片 },function(){/*鼠标移开*/ autoPlay();//启用定时播放器 });
//自动轮播
//构建自动轮播的函数 function autoPlay(){ //alert("sss"); //设置定时器 timePlay=setInterval(function(){ _index++; if(_index<4){ if(_index==3){_index=-1; }//变成-1 $("ul.button li").eq(_index).addClass("hover").siblings().removeClass("hover");//显示按扭 $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//显示图片 }else{_index=-1;/*设置序列号为-1,跳到播放第一张图片*/} },2000); }; autoPlay();//调用和执行 //路线推荐 图片文字滑动效果 $("ul.sel_imgList li").hover(function(){ $(this).find("p").stop().animate({height:"41px"},200) },function(){ $(this).find("p").stop().animate({height:"0px"},200) }); //第一部分内容区广告轮播效果 var _index2=0;//定义了序列号变量 var timeInterval=null; $("ul.Part_ScrollBut li").hover(function(){ clearInterval(timeInterval);//清除定时器 _index2=$(this).index();//获取当前的序列号 $(this).addClass("hover").siblings().removeClass("hover");//当前li添加 class="hover" 其它li移除 $(".Part_ScrollCon").animate({left:"-"+_index2*339+"px"},1000); $("ul.Part_ScrollTxt li").eq(_index2).show().siblings().hide();//序列相同的li显示,其它的隐藏 },function(){autoPlay2(); });
//自动轮播
function autoPlay2(){
timeInterval=setInterval(function(){
_index2++;//序列号加1 if(_index2==5){_index2=0;} if(_index2<=4){ $("ul.Part_ScrollBut li").eq(_index2).addClass("hover").siblings().removeClass("hover");//当前li添加 class="hover" 其它li移除 $(".Part_ScrollCon").animate({left:"-"+_index2*339+"px"},1000); $("ul.Part_ScrollTxt li").eq(_index2).show().siblings().hide(); if(_index2==4){_index2=-1;} }else{_index2=-1;}//这个地方要不要 },3000);
};
autoPlay2(); //第三部分 Part3选项卡样式 function partComm(selBut,imgCon,Con){ //alert(selBut+"---"+imgCon +Con); var _index3=0; $(selBut).mouseover(function(){ _index3=$(this).index(); $(this).addClass("hover").siblings().removeClass("hover"); $(imgCon).eq(_index3).show().siblings().hide(); $(Con).eq(_index3).show().siblings().hide(); });
};
//把通用的代码,封装在函数,通传参的方式,来调用
partComm("#Part3 p.title a.sel_a","#Part3 .part3Con .Part3ConL img","#Part3 .Part3ConR .Part3ConR_comm"); partComm("#Part4 p.title a.sel_a","#Part4 .part3Con .Part3ConL img","#Part4 .Part3ConR .Part3ConR_comm"); function partComm2(selBut,Con){ //alert(selBut+"---"+imgCon +Con); var _index3=0; $(selBut).mouseover(function(){ _index3=$(this).index(); $(this).addClass("hover").siblings().removeClass("hover"); $(Con).eq(_index3).show().siblings().hide(); });
};
partComm2("#part5 ul.part5_selbut li","#part5 .part5_Con .part5_content");
//路线推荐先项卡效果 //鼠标滑上去的效果 mouseover partComm2("ul.select_but li",".select_con .select_content");
$(".part5_content .part5Comm").hover(function(){
//$(this).find("p").stop().slideUp();//从下往上收缩 $(this).find("p").stop(true,true).slideDown();//从上向下慢慢展开 },function(){ $(this).find("p").stop(true,true).slideUp();//从下往上收缩 //$(this).find("p").stop().slideDown();//从上向下慢慢展开 }); //微信二维码显示 $("#fixedBox_Con ul li.li4 a.wxrelative").hover(function(){ $(this).find("img.erm").show(); },function(){ $(this).find("img.erm").hide(); }); //横浮广告显示
$(window).scroll(function(){
var Top=$(window).scrollTop();//滚动的高度 if(Top>1000){ $("#fixedBox").addClass("scrollDisplay"); //当他滚动高度大于1000 就加上样式 class="scrollDisplay" }else{ $("#fixedBox").removeClass("scrollDisplay"); } }); //在线客服关闭功能 $("#Kf img.but_close").click(function(){ $("#Kf").hide();//隐藏 }); //内页图片左右切换效果 //左按扭切换效果 var click_num=0;//点击次数 var setTime3=null;//向左定时器 var setTime4=null;//向右定时器 var len=$("#webPart2_Scroll .webPart2_ScrollCon dl").length;//获取有多少个 dl(图片列表) $("#webPart2_r img.dirl").click(function(){ clearInterval(setTime3);//清除定时器 click_num++;// 点击次数加1 //alert(click_num); if(click_num<len-2){ $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000); }else{alert("到头了"); click_num=len-3;} });
//右切换按扭效果
$("#webPart2_r img.dirr").click(function(){ clearInterval(setTime3);//清除定时器 click_num--;//点击次数减1 //alert(click_num); if(click_num>=0){ $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000); }else{alert("右边到头了!!"); click_num=0;} });
//自动轮播
function autoPlay3(){
setTime3=setInterval(function(){ //alert("ss"); click_num++;// 点击次数加1 if(click_num<len-2){ $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000); }else{click_num=len-3; autoPlay4();clearInterval(setTime3);//清除定时器 } },1000); //alert("自动轮播"); } autoPlay3();//调用函数
function autoPlay4(){
setTime4=setInterval(function(){
click_num--;//点击次数减1
if(click_num>=0){ $("#webPart2_Scroll .webPart2_ScrollCon").animate({left:-168*click_num+"px"},1000); }else{ click_num=0;autoPlay3();clearInterval(setTime4);//清除定时器 }
},1000);
}
//内页广告轮播器样式
var web_index=0; var top_click=0; $("#webPart1_l ul.webAdvbutton li").click(function(){ // 添加class="hover" 移除 class="hover" $(this).addClass("hover").siblings().removeClass("hover"); web_index=$(this).index();//获到取当前点击的li的序列号
$(".webAdvcon img").eq(top_click).css("z-index","3");
$(".webAdvcon img").eq(web_index).css("z-index","2");
if(web_index==top_click){}else{
if(web_index==1){
//animate({改变的样式},时间,function(){当前面动画执行完之后,再执行}) $(".webAdvcon img").eq(top_click).animate({left:"-361px"},500,function(){ //$(".webAdvcon img").eq(top_click).css({"left":"0px","z-index":"0"}); $(".webAdvcon img").eq(top_click).removeAttr("style"); top_click=web_index; }); }
if(web_index==2){
$(".webAdvcon img").eq(top_click).animate({top:"-270px"},500,function(){ //$(".webAdvcon img").eq(top_click).css({"top":"0px","z-index":"0"}); $(".webAdvcon img").eq(top_click).removeAttr("style"); top_click=web_index; }); } if(web_index==3){ //alert("上一次点的序列号"+top_click); $(".webAdvcon img").eq(top_click).animate({right:"-361px"},500,function(){ //$(".webAdvcon img").eq(top_click).css({"right":"0px","z-index":"0"}); $(".webAdvcon img").eq(top_click).removeAttr("style"); top_click=web_index; }); }
if(web_index==0){
$(".webAdvcon img").eq(top_click).animate({bottom:"-270px"},500,function(){ //$(".webAdvcon img").eq(top_click).css({"bottom":"0px","z-index":"0"}); $(".webAdvcon img").eq(top_click).removeAttr("style"); top_click=web_index; }); }
}//不能重复制行
});
|
14讲项目实战内页抽出切换效果的实现
最新推荐文章于 2024-02-02 14:30:43 发布