`
keimon
  • 浏览: 74790 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

仿一淘今日价格幅度动画

阅读更多




 
 

 

<!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" />
<script src="jquery-1.8.3.js"></script>
<style>
*{
  margin:0;
  padding:0;
}
#out_div{
  margin-top:50px;
  margin-left:50px;
  position: relative;
  height:304px;
  width:214px;
}
#up{
  position:relative;
  border:1px solid red;
  height:150px;
  width:214px;
  overflow:hidden;
}
#up1{
  background-image:url(arrow1.png);
  background-position:0 0;
  background-repeat:no-repeat;
  background-color:#3c3;
  position:absolute;
  height:150px;
  width:214px;
}
#down{
  margin-top:5px;
  position:relative;
  height:150px;
  width:214px;
  border:1px solid red;
  overflow:hidden;
}
#down1{
  background-image:url(arrow1.png);
  background-color:#f90;
  background-position:0 -155px;
  background-repeat:no-repeat;
  position:absolute;
  height:150px;
  width:214px;
}
#price_word{
  font-size:28px;
}
#price_num{
  font-size:28px;
  color:#3C3;
}
#price_num b{
  font-size:58px;
}
#up_word{
  padding-top:40px;
}
#down_num{
  padding-top:20px;
}
#up_word,#down_word,#up_num, #down_num{
  font-size:20px;
  color:#fff;
  text-align:center;
}
#up_num b, #down_num b{
   font-size:48px;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div id="out_div">
   <div id="price_word">今日价格幅度</div>
   <div id="price_num">降<b>1.31%</b></div>
   <div id="up">
      <div id="up1">
         <div id="up_word">
      平均涨幅
      </div>
      <div id="up_num">
      <b>24</b>.19%
      </div>
   </div>
   </div>
   <div id="down">
      <div id="down1">
         <div id="down_num">
      <b>20</b>.18%
      </div>
      <div id="down_word">
      平均降幅
      </div>
   </div>
   </div>
</div>
<script>

/*
*  仿一淘今日价格幅度动画;
*  ie8,ff,opera中可用,其他浏览器未测;
*  *********made by keimon************
*  **********2013-01-16***********
*/
$(window).load(function(){
   $('#up1').css('bottom','-150px').animate({'bottom':'0'},1000);
   $('#down1').css('top','-150px').animate({'top':'0'},1000);
})
</script>
</body>
</html>

  • 大小: 3 KB
  • 大小: 6 KB
0
4
分享到:
评论

相关推荐

    仿一淘网.zip

    "仿一淘网.zip"是一个压缩包文件,其主要目的是为了提供一个类似一淘网的网站模板或示例。一淘网是中国知名的电子商务平台,它整合了淘宝、天猫等众多购物资源,提供比价、搜索、优惠券等功能,旨在为用户提供便捷的...

    仿一淘多页面购物网

    在构建“仿一淘多页面购物网”时,我们需要运用多种技术来实现其核心功能,如用户登录、注册、购物车管理和下单流程。这个项目主要依赖JavaScript作为客户端的主要编程语言,因此JavaScript的知识点在此项目中至关...

    Android仿一淘比价客户端完整源码

    《Android仿一淘比价客户端完整源码解析》 在移动开发领域,Android平台因其开源性和灵活性,成为了众多开发者首选的开发环境。本篇将详细解析一款名为“Android仿一淘比价客户端”的完整源码,它是一个商业级别的...

    一淘Etao数据采集FEED插件

    一淘API是一淘开放平台提供的接口服务,允许开发者通过编程方式获取一淘网上的商品信息、价格变动、促销活动等数据。这些API通常包括搜索API、商品详情API、店铺信息API等,使得开发者能够构建自己的数据分析应用...

    仿淘宝网源代码

    【仿淘宝网源代码】是一个基于Java Web技术的项目,主要使用了JSP(JavaServer Pages)语言来构建一个类似于淘宝网的在线购物平台。该项目的实现采用了MVC(Model-View-Controller)架构,这是一种广泛应用在Web开发...

    一淘开放搜索商家商品接入指南 API接口

    ### 一淘开放搜索商家商品接入指南 API接口 #### 1. 引言 随着互联网电商行业的迅猛发展,各类电商平台为了提升用户体验、增加商品多样性,纷纷开放了平台接口供第三方商家接入。一淘开放搜索平台作为阿里巴巴集团...

    一淘自动抽红包工具V1.0中文绿色免费版

    《一淘自动抽红包工具V1.0:自动化与系统工具的应用解析》 一淘自动抽红包工具V1.0是一款专为用户设计的高效、便捷的系统工具,旨在简化网络购物过程中领取红包的繁琐步骤,提高用户在一淘平台上的购物体验。这款...

    shopex 一淘提交接口

    [使用说明] 【MYSQL】在数据库建立update_time表 具体表结构 update_id int(10) up_time int(10) 不需要索引 1.在你的网站根目录建立个open,再在里面建一个taobao文件夹(我只是建议,把对外的数据都分类用在...

    一淘网软件测试报告.pdf

    2. 一淘网作为被测试对象的背景介绍。 3. 测试的时间、参与者、环境和工具。 4. 测试方法的实施与测试用例的设计。 5. 测试结果的记录与缺陷分析。 6. 性能数据的解读与分析。 7. 对软件质量的总结性评价与改进建议...

    一淘工具 手机

    一淘工具 手机 手机 安卓 好用的安卓软件

    亿推推微信分销系统商业版 实现全网分销:PC分销+微信分销+微博分销+一淘分销+CPS分销

    亿推推微信分销系统商业版是一款综合性的网络分销解决方案,旨在帮助企业实现全方位的销售渠道拓展,覆盖PC端、微信端、微博端、一淘平台以及CPS(Cost Per Sale)模式的分销。这款系统的核心目标是通过多渠道分销,...

    一淘feed编辑指南

    ### 一淘Feed编辑指南知识点解析 #### 一、引言 一淘开放搜索平台作为阿里巴巴集团旗下的一个重要组成部分,旨在帮助商家将其商品信息更高效地展示给潜在消费者。为了实现这一目标,一淘开放搜索制定了详细的商家...

    一淘优惠打折购物助手Chrome插件下载

    非常好用,所有优惠信息全都有,只要下载下来鼠标拖到chrome浏览器上就自动安装了,很方便 想购物,先一淘。一淘网-最专业的购物搜索,提供互联网最新最...提供同类商品在不同商家的价格比较,让您购得精明,购得实惠。

    ecshop一淘收录插件

    标题中的“ecshop一淘收录插件”是指针对ECSHOP电子商务平台开发的一款插件,主要用于提升网站在阿里巴巴集团旗下的一淘搜索引擎中的收录效果。ECSHOP是一款开源的网上商城系统,广泛应用于中小企业和个人商家,它...

    解读一淘网(etao)首页响应式兼容ie6~ie8实现方法

    在本文中,我们将探讨如何在一淘网(etao)的首页实现对IE6到IE8的响应式兼容,以及在这个过程中涉及到的关键技术。 在旧版本的Internet Explorer(尤其是IE6、IE7和IE8)中,浏览器并不支持CSS3的媒体查询,这是...

    一淘网让谁睡不着!.docx

    一淘网,作为阿里巴巴集团旗下的比价搜索引擎,其诞生初衷是为了提供给消费者便捷的购物体验,使得用户在选购商品时无需频繁浏览多个电商平台,只需在一站式的平台上对比各大网站的价格,从而快速决策。马云曾表示,...

    针对一淘的竞争策略研究.pdf

    一旦一淘发展壮大,可能会导致京东的客户流失或流量入口受控,加剧电商行业内的价格竞争。 面对一淘的竞争压力,京东需要采取应对策略。报告建议京东高调表明拒绝与一淘合作,并实施“远交近攻、资源整合”的策略,...

    一淘网案例分析.pdf

    【一淘网基本情况】 一淘网,成立于2010年10月9日,是阿里巴巴集团旗下的一个重要组成部分,最初从淘宝网分离出来,成为独立的公司。它的主要功能是作为一个购物搜索引擎,提供一站式的购物服务。一淘网旨在使购物...

    Android- cube-sdk一淘推出的开发框架.zip

    《Android Cube SDK:一淘开发框架深度解析》 在Android应用开发领域,高效且易于集成的SDK往往能为开发者带来极大的便利。一淘推出的cube-sdk就是这样一个专为Android设计的开发框架,它旨在简化复杂的业务逻辑,...

    产品体验报告 ︳一淘产品定位及商业模式的竞争力分析(中).pdf

    在一淘中,返利与优惠券结合,为用户提供大幅度的折扣,同时也有助于品牌推广和市场管理。 - **返利平台的盈利模式**:一淘与商家签订协议,商家支付广告费,而一淘则通过追踪用户的购物行为,按照交易金额抽取广告...

Global site tag (gtag.js) - Google Analytics