css3特效-传送带示例

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:5284

css3特效
{}
css3特效-传送带示例\r\n\t\t\t\r\n\t\r\n\t\r\n\t\t演示地址在这里! touch.js主要在桌面模拟了手指触摸,滑动,释放等系列事件,值得一看. 源码如下: 1: <!DOCTYPE html>\r\n\r\n 2: <html lang=\en\>\r\n\r\n 3: <head>\r\n\r\n ...

目录

<a id="cb_post_title_url" href="https://www.cnblogs.com/ms_config/archive/2012/09/14/2684385.html">css3特效-传送带示例</a>

<a href="https://dl.dropbox.com/u/20786642/carousel.html">演示地址在这里!</a> 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 <a href="https://www.cnblogs.com/ms_config/">叶子绿</a> 阅读( ...) 评论( ...) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=2684385">编辑</a> <a href="#">收藏</a>

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

原文地址：https://blog.csdn.net/weixin_34354173/article/details/93536521?ops_request_misc=&request_id=7c3a0a7c6c264218995b401c42e60581&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-5-93536521-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/2829961814df4c19a4717227d8a18c40

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复