<!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>
;
相关推荐
在仿天猫商城项目中，设计师可能会参考天猫的UI风格，创建一个易于导航、功能齐全的购物平台。响应式设计确保网站在不同设备上都能良好显示，而性能优化则可能包括减少HTTP请求、压缩资源、缓存利用等策略。 总的来...
完整实现了仿天猫购物商城商品展示界面"正是关注于这两个核心点：导航栏的滑动渐变效果以及商品展示界面的实现。下面我们将详细探讨这两个方面。 首先，我们来看**导航栏滑动渐变效果**。在iOS应用中，导航栏是用户...
在这个项目中，开发者使用CSS来设计页面的颜色、字体、布局、响应式设计等，使得网页在不同设备上都能有良好的展示效果。 3. **JavaScript**：虽然标题中未明确提及JavaScript，但在描述中提到了"电商的生老病死都...
2. **JS效果**：在实现“仿天猫左侧导航菜单分类列表”时，JavaScript（JS）起着关键作用。JS可以创建动态效果，如点击展开/收起分类，悬停高亮，以及滑动加载更多等。这些交互式效果不仅增加了用户体验，还能在不...
在仿天猫商城APP中，CSS3的特性如媒体查询（Media Queries）用于响应式设计，确保在不同尺寸的设备上都能良好展示。此外，过渡（Transitions）、动画（Animations）和渐变（Gradients）等可以增加用户交互的平滑度，...
运行效果展示地址：https://blog.csdn.net/qq_50954361/article/details/128177256 购买后有三天售后服务！！！有非常详细的教程指导大家如何在自己电脑上面运行起来【购买后赠送教程】！！！以下还有内容要展开看~ ...
【仿天猫电商系统】是一个基于JavaWeb技术的电商项目，旨在提供一个类似天猫的在线购物平台，用于教学和学习目的。这个系统集成了多种核心技术，包括Spring框架、Mybatis持久层框架以及MySQL数据库，旨在展示如何...
【标题】"仿天猫商城开发的web项目源码"揭示了这是一个基于Web技术构建的电商平台项目，其设计灵感来源于天猫商城。这样的项目通常涉及到多个关键的技术栈，包括前端用户界面、后端服务处理以及数据库交互。 【描述...
【仿天猫APP前端】是一个基于移动端的项目，旨在模仿天猫应用程序的用户界面和交互体验，为用户提供一个类似的购物平台。这个项目可能包含了安卓应用的源码，因此我们可以深入探讨前端开发、移动应用开发以及天猫APP...
综上所述，实现"android 仿天猫商品详情界面滑动效果"需要掌握Android触摸事件处理、视图动画、布局设计以及性能优化等多方面技能。这是一个挑战性但有趣的任务，能提升开发者在Android UI设计和用户体验方面的专业...
1. **UICollectionView**: 天猫App的列表通常使用UICollectionView来展示商品，因为UICollectionView相比UITableView提供了更强大的自定义布局能力，可以方便地实现复杂的视图排列和交互效果。 2. **自定义...
本文将详细探讨如何使用jQuery实现“仿天猫加入购物车”的动画效果，这是一类常见于电商网站的功能，旨在使用户的购物体验更加生动、有趣。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、...
在实现"仿天猫购物车"的过程中，我们需要关注以下几个关键知识点： 1. **UI设计**：利用Android Studio中的布局设计工具，如XML布局文件，我们可以创建商品详情页面。这通常包括商品图片、名称、价格、描述以及颜色...
在这个名为“ios-仿天猫首页刷新效果 导航栏颜色渐变效果.zip”的压缩包中，包含了一个简单的demo项目——RefreshTest，用于展示如何在iOS应用中实现这一功能。 首先，我们来详细讲解天猫首页刷新效果的实现。这个...
【仿天猫网站程序】是一个基于ASP（Active Server Pages）技术构建的电商网站模板，旨在提供一个与天猫商城类似的用户体验和功能。ASP是一种由微软开发的服务器端脚本环境，用于生成动态网页，允许开发者在服务器端...
在iOS开发中，"表视图仿天猫"项目旨在实现一个与天猫商品列表类似的用户界面。这个项目主要涉及的核心技术是UITableView，这是iOS SDK中用于显示数据列表的标准控件。以下将详细介绍相关知识点： 1. **UITableView*...
【标题】"仿天猫导航列表"是一个网页设计项目，它使用了jQuery库来实现类似天猫网站的导航菜单效果。这个项目旨在提供一个交互性强、视觉吸引力强的网页导航元素，以提升用户体验。通过模仿天猫这样的大型电商平台的...
【标签】：“天猫官网”指的是阿里巴巴集团旗下的在线购物平台，以其丰富的产品种类、完善的购物保障和服务体验著称。“网站模板”则指预设的网页布局和设计，使用者可以根据自己的需要进行修改和应用，以快速构建...
仿天猫模版应该允许商家根据自身品牌特色进行调整，例如更换品牌logo、调整色彩方案、添加自定义模块等。这样既保留了天猫模板的优秀设计，又能展现出自身的品牌形象。同时，模板还应兼容ECShop的各类插件和功能，如...
基于SSM架构的仿天猫商城系统（前后端分离） 基于SSM架构的仿天猫商城系统（前后端分离） 基于SSM架构的仿天猫商城系统（前后端分离） 基于SSM架构的仿天猫商城系统（前后端分离） 基于SSM架构的仿天猫商城系统...