<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>css3硬件加速滑块 - 网页模板</title>
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- Use Zepto for best performance on WebKit based browser -->
<!-- <script src="js/zepto/zepto.js" type="text/javascript" charset="utf-8"></script> -->
<!-- Use jQuery for best compatibility with other CSS3 enabled browsers -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/flux.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
autoplay: false,
pagination: false
});
// Setup a listener for user requested transitions
$('div#transitions').bind('click', function(event){
event.preventDefault();
// If this is a 3D transform and the browser doesn't support 3D then inform the user
if($(event.target).closest('ul').is('ul#trans3d') && !flux.browser.supports3d)
{
alert("The '"+event.target.innerHTML+"' transition requires a browser that supports 3D transforms");
return;
}
window.f.next(event.target.href.split('#')[1]);
});
});
</script>
</head>
<body id="transitiongallery">
<section class="container">
<div id="slidercontainer">
<div id="slider">
<img src="img/avatar.jpg" alt="" />
<img src="img/ironman.jpg" alt="" />
<img src="img/tron.jpg" alt="" />
<img src="img/greenhornet.jpg" alt="" />
</div>
<div id="transitions">
<h2>2D Transitions</h2>
<ul id="trans2D">
<li><a href="#bars">Bars</a></li>
<li><a href="#zip">Zip</a></li>
<li><a href="#blinds">Blinds</a></li>
<li><a href="#blocks">Blocks</a></li>
<li><a href="#concentric">Concentric</a></li>
<li><a href="#warp">Warp</a></li>
<li><a href="#slide">Slide</a></li>
</ul>
<h2>3D Transitions</h2>
<ul id="trans3d">
<li><a href="#bars3d">Bars3D</a></li>
<li><a href="#cube">Cube</a></li>
<li><a href="#tiles3d" class="new">Tiles3D</a></li>
<li><a href="#blinds3d" class="new">Blinds3D</a></li>
<li><a href="#turn" class="new">Turn</a></li>
</ul>
</div>
</div>
<footer>
<p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。3D特效只支持Firefox浏览器</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</footer>
</section>
</body>
</html>
css3硬件加速滑块.zip
版权申诉
90 浏览量
2022-11-17
21:18:45
上传
评论
收藏 365KB ZIP 举报
css3硬件加速滑块.zip （42个子文件） 
css3硬件加速滑块 
css3硬件加速滑块.jpg 81KB jiaoben643 css 
demo.css 5KB style.css 9KB compass config.rb 302B src style.scss 3KB demo.scss 4KB img avatar.jpg 44KB greenhornet.jpg 52KB tron.jpg 72KB ironman.jpg 60KB
html5.png 2KB
testing.html 2KB index.html 3KB js flux.min.js 27KB flux.js 43KB flux.jquery.js 821B src flux.transitions.blocks.js 1KB flux.transitions.tiles3d.js 2KB flux.transitions.js 6KB flux.transitions.swipe.js 1KB flux.jquery.js 822B flux.transitions.explode.js 2KB flux.transitions.bars3d.js 3KB flux.transitions.slide.js 2KB flux.transitions.dissolve.js 869B flux.slider.js 11KB flux.transitions.cube.js 3KB flux.transitions.turn.js 3KB flux.transitions.concentric.js 2KB flux.browser.js 3KB flux.transitions.blocks2.js 1KB flux.transitions.bars.js 1KB flux.transitions.blinds3d.js 234B flux.transitions.warp.js 217B flux.transitions.blinds.js 619B zepto zepto.min.js 13KB zepto.js 24KB flux.jquery.min.js 642B demo.html 2KB MIT-LICENSE 1KB build build.xml 1KB build 1KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
