HTML项目

最新推荐文章于 2024-06-05 10:27:28 发布

结婚再改昵称

最新推荐文章于 2024-06-05 10:27:28 发布

阅读量182

点赞数

分类专栏：例题项目文章标签： html

本文链接：https://blog.csdn.net/weixin_51051149/article/details/108952161

版权

例题同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

项目

3 篇文章 0 订阅

订阅专栏

<!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>Jane shopping</title>
   <link rel="stylesheet" href="styles/main.css" type="text/css" />
   <link rel="stylesheet" href="styles/index.css" type="text/css" />
   <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
   <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
//头部换色
$(function () {
$("#skin li").click(function () {
var css = "styles/skin/" + $(this).attr("id") + ".css";
$("#cssfile").attr("href", css);
$(this).addClass("selected").siblings().removeClass("selected");
})
})
//收缩
$(function(){
   $(".module_up_down img[id]").click(function(){
       var $this=$(this);
       $(".scrollNews").slideToggle(1000,function(){
           var img =$this.attr("src");
           if(img =="images/down.gif")
               img="images/up.gif";
               else
                   img = "images/down.gif";
                   $this.attr("src",img);
       })
   })
})
$(function(){
   $(".module_up_down img[name]").click(function(){
       var $this=$(this);
       $(".m-treeview").slideToggle(1000,function(){
           var img =$this.attr("src");
           if(img =="images/down.gif")
               img="images/up.gif";
               else
                   img = "images/down.gif";
                   $this.attr("src",img);
       })
   })
})
$(function(){
   $(".m-treeview > li").click(function(){
       var cl=$(this).attr("class");
       if (cl =="m-expanded")
           $(this).attr("class","m-collapsed");
       else if(cl =="m-collapsed")
           $(this).attr("class","m-expanded");
   })
})

$(function(){
   var index=0;
   $(".goRight").click(function(){
                   index++;
                   if(index>=3){
                       index=0;
                   }
                   $(".prolist_content").animate({
                       "left":(-584)*index+"px"
                       },1000)
               });
               $(".goLeft").click(function(){
                index--;
                   if(index<0){
                       index=2;
                   }
                   $(".prolist_content").animate({
                       "left":(-584)*index+"px"
                       },1000)
               });
})
// $(function(){
//     $(".num li").bind("click mouseover",function(){
//         var index=$(this).index();
//         $(".slider").animate({
//             "top": (-150) * index + "px"
//         },100)
//         $(this).addClass("on").siblings().removeClass("on");
//     })
// })
$(function(){
   setInterval(function(){
       $(".scrollNews li:first")
       .remove()
       .appendTo($(".scrollNews ul"));
   },1000)
})
$(function () {
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function () {
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$('.ad').hover(function () {
clearInterval(adTimer);
}, function () {
adTimer = setInterval(function () {
showImg(index)
index++;
if (index == len) { index = 0; }
}, 1000);
}).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index) {
var adHeight = $(".ad").height();
$(".slider").stop(true, false).animate({ top: -adHeight * index }, 100);
$(".num li").removeClass("on")
.eq(index).addClass("on");
       }
   </script>
</head>
<body>

<div id="header">
   <a id="logo" href="#">Jane Shopping</a>
   <ul id="skin">
       <li id="skin_0" title="蓝色" class="selected">蓝色</li>
       <li id="skin_1" title="紫色">紫色</li>
       <li id="skin_2" title="红色">红色</li>
       <li id="skin_3" title="天蓝色">天蓝色</li>
       <li id="skin_4" title="橙色">橙色</li>
       <li id="skin_5" title="淡绿色">淡绿色</li>
   </ul>

</div>


<div id="navigation">
   <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">衬衫</a>
               <ul>
                   <li><a href="#">短袖衬衫</a></li>
                   <li><a href="#">长袖衬衫</a></li>
                   <li><a href="#">无袖衬衫</a></li>
               </ul>
       </li>
       <li><a href="#">卫衣</a>
               <ul>
                   <li><a href="#">开襟卫衣</a></li>
                   <li><a href="#">套头卫衣</a></li>
               </ul>
       </li>
       <li><a href="#">裤子</a>
               <ul>
                   <li><a href="#">休闲裤</a></li>
                   <li><a href="#">卡其裤</a></li>
                   <li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
       <li><a href="#">联系我们</a></li>
   </ul>
</div>


<div id="content">
   <div class="content_left">
       <div class="global_module news">
           <h3>最新动态</h3>
           <div class="scrollNews" >
               <ul>
                   <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                   <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                   <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                   <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                   <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                   <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                   <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
               </ul>
           </div>
           <p class="module_up_down"><img id="img1" src="images/down.gif" alt="" /></p>
       </div>
        <div class="global_module procatalog">
           <h3>产品分类</h3>
           <ul class="m-treeview">
               <li class="m-expanded">
                   <span>衬衫</span>
                   <ul>
                       <li><span>短袖衬衫</span></li>
                       <li><span>长袖衬衫</span></li>
                   </ul>
               </li>
               <li class="m-expanded">
                   <span>卫衣</span>
                   <ul>
                       <li ><span>开襟卫衣</span></li>
                       <li ><span>套头卫衣</span></li>
                   </ul>
               </li>
               <li class="m-expanded">
                   <span>裤子</span>
                   <ul>
                       <li><span>休闲裤</span></li>
                       <li><span>免烫卡其裤</span></li>
                       <li><span>牛仔裤</span></li>
                       <li><span>短裤</span></li>
                   </ul>
               </li>
       </ul>
           <p class="module_up_down"><img name="two" src="images/down.gif" alt="" /></p>
       </div>
</div>
   <div class="content_right">
       <div class="ad" >
           <ul class="slider" >
               <li><img src="images/ads/1.gif"/></li>
               <li><img src="images/ads/2.gif"/></li>
               <li><img src="images/ads/3.gif"/></li>
               <li><img src="images/ads/4.gif"/></li>
               <li><img src="images/ads/5.gif"/></li>
           </ul>
           <ul class="num" >
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
           </ul>
       </div>
       <div class="global_module prolist">
           <h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
</li>
<li>
<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
</li>
</ul>
</div>
<p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
       </div>
</div>
</div>

</body>
</html>

结婚再改昵称

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
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; cha...
复制链接

扫一扫

专栏目录