<!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;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:#000;
}
.twoD{
width:200px;
height:320px;
border:1px solid #000;
margin-left:100px;
overflow:hidden;
padding-top:5px;
padding-bottom:5px;
position:relative; /*解决ie6,7对overflow：hidden的处理*/
}
.imgS, .imgX{
width:500px;
height:150px;
position:relative;
}
.imgX{
border-top:1px dotted #ccc;
}
.imgSZ{
padding-top:30px;
padding-left:20px;
}
.imgSZ li{
padding-top:5px;
}
.imgSY{
position:absolute;
left:120px;
top:0;
}
.productIntro{
display:inline-block;
vertical-align:top;
padding-top:50px;
padding-left:10px;
}
.inline{*display:inline;} /*解决ie6,7不识别display：inline-block*/
.imgSY img{
background-color:#999;
width:150px;
height:150px;
}
</style>
</head>
<body>
<div class="twoD">
<div class="imgS">
<div class="imgSZ">
<h3>标题</h3>
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
</ul>
</div>
<div class="imgSY">
<img src="img5.jpg" />
<div class="productIntro inline">
<h3>产品名称</h3>
<p>产品描述</p>
</div>
</div>
</div>
<div class="imgX">
<div class="imgSZ">
<h3>标题</h3>
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
</ul>
</div>
<div class="imgSY">
<img src="img5.jpg" />
<div class="productIntro inline">
<h3>产品名称</h3>
<p>产品描述</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*
* 仿天猫图片展示效果2
* ie6,7,8，ff，opera中测试可用，其他浏览器未测；
********made by keimon *****************
***********2013-03-06******************
*/
$(function(){
$('.imgSY').hover(function(){
$(this).stop().animate({'left':'-30px'},'slow');
},function(){
$(this).stop().animate({'left':'120px'},'slow');
})
})
</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异步请求，将...
2. **无限循环**：天猫的轮播图通常设置为无限循环，当最后一张图片展示完毕后，会无缝衔接回第一张，给予用户无尽的浏览体验。这需要在JavaScript中精心设计数组索引的处理逻辑。 3. **平滑过渡**：为了提升用户...
1. **响应式设计**：考虑到用户可能通过不同设备访问店铺，仿天猫模板通常会采用响应式布局，确保在手机、平板和电脑等不同屏幕尺寸上都能呈现出良好的视觉效果。 2. **页面结构**：模仿天猫商城的页面结构，包括...
总的来说，"jQuery仿天猫商品品牌图片墙换一批动画特效"是一个结合了前端技术与用户体验设计的实例，它展示了如何利用jQuery库实现动态效果，以及如何通过优化网页视觉效果来提高用户互动性。开发者可以通过学习这个...
在淘宝新旺铺仿天猫商城的模板中，HTML将被用来定义页面布局、导航栏、商品展示区域、购物车功能等关键部分。 2. CSS（层叠样式表）与美化： 虽然标签定义了网页的结构，但为了让页面看起来美观，我们需要CSS来...
9. 图片加载优化：在展示商品图片时，可能会使用 Glide 或 Picasso 图片加载库，实现图片的缓存和加载优化，防止内存泄漏和卡顿。 10. 性能优化：为保证应用流畅运行，开发者可能进行了性能优化，如减少内存占用、...
在仿天猫的案例中，可能包含如`nav.css`这样的文件，用来设定导航栏的背景色、按钮样式、鼠标悬停效果等。 2. **images**：图片文件夹通常包含图标和其他视觉元素，如分类图标、箭头等。这些图标可能是SVG或PNG格式...
"仿东京，天猫，淘宝网商品放大镜效果"是一种常见的交互设计技术，它能够提升用户在浏览商品细节时的体验。这种效果通常会在鼠标悬停在商品图片上时，出现一个放大的预览区域，让用户可以更清晰地查看产品的细节，而...
【标题】"js css3仿天猫品牌图片墙翻转换一换代码"涉及到的是网页开发中的动态效果实现，主要使用了JavaScript（js）和CSS3技术。这个项目旨在模仿天猫网站上的品牌图片墙，其中包含了一个可翻转和切换的图片展示...
在"仿天猫导航下拉分类"的压缩包文件中，可能包含HTML模板、CSS样式表、JavaScript脚本，甚至可能有示例图片或图标资源。开发者可以参考这些文件，结合自己的项目需求进行修改和扩展，以创建一个功能完备且美观的...
快速集成导航栏滑动渐变效果2.完整实现了仿天猫购物商城商品展示界面"正是关注于这两个核心点：导航栏的滑动渐变效果以及商品展示界面的实现。下面我们将详细探讨这两个方面。 首先，我们来看**导航栏滑动渐变效果*...