<!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>
*{
margin:0;
padding:0;
}
#outDiv{
width:200px;
height:320px;
border:1px solid #000;
position:relative;
margin-left:10px;
margin-top:10px;
overflow:hidden;
}
ul{
list-style:none;
}
#ul1{
width:600px;
height:320px;
position:absolute;
}
#ul1 li{
float:left;
}
#ul2{
position:absolute;
}
#ul2 li{
position:absolute;
height:30px;
line-height:30px;
width:160px;
left:0px;
cursor:pointer;
}
.li1{
top:180px;
background-color:#ddd;
}
.li2{
top:210px;
background-color:#ccc;
}
.li3{
top:240px;
background-color:#999;
}
#ul2 li em{
position:absolute;
height:30px;
line-height:30px;
width:180px;
left:0px;
display:block;
padding-left:20px;
}
#ul2 li s{
position:absolute;
height:30px;
line-height:30px;
width:180px;
left:0px;
display:block;
padding-left:20px;
}
.active{
background:url(../1.gif) no-repeat 10px;
background-position:140px;
}
</style>
</head>
<body>
<div id="outDiv">
<ul id="ul1">
<li><img src="img1.jpg" /></li>
<li><img src="img2.jpg" /></li>
<li><img src="img3.jpg" /></li>
</ul>
<ul id="ul2">
<li class="li1">
<em>product1</em>
<s></s>
</li>
<li class="li2">
<em>product2</em>
<s></s>
</li>
<li class="li3">
<em>product3</em>
<s></s>
</li>
</ul>
</div>
<script>
/*
* 仿天猫图片展示效果1，
* 图片规格：320*200；
* ie8，ff，opera中测试可用，其余浏览器未测试；
****made by keimon ****2013-01-08****
*/
var outWidth = $('#outDiv').width();
var innerWidth = $('#innerDiv').width();
var liLen = $('#ul2 li').length;
for(var i=0; i<liLen; i++){
$('#ul2 li').mouseover(function(){
var itemEm = this;
var index = $('#ul2 li').index(itemEm);
var left = outWidth * index;
t = setTimeout(function(){
$('#ul2 li').stop().css('width','160px');
$('#ul2 li').eq(index).stop().animate({'width':'200px'},'slow');
$('#ul2 li s').removeClass('active').css('backgroundPosition','140px');
$('#ul2 li s').eq(index).addClass('active').stop().animate({'backgroundPosition':'180px'},'slow');
},100)
t = setTimeout(function(){
$('#ul1').stop().animate({'left':-left+'px'},'slow');
},99)
})
}
</script>
</body>
</html>
分享到：
相关推荐
在这个名为“ios-仿天猫首页刷新效果 导航栏颜色渐变效果.zip”的压缩包中，包含了一个简单的demo项目——RefreshTest，用于展示如何在iOS应用中实现这一功能。 首先，我们来详细讲解天猫首页刷新效果的实现。这个...
在仿天猫商城APP中，CSS3的特性如媒体查询（Media Queries）用于响应式设计，确保在不同尺寸的设备上都能良好展示。此外，过渡（Transitions）、动画（Animations）和渐变（Gradients）等可以增加用户交互的平滑度，...
1. **UICollectionView**: 天猫App的列表通常使用UICollectionView来展示商品，因为UICollectionView相比UITableView提供了更强大的自定义布局能力，可以方便地实现复杂的视图排列和交互效果。 2. **自定义...
在JavaScript（JS）编程中，实现“JS仿天猫banner效果 图片轮播”是一项常见的需求，主要用于网站的首页展示，提升用户体验。天猫作为知名的电商平台，其Banner通常具有精美的动画效果，包括图片的平滑过渡、渐隐渐...
在iOS开发中，"表视图仿天猫"项目旨在实现一个与天猫商品列表类似的用户界面。这个项目主要涉及的核心技术是UITableView，这是iOS SDK中用于显示数据列表的标准控件。以下将详细介绍相关知识点： 1. **UITableView*...
【仿天猫轮播】是一种常见的网页设计技巧，用于在网站上实现类似天猫首页的大图轮播效果，以吸引用户注意力并展示多个重要信息或产品。这个功能通常由JavaScript和CSS结合实现，提供平滑的过渡效果、动态导航箭头、...
"跑马灯效果"则指的是内容在视图边界处无缝滑动，仿佛文字或图片在屏幕边缘消失后又从另一端出现，模拟出一种连续移动的感觉。 在实现这个效果时，我们需要考虑以下几个关键点： 1. **自定义View组件**：通常我们...
"Shopex精仿天猫商城"的主题文件，通常包含HTML、CSS、JavaScript以及图片等资源，用于实现天猫商城的界面风格。这些文件需要被上传到Shopex安装目录下的`theme`子目录中，替换原有的主题，从而改变商城的显示效果。...
总之，【jQuery仿天猫列表】是一个综合性的前端开发实例，它展示了如何运用现代Web技术构建一个功能丰富、用户体验良好的电商网站导航系统。开发者可以从中学到jQuery的实战技巧、响应式布局的实现方法，以及如何...
为了实现天猫那样的视觉效果，我们可以利用jQuery的动画方法，如`fadeIn`、`fadeOut`、`slideToggle`等，为添加商品到购物车的过程添加动态效果。 五、Ajax交互 在实际应用中，我们可能还需要通过Ajax异步请求，将...
1. **响应式设计**：考虑到用户可能通过不同设备访问店铺，仿天猫模板通常会采用响应式布局，确保在手机、平板和电脑等不同屏幕尺寸上都能呈现出良好的视觉效果。 2. **页面结构**：模仿天猫商城的页面结构，包括...
2. **无限循环**：天猫的轮播图通常设置为无限循环，当最后一张图片展示完毕后，会无缝衔接回第一张，给予用户无尽的浏览体验。这需要在JavaScript中精心设计数组索引的处理逻辑。 3. **平滑过渡**：为了提升用户...
总的来说，"jQuery仿天猫商品品牌图片墙换一批动画特效"是一个结合了前端技术与用户体验设计的实例，它展示了如何利用jQuery库实现动态效果，以及如何通过优化网页视觉效果来提高用户互动性。开发者可以通过学习这个...
在淘宝新旺铺仿天猫商城的模板中，HTML将被用来定义页面布局、导航栏、商品展示区域、购物车功能等关键部分。 2. CSS（层叠样式表）与美化： 虽然标签定义了网页的结构，但为了让页面看起来美观，我们需要CSS来...
9. 图片加载优化：在展示商品图片时，可能会使用 Glide 或 Picasso 图片加载库，实现图片的缓存和加载优化，防止内存泄漏和卡顿。 10. 性能优化：为保证应用流畅运行，开发者可能进行了性能优化，如减少内存占用、...
【标题】"js css3仿天猫品牌图片墙翻转换一换代码"涉及到的是网页开发中的动态效果实现，主要使用了JavaScript（js）和CSS3技术。这个项目旨在模仿天猫网站上的品牌图片墙，其中包含了一个可翻转和切换的图片展示...
在仿天猫的案例中，可能包含如`nav.css`这样的文件，用来设定导航栏的背景色、按钮样式、鼠标悬停效果等。 2. **images**：图片文件夹通常包含图标和其他视觉元素，如分类图标、箭头等。这些图标可能是SVG或PNG格式...
【标签】"仿天猫"表明该项目的重点在于模仿天猫网站的布局、功能和用户体验，包括但不限于商品展示、分类导航、搜索功能、购物车、订单处理、用户登录注册等。这为学习者提供了实践电子商务网站开发的实战案例。 ...
在"仿天猫导航下拉分类"的压缩包文件中，可能包含HTML模板、CSS样式表、JavaScript脚本，甚至可能有示例图片或图标资源。开发者可以参考这些文件，结合自己的项目需求进行修改和扩展，以创建一个功能完备且美观的...
"仿东京，天猫，淘宝网商品放大镜效果"是一种常见的交互设计技术，它能够提升用户在浏览商品细节时的体验。这种效果通常会在鼠标悬停在商品图片上时，出现一个放大的预览区域，让用户可以更清晰地查看产品的细节，而...