仿淘宝的一个图片动画效果

原创 2013年12月04日 14:30:23

<!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>
<style>
*{ margin:0; padding:0;}
li,ul{ list-style:none}
img{ border:none;}
.item{float:left; width:162px; padding:0 2px; height:120px; overflow:hidden; margin:200px auto;}
.item .item-t{ height:162px; background:#f00;}
.item .item-b{ height:162px; background:#063;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var changeH=$(".item-t").outerHeight();//变化的高度
$(".itemwrap .item").each(function(index){
$(this).hover(function(){
//mouseenter代码段
$(this).find(".item-t").stop(true).animate({"margin-top":-changeH},300);
},function(){
//mouseleave代码段
$(this).find(".item-t").stop(true).animate({"margin-top":0},300);
});
})   
})
</script>
</head>
<body>
<div class="itemwrap">
<div class="item">
<div class="item-t"></div>
    <div class="item-b"></div>
</div>
<div class="item">
<div class="item-t"></div>
    <div class="item-b"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

Android 仿淘宝商品属性动画

原文链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0422/2773.html 每天在iphone上用淘宝和简书发现...

iOS 仿淘宝加入购物车 向内凹陷折叠动画效果

转自:http://www.jianshu.com/p/1272fed070b7 1. 实现效果: 项目中需要添加一个效果,弹出弹框时,底部控制器向内凹陷,类似淘宝加入购物车动画效果,如下...

Android波浪动态图(仿百度外卖、淘宝app用户界面用到的动画效果)

美化界面的一种手段,总的来说效果还是可以的,网上有很多这种类型的代码,略微修改,可以比较好的应用到各类项目中,以下为公共类代码。 import android.content.Context; i...

iOS开发——仿淘宝添加到购物车的动画效果实现

类似于淘宝一样,我们在写一些购物、订餐之类的app的时候,在用户选择购买或者加入购物车时可以添加一个商品飞到购物车中的动画效果,如下图所示: 实现这个效果还是不算难的,但涉及的问题比较多,还是挺有学习...

iOS 仿淘宝加入购物车前选择尺寸,规格弹窗的向内凹陷折叠动画效果和标签流布局

项目中做了一套电商的购物流程,很多都是照着淘宝做的,之前一直疑惑淘宝的弹框 时,底部的控制器向内凹陷是什么鬼,这动画有点理解不了,一直就放着没有做,这周 末突然在github上看到一个老外...

仿拉勾网动画效果-鼠标进入图片的方向滑动特效

html> html lang="en"> head> meta charset="UTF-8"> title>用jquery判断鼠标划入方向title> script src...

androidの高仿支付宝扫描动画效果

  • 2015年02月03日 17:31
  • 2.05MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿淘宝的一个图片动画效果
举报原因:
原因补充:

(最多只允许输入30个字)