2016/1/28 codes(slicebox-3d 图片切换index1.html)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Slicebox-3d 图片切换立体效果</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
<meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
<meta name="author" content="Pedro Botelho for Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
</head>
<body>
<div class="container">
<h1>Slicebox-3d 图片切换立体效果</h1>
<div class="more">
<ul id = "sb-examples">
<li class="selected"><a href="index1.html">效果一</a></li>
<li><a href="index2.html">效果二</a></li>
<li><a href="index3.html">效果三</a></li>
<li><a href="index4.html">效果四</a></li>
</ul>
</div>
<div class="wrapper">
<ul id = "sb-slider" class="sb-slider">
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src = "images/1.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/2.jpg" alt="image2"></a>
<div class="sb-description">
<h3>Honest Entertainer</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/3.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Brave Astronaut</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/4.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Affectionate Decision Maker</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/5.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Faithful Investor</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/6.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Groundbreaking Artist</h3>
</div>
</li>
<li>
<a href="http://www.cnblogs.com/1hb25" target="_blank"><img src="images/7.jpg" alt="image1"></a>
<div class="sb-description">
<h3>Selfless Philantropist</h3>
</div>
</li>
</ul>
<div id = "shadow" class="shadow"></div>
<div id = "nav-arrows" class="nav-arrows">
<a href="#">Next</a>
<a href="#">Previous</a>
</div>
<div id = "nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id = "footer-banner" style="width: 728px;margin: 30px auto"></div>
</div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$(function(){
var page = function(){
var $navArrows = $(‘#nav-arrows‘).hide(),
$navDots = $(‘#nav-dots‘).hide(),
$nav = $navDots.children(‘span‘),
$shadow = $(‘#shadow‘).hide(),
slicebox = $(‘#sb-slider‘).slicebox({
onReady : function(){
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function(pos){
$nav.removeClass(‘nav-dot-current‘);
$nav.eq(pos).addClass(‘nav-dot-current‘);
}
}),
init = function(){
initEvents();
},
initEvents = function(){
$navArrows.children(‘:first‘).on(
‘click‘,function(){
slicebox.next();
return false;
}
);
$navArrows.children(‘:last‘).on(‘click‘,function(){
slicebox.previos();
return false;
});
$nav.each(function(i){
$(this).on(‘click‘,function(event){
var $dots = var $(this);
if(!slicebox.isActive()){
$nav.removeClass(‘nav-dot-current‘);
$dot.addClass(‘nav-dot-current‘);
}
slicebox.jump(i + 1);
return false;
})
});
},
return{init:init};
}();
page.init();
})
</script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
</body>
</html>

时间： 2024-08-04 02:40:17

2016/1/28 codes(slicebox-3d 图片切换index1.html)的相关文章

13种酷炫的html5 3D图片切换代码

jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果 html5 css3 3D动画制作手机界面3D叠加突出动画效果 html5 3D图片网格布局点击图片3D动画弹出大图文字信息 css3 transform属性制作鼠标点击3D图片叠加动画效果 modernizr html5 jquery.windy图片类似纸被风吹走3D

精致3D图片切换效果，最适合企业产品展示

这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效果. 效果演示      源码下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTML5 & JavaS

jquery roundabout幻灯片插件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-

使用 CSS3 动画实现的 3D 图片过渡特效

这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 效果演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 j

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area"> <ul> <li><img src="images/fnfast.jpg"/></li> <li><img src="images/photoshop_plus.jpg"/>&l

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><

Android中使用ImageViewSwitcher实现图片切换轮播导航效果

前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用ViewPager实现屏幕页面切换和页面切换效果 今天我们在换一种实现方式ImageViewSwitcher. ImageSwitcher是Android中控制图片展示效果的一个控件,如:幻灯片效果 ImageSwitcher粗略的理解就是ImageView的选择器. ImageSwitcher的原理:ImageSwi

使用CSS3实现3D图片滑块效果

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像.若浏览器不支持3D变换,一个简单的滑块将作为后备方案.要调用这个插件,首先把图片放在无序列表中

3D动态切换

<html><head>    <title>3D动态切换效果</title>    <!--必须要引用的JS  开始-->    <script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>        <script type="text/javascript"