3D旋转特效
<!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=utf-8" />
<title>photos</title>
<meta name="description" content="3D旋转木马图片展示效果代码" /> <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background-color:#F1F1F1;}
/* wide-wrapper */
#wide-wrapper{background:url(images/bg.jpg) repeat-x;height:600px;}
#header{width:280px;margin:0px auto;padding-top:75px;}
#carousel{width:870px;height:450px;margin:0px auto;padding:0px;}
#carousel{list-style:none;padding:0px;}
#carousel li{float:left;}
#carousel .tooltip, #carousel .bigImage, #carousel .title, #carousel .description{position:absolute;left:-9999px;}
</style> <link rel="stylesheet" type="text/css" href="css/carousel.css" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript">
$(document).ready(function($){ $('#carousel').carousel({
width: 870,
height: 350,
itemWidth:120,
horizontalRadius:270,
verticalRadius:85,
resize:false,
mouseScroll:false,
mouseDrag:true,
scaleRatio:0.4,
scrollbar:true,
tooltip:true,
mouseWheel:true,
mouseWheelReverse:true
}); });
</script> </head> <body> <div id="wide-wrapper"> <div id="header">
<img src="data:images/a-2.png" width="280" height="50" alt="3d carousel"/>
</div> <ul id="carousel">
<li>
<a href="../会电2班.html"><img src="修改好的图片/陈美玲.jpg"/></a>
<div class="tooltip">陈美玲</div>
</li>
<li><img src="修改好的图片/刘彤彤.jpg" alt=""/>
<div class="tooltip">刘彤彤</div></li>
<li><img src="修改好的图片/高丰.png" alt=""/>
<div class="tooltip">高丰</div></li>
<li><img src="修改好的图片/韩宝丽.jpg" alt=""/>
<div class="tooltip">韩宝丽</div></li>
<li><img src="修改好的图片/韩贵芹.jpg" alt=""/>
<div class="tooltip">韩贵芹</div></li>
<li><img src="修改好的图片/侯玉芳.jpg" alt=""/>
<div class="tooltip">侯玉芳</div></li> <li><img src="修改好的图片/康议方.jpg" alt=""/>
<div class="tooltip">康议方</div></li>
<li>
<img src="修改好的图片/郎春华.jpg"alt=""/>
<div class="tooltip">郎春华</div>
</li>
<li><img src="修改好的图片/李佳真.jpg" alt=""/>
<div class="tooltip">李佳真</div>
</li>
<li><img src="修改好的图片/李宁.jpg" alt=""/>
<div class="tooltip">李宁</div>
</li>
<li><img src="修改好的图片/李苹.jpg" alt=""/>
<div class="tooltip">李苹</div></li>
<li><img src="修改好的图片/李雪.jpg" alt=""/>
<div class="tooltip">李雪</div></li> <li><img src="修改好的图片/林浩.jpg"alt=""/>
<div class="tooltip">林浩</div></li>
<li><img src="修改好的图片/刘美佳.jpg"alt=""/>
<div class="tooltip">刘美佳</div></li>
<li><img src="修改好的图片/刘天宝.jpg"alt=""/>
<div class="tooltip">刘天宝</div></li>
<li>
<img src="修改好的图片/满荞荞.jpg" alt=""/>
<div class="tooltip">满荞荞</div>
</li> <li>
<img src="修改好的图片/乔彭真.jpg" alt=""/>
<div class="tooltip">乔彭真</div>
</li>
<li><img src="修改好的图片/邱祉聪.jpg" alt=""/>
<div class="tooltip">邱祉聪</div></li>
<li><img src="修改好的图片/沈聪.jpg" alt=""/>
<div class="tooltip">沈聪</div></li> <li>
<img src="修改好的图片/王红.jpg" alt=""/>
<div class="tooltip">王红</div>
</li>
<li><img src="修改好的图片/王晶晶.jpg" alt=""/>
<div class="tooltip">王晶晶</div>
</li>
<li>
<img src="修改好的图片/邢晨.png"alt=""/>
<div class="tooltip">邢晨</div>
</li> <li>
<img src="修改好的图片/徐婷.jpg" alt=""/>
<div class="tooltip">徐婷</div>
</li>
<li><img src="修改好的图片/许嘉.jpg"alt=""/> <div class="tooltip">许嘉</div></li>
<li><img src="修改好的图片/于珊珊.jpg" alt=""/>
<div class="tooltip">于珊珊</div></li>
<li><img src="修改好的图片/赵杰.jpg" alt=""/>
<div class="tooltip">赵杰</div></li> <li><img src="修改好的图片/赵艺丹.jpg"alt=""/>
<div class="tooltip">赵艺丹</div> </li> </ul>
</div> </body>
</html>
3D旋转特效的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 基于jQuery 3D旋转明星人物展示特效
分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- 3D HTML5 Logo标志 超炫酷旋转特效
今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效,周围小图组 ...
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
随机推荐
- java.lang.NoClassDefFoundError的原因及解决
[O] 安卓应用在低版本(V2.3.6)系统上运行时报错: java.lang.NoClassDefFoundError 完整错误信息如下: 05-29 13:56:13.687: E/Android ...
- u盘的超级用法
转自360 U盘是大家最常用的移动存储设备,不过它的即插即用特性在给我们带来方便同时,也带来了极大的安全隐患.一款没有加密功能的U盘,在借给他人使用或不慎丢失时,其中所保存的资料将很容 ...
- Ubuntu系统的安装
在上一篇博客中,我们已经建立了一个“空白”的虚拟Ubuntu镜像,在这篇博客中,我们将介绍如何安装并进入完整的Ubuntu系统. 写在前面:不同版本的系统在安装过程中,有些操作可能会不同,但是其核心步 ...
- 九度OJ 1455 珍惜现在,感恩生活 -- 动态规划(背包问题)
题目地址:http://ac.jobdu.com/problem.php?pid=1455 题目描述: 为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元, ...
- ubuntu fcitx 安装 使用
系统内置的ibus的86五笔,感觉有些老不太好用, 所以安装试用了一下fcitx下的五笔,记录一下安装方法 ,各种搜索... 我的ubuntn版本: #48-Ubuntu SMP Fri Aug 24 ...
- Docker命令使用详解
其中<>括起来的参数为必选, []括起来为可选 docker -exec -i -t 3f407013d8c0 /bin/bash 进入容器 docker version查看dock ...
- RM-Linux驱动--Watch Dog Timer(看门狗)驱动分析
from:http://blog.csdn.net/geekcome/article/details/6595265 硬件平台:FL2440 内核版本:2.6.28 主机平台:Ubuntu 11,04 ...
- [java bug记录] java.util.zip.ZipException: invalid code lengths set
1. 描述:将代码迁移到maven工程,其中用ZipInputStream读取/src/main/resources下的zip文件时报错:“java.util.zip.ZipException: in ...
- c++与C# winform的消息通讯--(结构体与byte数组的使用)
近期正在做一个蓝牙驱动的使用程序,其中有一块从c++发送数据到C#的部分,网上查了很多资料,大多都是介绍如何通过调用函数获取用户数据.并且在消息发送中,很少介绍如何发送一个结构体,并且结构体里面有 b ...
- VS建立可供外部调用的MFC类DLL,C#调用MFC调用
建立MFC DLL工程.一般选共享MFC库 关键是在你生成的CPP中,添加外部调用的接口 如下,意思是将这个函数对外公开. 如果你希望对外提供类,就把这个方法做成工厂. 如果你希望对外提供MFC的窗体 ...