css3特效-传送带示例

演示地址在这里!

touch.js主要在桌面模拟了手指触摸,滑动,释放等系列事件,值得一看.

源码如下:

   1:  <!DOCTYPE html>

   2:  <html lang="en">

   3:      <head>

   4:          <meta charset="UTF-8" />

   5:          <title>carousel demo</title>

   6:          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

   7:          <script src="https://dl.dropbox.com/u/20786642/touch.js" type="text/javascript"></script>

   8:          <script src="https://dl.dropbox.com/u/20786642/jq.carousel.js" type="text/javascript"></script>

   9:          <style>

  10:              .carousel_paging2 { border-radius: 10px; background: #ccc; width: 10px; height: 10px; float: left; }

  11:              .carousel_paging2_selected {  border-radius: 10px;  width: 10px; height: 10px; float: left; background: #000; }

  12:              .carousel_content { -webkit-transform: translate3d(0, 0, 0); }

  13:              #carousel img {

  14:                  -webkit-transition: all 0.5s ease-in-out;

  15:                  -webkit-transform: scale(1);

  16:                  width: 300px;

  17:                  height: 420px;

  18:              }

  19:          </style>

  20:      </head>

  21:      <body>

  22:          <div id="carousel" style="height:420px; width:300px;margin:auto;   ">

23:

  24:              <div style="background: yellow;">

  25:                  <a href="javascript:alert('test');">

  26:                      I'm a horizontal carousel

  27:                  </a>

  28:              </div>

  29:              <div style="background: green;"></div>

  30:              <div style="background: blue;"></div>

  31:              <div style="background: pink;"></div>

32:

  33:          </div>

  34:          <div id="carousel_dots" style="text-align: center; margin:auto; clear: both; z-index: 200; position:relative;

  35:              top:-50px;  ">

  36:          </div>

  37:          <script>

  38:              //pagingDiv: 分页标志容器

  39:              //pagingCssName: 分页标志容器样式类

  40:              //pagingCssNameSelected: 分页标志选中的样式类.

  41:              //vertical: 是否垂直方向

  42:              //horizontal: 是否横向方向.

  43:              var carousel=$("#carousel").carousel({ pagingDiv: "carousel_dots", pagingCssName: "carousel_paging2", pagingCssNameSelected: "carousel_paging2_selected", preventDefaults:false });

  44:          </script>

  45:      </body>

  46:  </html>

posted on 2012-09-14 09:39 叶子绿阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/ms_config/archive/2012/09/14/2684385.html

css3特效-传送带示例相关推荐

css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
html白云飘动效果特效代码,css3实现简单的白云飘动背景特效代码示例
本篇文章小编给大家分享一下css3实现简单的白云飘动背景特效代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 这是一款非常简单的纯CSS3白云飘 ...
分享8款最新超酷HTML5/CSS3特效及源码
这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效.HTML5焦点图特效.CSS3/HTML5进度条特效等类型,一起来看看吧. 1.CSS3/jQuery全屏立体焦 ...
HTML5七夕情人节表白网页制作【生日蛋糕烟花动画CSS3特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
8款最新超酷HTML5/CSS3特效及源码
这次我们整理了8款最新的HTML5/CSS3特效及源码,这些特效包括HTML5文字特效.HTML5焦点图特效.CSS3/HTML5进度条特效等类型,一起来看看吧. 1.CSS3/jQuery全屏立体焦 ...
html图片动态效果编码,CSS 图片动画特效的示例代码（相框）
本文介绍了CSS 图片动画特效的示例代码(相框),分享给大家,具体如下: 下面是效果图 HTML代码 Rabbit Web Developer CSS代码 /* 初始化 */ body, html { ...
HTML5超炫酷特效【天空中白云飘动CSS3特效】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
24个很酷的 CSS3 文本效果示例及教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.今天这篇文章收集了24个很棒的 CSS3 文本效果示例及教程分享给大家. Text wi ...
CSS3特效之转化（transform）和过渡（transition）
CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

css3特效-传送带示例

css3特效-传送带示例相关推荐

最新文章

热门文章