仿天猫购物街品牌展示效果

最新推荐文章于 2023-12-21 09:45:41 发布
最新推荐文章于 2023-12-21 09:45:41 发布
阅读量110 收藏
点赞数
分类专栏： jquery 文章标签： jquery ViewUI


 

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
body{
  background-color:#eee;
}
*{
  margin:0;
  padding:0;
}
#outDiv{
  width:190px;
  margin-left:10px;
  margin-top:10px;
  position:relative;
}
#top1{
  height:30px;
  background-color:#000;
  color:#fff;
  line-height:30px;
  padding-left:10px;
  font-weight:bold;
}
#top2{
  cursor:pointer;
}
#top3{
  background-color:#000;
  line-height:30px;
  height:30px;
  width:190px;
  opacity:0.5;
  filter:alpha(opacity=50);
  position:absolute;
  bottom:-30px;
  cursor:pointer;
}
#top4{
  color:#fff;
  line-height:30px;
  height:30px;
  width:190px;
  position:absolute;
  bottom:-30px;
  cursor:pointer;
}
#top4 .brand_focus1{
 position:absolute;
 right:10px;
 display:inline-block;
}
#top4 .brand_name{
 position:absolute;
 left:10px;
 display:inline-block;
}
ul{
  list-style-type:none;
}
li{
  width:86px;
  height:45px;
  float:left;
  border:1px solid #fff;
  border-bottom:1px #CCC dotted;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#fff;
  display:block;
  position:relative;
}
.even_li{
  padding-right:7px;
  border-right:1px dotted #ccc;
}
#bottom .ord_li{
  padding-right:7px;
}
.logo_img{
  background-image:url(small_imgs.gif);
  background-repeat:no-repeat;
  width:90px;
  height:45px;
  display:block;
}
.brand_focus2{
  display:none;
  background-color:#ddd;
  height:25px;
  width:83px;
  padding-left:10px;
  line-height:25px;
  display:none;
  border:1px solid #999;
  position:absolute;
  left:-1px;
  z-index:999;
}
.active{
  top:-15px;
  border:1px solid #999;
  cursor:pointer;
}
</style>
</head>

<body>
<div id="outDiv">
  <div id="top">
     <div id="top1">产品分类</div>
  <div id="top2"><img src="big_img.jpg" border="0" /></div>
  <div id="top3"></div>  <!--实现透明背景上文字不透明效果，增加了“top3”-->
  <div id="top4">
     <a>
        <b class="brand_name">品牌名称</b>
     <b class="brand_focus1">+关注</b>
  </a>
  </div>
  </div>
  <ul id="bottom">
    <li class="even_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 0"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="ord_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -45px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="even_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -90px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="ord_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -135px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="even_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -180px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="ord_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -225px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="even_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -270px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
 <li class="ord_li">
   <a>
     <span>
     <b class="logo_img" style="background-position:0 -315px"></b>
  </span>
  <span>
     <b class="brand_focus2">+关注</b>
  </span>
   </a>
 </li>
  </ul>
</div>
<script>
/*
* 仿天猫品牌街品牌展示；
* ie8，ff，chrome浏览器中测试通过，其余浏览器未测；
* *******made by keimon*********
* *********2013-01-09***********
*/
//鼠标移动到品牌logo上时，突出显示品牌logo
var len = $('#bottom li').length;
for(var i=0; i<len; i++){
   $('#bottom li').eq(i).hover(function(){
      var itemLi = $(this);
   var index = $('#bottom li').index(itemLi);
   $('#bottom li').eq(index).find('.brand_focus2').css('display','block');
   $('#bottom li').eq(index).addClass('active');
   },function(){
      var itemLi = $(this);
   var index = $('#bottom li').index(itemLi);
   $('#bottom li').eq(index).removeClass('active');
   $('#bottom li').eq(index).find('.brand_focus2').css('display','none');
   })
}

/*
*  要实现透明背景上文字不透明，用了两个div（top3，top4）
*/
//大图片上透明背景，及图片的加载；
var timer1,timer2;
$('#top2').hover(function(){
      if($('#top3').css('bottom')=='0px'){
      clearTimeout(timer2)
      $('#top3').add($('#top4')).css('bottom','0px');
   }else{
         $('#top3').add($('#top4')).animate({bottom:'0px'},200);
   }
   },function(){
      timer1 = setTimeout(function(){
         $('#top3').add($('#top4')).animate({bottom:'-30px'},200);
      },300)
})

$('#top4').hover(function(){
     clearTimeout(timer1);
     $('#top3').add($('#top4')).css('bottom','0px');
},function(){
  timer2 = setTimeout(function(){
    $('#top3').add($('#top4')).animate({bottom:'-30px'},200);
  },300)
})

 

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

iteye_6992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS大作业：商城网站设计——仿天猫购物商城(7页) HTML+CSS+JavaScript
qq_365392777
09-27 1万+
HTML+CSS大作业：商城网站设计——仿天猫购物商城(7页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满
web网页设计期末课程大作业 HTML+CSS+JavaScript仿天猫购物商城设计实例 企业网站制作
weixin__BJ050106的博客
08-14 415
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）
QQ_____365392777的博客
08-15 1098
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）...
qq_365392777
11-06 728
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作...
网页制作成品——仿天猫购物商城设计实例 企业网站制作
12-21 310
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
学生网页作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业_ 网页制作作业_疫情防控网页设计...
qq_524614081的博客
04-23 618
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业: 网页制作作业_疫情防控网页设计… 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 作品介绍 1
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业: 网页制作作业_疫情防控网页设计...
11-10 2267
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业: 网页制作作业_疫情防控网页设计… 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! ????作者
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业_ 网页制作作业_疫情防控网页设计...
11-28 594
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业: 网页制作作业_疫情防控网页设计… 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! ????作者
web前端期末大作业——仿天猫在线商城(9页面) HTML+CSS+JavaScript 网页设计实例 企业网站制作
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-06 6057
web前端期末大作业——仿天猫在线商城(9页面) HTML+CSS+JavaScript 网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末大学生网页设计作
jquery实现的仿天猫侧导航tab切换效果
10-23
主要介绍了jquery实现的仿天猫侧导航tab切换效果,涉及jquery鼠标事件及链式操作实现页面元素样式遍历切换效果的技巧,非常具有实用价值,需要的朋友可以参考下
仿天猫 购物网站 j2ee、ssh、ssm版本一应俱全
04-16
首先声明本资源是 离线包，下载解压缩之后点击 index.html 即可浏览本网站的离线部分，还有一部分增值内容需要登录（一般是教程的详细解说，对于项目的理解有巨大帮助），实战项目里免费的全部的项目源码，但是教程...
JavaScript+CSS实现仿天猫侧边网页菜单效果
11-23
【JavaScript+CSS实现仿天猫侧边网页菜单效果】 在网页设计中，动态的交互效果能够提升用户体验，使得网站更加生动和吸引人。本实例通过JavaScript和CSS技术，讲解如何实现一款仿天猫侧边的网页菜单效果。这个菜单...
jQuery仿天猫左侧导航滚动效果.zip
07-11
总结，实现jQuery仿天猫左侧导航滚动效果，关键在于理解页面滚动事件、元素位置计算、CSS样式切换以及平滑滚动。通过掌握这些技术，你可以创建出更加互动且用户友好的网页。同时，不断优化和适应各种设备，能进一步...
仿天猫商城项目课程设计（附源码）
01-17
在仿天猫商城项目中，设计师可能会参考天猫的UI风格，创建一个易于导航、功能齐全的购物平台。响应式设计确保网站在不同设备上都能良好显示，而性能优化则可能包括减少HTTP请求、压缩资源、缓存利用等策略。 总的来...
chromeforxp.zipchromeforxp.zipchromeforxp.zip
08-04
chromeforxp.zipchromeforxp.zipchromeforxp.zip
shapely-2.0.5-cp311-cp311-win32.whl
最新发布
08-04
shapely-2.0.5-cp311-cp311-win32.whl
[毕业设计]vb+access抽奖系统(系统+论文+开题报告+外文翻译+封面+中英摘要+任务书+中期检查表).zip
08-04
[毕业设计]vb+access抽奖系统(系统+论文+开题报告+外文翻译+封面+中英摘要+任务书+中期检查表)
shapely-2.0.5-cp39-cp39-macosx_10_9_x86_64.whl
08-04
shapely-2.0.5-cp39-cp39-macosx_10_9_x86_64.whl
沙宣天猫超级品牌日：占领年轻时尚市场
"该文档是关于VS（沙宣）品牌参与天猫超级品牌日的营销活动方案，专注于电商、带货和快消零售领域。方案详细介绍了沙宣的品牌历史、消费者画像、产品需求以及市场机遇，旨在提升品牌在线上的渗透率和销售额。" 在9...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值