1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>photos</title>
  6. <meta name="description" content="3D旋转木马图片展示效果代码" />
  7.  
  8. <style type="text/css">
  9. *{margin:0;padding:0;list-style-type:none;}
  10. a,img{border:0;}
  11. body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background-color:#F1F1F1;}
  12. /* wide-wrapper */
  13. #wide-wrapper{background:url(images/bg.jpg) repeat-x;height:600px;}
  14. #header{width:280px;margin:0px auto;padding-top:75px;}
  15. #carousel{width:870px;height:450px;margin:0px auto;padding:0px;}
  16. #carousel{list-style:none;padding:0px;}
  17. #carousel li{float:left;}
  18. #carousel .tooltip, #carousel .bigImage, #carousel .title, #carousel .description{position:absolute;left:-9999px;}
  19. </style>
  20.  
  21. <link rel="stylesheet" type="text/css" href="css/carousel.css" />
  22.  
  23. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  24. <script type="text/javascript" src="js/jquery.carousel.min.js"></script>
  25. <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  26.  
  27. <script type="text/javascript">
  28. $(document).ready(function($){
  29.  
  30.     $('#carousel').carousel({
  31.         width: 870,
  32.         height: 350,
  33.         itemWidth:120,
  34.         horizontalRadius:270,
  35.         verticalRadius:85,
  36.         resize:false,
  37.         mouseScroll:false,
  38.         mouseDrag:true,
  39.         scaleRatio:0.4,
  40.         scrollbar:true,
  41.         tooltip:true,
  42.         mouseWheel:true,
  43.         mouseWheelReverse:true
  44.     });
  45.  
  46. });
  47. </script>
  48.  
  49. </head>
  50.  
  51. <body>
  52.  
  53.     <div id="wide-wrapper">
  54.  
  55.         <div id="header">
  56.             <img src="data:images/a-2.png" width="280" height="50" alt="3d carousel"/>
  57.         </div>
  58.  
  59.         <ul id="carousel">
  60.             <li>
  61.                 <a href="../会电2班.html"><img src="修改好的图片/陈美玲.jpg"/></a>
  62.                 <div class="tooltip">陈美玲</div>
  63.             </li>
  64.             <li><img src="修改好的图片/刘彤彤.jpg" alt=""/>
  65.             <div class="tooltip">刘彤彤</div></li>
  66.             <li><img src="修改好的图片/高丰.png" alt=""/>
  67.             <div class="tooltip">高丰</div></li>
  68.              <li><img src="修改好的图片/韩宝丽.jpg" alt=""/>
  69.             <div class="tooltip">韩宝丽</div></li>
  70.              <li><img src="修改好的图片/韩贵芹.jpg" alt=""/>
  71.             <div class="tooltip">韩贵芹</div></li>
  72.              <li><img src="修改好的图片/侯玉芳.jpg" alt=""/>
  73.             <div class="tooltip">侯玉芳</div></li>
  74.  
  75.               <li><img src="修改好的图片/康议方.jpg" alt=""/>
  76.             <div class="tooltip">康议方</div></li>
  77.             <li>
  78.                 <img src="修改好的图片/郎春华.jpg"alt=""/>
  79.                 <div class="tooltip">郎春华</div>
  80.             </li>
  81.             <li><img src="修改好的图片/李佳真.jpg" alt=""/>
  82.              <div class="tooltip">李佳真</div>
  83.              </li>
  84.              <li><img src="修改好的图片/李宁.jpg" alt=""/>
  85.              <div class="tooltip">李宁</div>
  86.              </li>
  87.              <li><img src="修改好的图片/李苹.jpg" alt=""/>
  88.             <div class="tooltip">李苹</div></li>
  89.             <li><img src="修改好的图片/李雪.jpg" alt=""/>
  90.              <div class="tooltip">李雪</div></li>
  91.  
  92.             <li><img src="修改好的图片/林浩.jpg"alt=""/>
  93.              <div class="tooltip">林浩</div></li>
  94.              <li><img src="修改好的图片/刘美佳.jpg"alt=""/>
  95.              <div class="tooltip">刘美佳</div></li>
  96.              <li><img src="修改好的图片/刘天宝.jpg"alt=""/>
  97.              <div class="tooltip">刘天宝</div></li>
  98.              <li>
  99.                 <img src="修改好的图片/满荞荞.jpg" alt=""/>
  100.                  <div class="tooltip">满荞荞</div>
  101.             </li>
  102.  
  103.             <li>
  104.                 <img src="修改好的图片/乔彭真.jpg" alt=""/>
  105.                  <div class="tooltip">乔彭真</div>
  106.             </li>
  107.              <li><img src="修改好的图片/邱祉聪.jpg" alt=""/>
  108.              <div class="tooltip">邱祉聪</div></li>
  109.             <li><img src="修改好的图片/沈聪.jpg" alt=""/>
  110.              <div class="tooltip">沈聪</div></li>
  111.  
  112.             <li>
  113.                 <img src="修改好的图片/王红.jpg" alt=""/>
  114.                 <div class="tooltip">王红</div>
  115.             </li>
  116.             <li><img src="修改好的图片/王晶晶.jpg" alt=""/>
  117.              <div class="tooltip">王晶晶</div>
  118.              </li>
  119.               <li>
  120.                 <img src="修改好的图片/邢晨.png"alt=""/>
  121.                 <div class="tooltip">邢晨</div>
  122.             </li>
  123.  
  124.             <li>
  125.                 <img src="修改好的图片/徐婷.jpg" alt=""/>
  126.                 <div class="tooltip">徐婷</div>
  127.             </li>
  128.             <li><img src="修改好的图片/许嘉.jpg"alt=""/> <div class="tooltip">许嘉</div></li>
  129.             <li><img src="修改好的图片/于珊珊.jpg" alt=""/>
  130.              <div class="tooltip">于珊珊</div></li>
  131.              <li><img src="修改好的图片/赵杰.jpg" alt=""/>
  132.              <div class="tooltip">赵杰</div></li>
  133.  
  134.             <li><img src="修改好的图片/赵艺丹.jpg"alt=""/>
  135.             <div class="tooltip">赵艺丹</div> </li>
  136.  
  137.         </ul>
  138.     </div>
  139.  
  140. </body>
  141. </html>

3D旋转特效的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  4. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  5. 基于jQuery 3D旋转明星人物展示特效

    分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  7. 3D HTML5 Logo标志 超炫酷旋转特效

    今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...

  8. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  9. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

随机推荐

  1. WebView组件的应用

    1.什么是WebView? WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,它使用了WebKit渲染引擎加载显示网页. <?xml version="1.0" ...

  2. js读取Excel文件数据-IE浏览器

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  3. 浅谈c#接口的问题，适合新手来了解

    这段时间的项目有用到接口,开始不是特别理解接口,只是单单知道接口定义非常简单,甚至觉得这个接口只是多此一举(个人开发的时候).现在开始团队开发,才发现接口原来是这么的重要和便捷! 接下来就来谈谈我这段 ...

  4. Mysql笔记【3】-SQL约束

    SQL 约束 约束用于限制加入表的数据的类型. 可以在创建表时规定约束(通过 CREATE TABLE 语句),或者在表创建之后也可以(通过 ALTER TABLE 语句). 我们将主要探讨以下几种约 ...

  5. Myeclipse配置mybatis的xml自动提示

    关于mapper的xml的文件的自动提示 mapper头: <?xml version="1.0" encoding="UTF-8"?><!D ...

  6. UVA 10795 A Different Task（汉诺塔 递归)）

    A Different Task The (Three peg) Tower of Hanoi problem is a popular one in computer science. Briefl ...

  7. DataTable操作(建表,建行,建列,添加数据)

    public DataTable GetNewTable() { DataTable dt2 = new DataTable("NewDataSet"); //创建一个新Table ...

  8. 一分钟搭建Webpack+react+es6框架

    最近react刷屏的厉害,而随着它一起走进我们视野的还有webpack,webpack只是个工具,为什么如此火呢?因为简单好了不废话.   直接进入正题: 打开命令行工具: npm install - ...

  9. web系列教程之php 与mysql 动态网站 。检索 与更新。

    接着上次WEb 系列开发之php 与mysql动态网站入门. 个人觉得,学习技术就像一棵大树,主干很重要,枝叶其次.对于学习技术,我们应该分清主次关系.怎么学?为什么要学?有一个较好的分寸. 有时候觉 ...

  10. Docker系列

    Docker学习系列(五):Dockerfile文件 什么是Dockerfile? 它是一个名称为Dockerfile的文件 它是一个脚本文件,由一系列命令和参数构成 Dockerfile是自动构建d ...