#6讲项目实战js第三区域响应式菜单

最新推荐文章于 2021-09-30 18:02:38 发布

想旅游咯

最新推荐文章于 2021-09-30 18:02:38 发布

阅读量570

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

#6讲项目实战js第三区域响应式菜单

外部样式表部分：

*{margin:0px; padding:0px;}
#Top{/*width:100%;*/ height:149px; background:url("../images/headbg.jpg");}
#Top .head{width:1000px; height:30px;line-height:30px; margin:0px auto;/*水平距中*/font-size:13px;font-family:"微软雅黑"; color:#666;}
#Top .head span{color:#E20076; font-weight:bold;/*加粗*/padding:0px 4px;}
#Top .head a{color:#666;text-decoration:none;/*去掉下划线*/ font-weight:800;/*加粗*/
    padding:0px 5px;}
#Top .head a:hover{color:#E20076;}/*鼠标放上去改变文字颜色*/

#header{width:1000px;height:70px; margin:0px auto;}
#header .banner{width:221px; height:44px; float:left;/*左浮动*/ padding-top:14px;}
#header .logo{width:511px; height:70px;float:left;/*左浮动*/line-height:70px;font-size:16px;font-family:"微软雅黑"; padding-left:80px;}

#header .search{width:180px; height:35px;float:right;/*左浮动*/ padding-top:16px; position:relative;/*相对定位*/}
#header .logo a{color:#000; font-weight:bold; text-decoration:none;
padding:0px 20px; float:left;}
#header .logo a:hover{color:#E20076;}

#header .search input.txt{width:140px; height:23px; border:1px solid #e1e1e1; font-size:12px;
       color:#999; text-indent:10px;/*首行缩进*/ position:absolute;
       left:0px; top:20px;}
#header .search input.but{width:26px; height:25px; background:url("../images/sosoh.jpg");
      border:0px;/*边框设置为0*/ position:absolute; left:141px; top:20px;}

/*导航样式*/
#Top .Nav{width:1000px; height:49px;margin:0px auto; }
#Top .Nav .mainNav{width:550px; height:49px; float:left;}
#Top .Nav .smallNav{width:150px; height:49px;float:right;}

#Top .Nav .mainNav ul li{list-style-type:none;/*去掉圆点*/ width:100px; height:49px; float:left; line-height:49px;
       text-align:center;/*文字水平距中*/
       font-size:14px;font-family:"微软雅黑"; position:relative;/*相对定位*/}
#Top .Nav .mainNav ul li a{ color:#fff; text-decoration:none;}
#Top .Nav .mainNav ul li .menu{width:350px; border:2px solid #e10076;border-top:0px; position:absolute;
       background:#fff;z-index:3;/*改变定位元素的上下关系(那个在上，那个在正下，值越大，越在上面)*/
        filter:Alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9;/*背景透明*/ left:0px; top:49px;
        display:none;/*隐藏*/ padding:10px;/*内边距*/}
#Top .Nav .mainNav ul li.hover{background:#B80064;}

#Top .Nav .mainNav ul li p{text-align:left;/*距左*/line-height:35px; border-bottom:1px dotted #ddd;}
#Top .Nav .mainNav ul li p span{font-weight:bold;}
#Top .Nav .mainNav ul li p a{color:#666;}
#Top .Nav .mainNav ul li p a:hover{color:#B80064;}

#Top .Nav .smallNav{line-height:49px; font-size:14px; font-family:"微软雅黑"; }
#Top .Nav .smallNav a{color:#fff; text-decoration:none; float:left; padding:0px 10px;}
#Top .Nav .smallNav a:hover{text-decoration:underline;/*加下划线*/}

/*广告样式*/
#Adv{width:100%;height:421px; background:red; position:relative;}
#Adv .ImgList{width:100%; height:421px; position:absolute;/*绝对定位*/ left:0px; top:0px;
z-index:2;}
#Adv ul.button li{width:50px; height:10px; background:#000; border:1px dotted #fff; float:left;
margin:0px 5px; list-style-type:none; }
#Adv ul.button{ height:20px; position:absolute;left:43%; bottom:50px;z-index:3; display:inline-block;/*行内块级元素*/}
#Adv ul.button li.hover{background:#fff;}

/*第一部分样式*/
#Part1{width:1000px; height:460px; margin:35px auto; }
#Part1 #Part1_L{width:339px; height:440px; border:1px dashed #E20076; float:left; padding:6px;}
#Part1 #Part1_R{width:560px; height:442px; padding:0px 30px; background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top; float:right;}

#Part1 #Part1_R p.biaoti{height:90px; background:url("../images/lxtjbg.jpg") no-repeat right bottom;
       border-bottom:1px dashed #c9c9c9;}
#Part1 #Part1_R ul.select_but{border-bottom:1px solid #eee; height:32px;}
#Part1 #Part1_R ul.select_but li{list-style-type:none; height:32px; width:84px; float:left; cursor:pointer;
         font-size:14px;font-family:"微软雅黑"; text-align:center; line-height:32px;
         background:url("../images/lxtjcdbg.jpg") no-repeat right bottom;}
#Part1 #Part1_R ul.select_but li.hover{background-image:url("../images/lxtjcdxg.jpg");}
/*第一部分 ----内容样式*/
#Part1 #Part1_R .select_con{height:300px; margin-top:20px; overflow:hidden;}
#Part1 #Part1_R .select_con .select_content{height:300px; }

/*选项卡的图片列表效果*/
#Part1_R .select_con .select_content ul.sel_imgList li{width:126px; height:124px; float:left;
      list-style-type:none;margin:0px 6px 0px 7px; position:relative;/*相对定位*/}
#Part1_R .select_con .select_content ul.sel_imgList li p{/*height:41px;*/ background-color:rgba(187,14,115,0.7);
    color:#fff; font-size:12px;font-family:"微软雅黑"; padding:0px 5px; line-height:20px;
    position:absolute; left:0px; bottom:0px; height:0px; overflow:hidden;}
/*路线推荐的新闻列表*/
ul.IntroNews{ padding-top:20px;}
ul.IntroNews li{font-family:"微软雅黑"; font-size:14px; line-height:35px;
    text-indent:20px; background:url("../images/li_dian.png") no-repeat 6px 15px;}
ul.IntroNews li a{ color:#000; text-decoration:none;}
ul.IntroNews li a:hover{color:#E20076;}
ul.IntroNews li span{color:#E20076; font-weight:bold; float:right;}

/*内容区广告轮播效果*/
#Part1_L .Part_imgCon{width:339px; height:376px; background:red; position:relative; overflow:hidden;}
#Part1_L .Part_imgCon .Part_ScrollCon{height:376px; width:1000%; background:blue;
position:absolute; left:0px; top:0px;}
#Part1_L .Part_imgCon .Part_ScrollCon img{float:left;}

/*滚动文字样式*/
#Part1_L ul.Part_ScrollTxt{height:35px; overflow:hidden; }
#Part1_L ul.Part_ScrollTxt li{list-style-type:none; font-size:14px;font-family:"微软雅黑"; line-height:35px;}
#Part1_L ul.Part_ScrollBut li{width:40px; height:8px;list-style-type:none;
float:left; margin:0px 5px; background:#00a9e2; cursor:pointer;}
#Part1_L ul.Part_ScrollBut li.hover{background:#d81480;}

/*第二部分样式*/
#Part2{width:1000px; height:360px; background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top;
margin:0px auto; text-align:center;}
#Part2 img.bannerimg{margin-top:15px;}

/*第三部分样式*/
#Part3{width:1000px; height:500px; background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top;
   margin:0px auto; margin-top:35px; text-align:center;}
#Part3 p.title{height:30px; width:900px;margin:0px auto;
   background:url("../images/cjxlejcdbg.jpg"); text-align:left; font-size:14px;font-family:"微软雅黑";
   font-weight:bold; text-indent:55px; padding:12px 29px 0px 55px;}
#Part3 p.title a{ color:#000; text-decoration:none; width:70px; height:20px; position:relative;
   text-indent:0px; line-height:20px;display:inline-block; float:left; text-align:center;}
#Part3 p.title a img{position:absolute; top:24px; left:30px; display:none;}
#Part3 p.title a.hover{background:#e10076; border-radius:15px; color:#fff;}
#Part3 p.title a.hover img{display:block;}
#Part3 p.title a.more{font-weight:100; float:right;}
#Part3 p.title a.more:hover{background:none; color:#e10076;}

#Part3 .part3Con{height:350px; width:940px; margin:20px auto 0px;}
#Part3 .part3Con .Part3ConL{width:319px; height:326px; background:url("../images/xxpicbg.jpg"); float:left;
padding:6px 0px 0px 7px;}
#Part3 .part3Con .Part3ConR{width:580px; height:334px; background:green; float:right;}
#Part3 .part3Con .Part3ConL img{display:none;}

#Part3 .part3Con .Part3ConR .Part3ConR_comm{width:580px; height:334px; display:none;}

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<meta name="author" content="李明杰">
<meta name="keywords" content="湖南海外旅游有限公司湖南长沙最好旅行社湖南海外旅行社长沙旅行社排名">
<meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社，连续三年评为全国百强旅行社，国家特许经营出境游组团社，长沙从事旅游业务最早、综合实力最强的旅游公司，主营出境旅游、国内旅游、入境旅游、会议展览。">
<title>湖南海外旅游</title>

<div id="Part1">

<div id="Part1_L">
  
  <div class="Part_imgCon">
   <div class="Part_ScrollCon">
    <img src="images/part_adv1.jpg" />
    <img src="images/part_adv2.jpg" />
    <img src="images/part_adv3.jpg" />
    <img src="images/part_adv4.jpg" />
    <img src="images/part_adv5.jpg" />
   </div>
  </div>
  
  
  <ul class="Part_ScrollTxt">
   <li>美国西海岸加州阳光十二日之旅</li>
   <li>我带老伴游江南华东感恩关爱主题旅游</li>
   <li>额济纳、胡杨林摄影观光双飞五日游</li>
   <li>巴厘岛蓝梦五星</li>
   <li>斯里兰卡海滨7天5晚小火车之旅</li>
  </ul>

<ul class="Part_ScrollBut">
   <li class="hover"></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>

</div>

<div id="Part1_R">
  <p class="biaoti"><img src="images/introlx.jpg" /></p>
  
  <ul class="select_but">
   <li class="hover">新品推荐</li>
   <li>热门推荐</li>
   <li>高端定制</li>
  </ul>
  

  
  <div class="select_con">
   <div class="select_content">
    
    <ul class="sel_imgList">
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
    </ul>
    
    <div style="clear:both;"></div>
    
    <ul class="IntroNews">
     <li><span>￥9990</span><a href="#">我带老伴游江南华东感恩关爱主题旅游</a></li>
     <li><span>￥9990</span><a href="#">海誓山盟希腊法瑞意十三日游</a></li>
     <li><span>￥5380</span><a href="#">台湾印象八日游</a></li>
     <li><span>￥9990</span><a href="#">泰包机泰享受五晚六日游</a></li>
    </ul>

</div>

<div class="select_content">
    
    <ul class="sel_imgList">
     <li><img src="images/intro2.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
     <li><img src="images/intro2.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
     <li><img src="images/intro2.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
     <li><img src="images/intro2.jpg" width="126" height='124' />
      <p>我带老伴游江南华东感恩关爱主题旅游</p>
     </li>
    </ul>
    
    <div style="clear:both;"></div>
    
    <ul class="IntroNews">
     <li><span>￥9990</span><a href="#">2华东感恩关爱主题旅游</a></li>
     <li><span>￥9990</span><a href="#">海誓山盟希腊法瑞意十三日游</a></li>
     <li><span>￥5380</span><a href="#">台湾印象八日游</a></li>
     <li><span>￥9990</span><a href="#">泰包机泰享受五晚六日游</a></li>
    </ul>

</div>
   <div class="select_content">高端定制</div>
  </div>

</div>
</div>

<div id="Part2">
<img src="images/graytop.jpg" />
<img src="images/banner-n.jpg" class="bannerimg" />
</div>

<div id="Part3">
<img src="images/cjlxtop.jpg" />
<p class="title">
  <a href="#" class="sel_a hover">东南亚<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">日韩<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">台湾<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">港澳<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">海岛<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">大洋洲<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">欧洲<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">中东非洲<img src="images/jd.jpg" /></a>
  <a href="#" class="sel_a">美洲<img src="images/jd.jpg" /></a><a href="#" class="more">更多</a><p>

<div class="Part3ConR">
   <div class="Part3ConR_comm" style="display:block;">1</div>
   <div class="Part3ConR_comm">2</div>
   <div class="Part3ConR_comm">3</div>
   <div class="Part3ConR_comm">4</div>
   <div class="Part3ConR_comm">5</div>
   <div class="Part3ConR_comm">6</div>
   <div class="Part3ConR_comm">7</div>
   <div class="Part3ConR_comm">8</div>
   <div class="Part3ConR_comm">9</div>
  </div>
  
</div>

</div>

$("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();//调用和执行

//路线推荐先项卡效果
//鼠标滑上去的效果 mouseover
$("ul.select_but li").mouseover(function(){
  $(this).addClass("hover").siblings().removeClass("hover");//改变选项卡样式
  //$(this).index();序列号
  $(".select_con .select_content").eq($(this).index()).show().siblings().hide();//改变内容区

});

//路线推荐图片文字滑动效果
$("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==4){_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();
   }else{_index2=-1;}//这个地方要不要
  },3000);

};
autoPlay2();

//第三部分 Part3选项卡样式
var _index3=0;
$("#Part3 p.title a.sel_a").mouseover(function(){
  _index3=$(this).index();
  $(this).addClass("hover").siblings().removeClass("hover");
  $(".part3Con .Part3ConL img").eq(_index3).show().siblings().hide();
  $(".Part3ConR .Part3ConR_comm").eq(_index3).show().siblings().hide();
});

</script>
</body>
</html>

想旅游咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#6讲项目实战js第三区域响应式菜单

#6讲项目实战js第三区域响应式菜单 1.构建一个宽度100% 高度149px 这样一个长方形，为了保证浏览器的兼容，我们加了*｛margin:0px;padding:0px;｝Top样式中的宽度100%也可以不写，因为浏览器已给出默认为100%宽。 2.给个长方形盒子，添加一个背景图片，背景图片默认的会沿着水平方向平铺 3.Top盒子里头部信息的构建 head里假
复制链接

扫一扫