jquery css3图片翻转3D动画切换特效代码下载，支持多种动画特效jQuery幻灯片，jquery图片3d翻转效果，jquery3D图片切换演示，css3 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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>jquery css3图片翻转3D动画切换特效 - bokequ.com</title>
<link rel="stylesheet" type="text/css" href="http://www.bokequ.com/show/demo1/css/default.css">
<link rel="stylesheet" href="http://www.bokequ.com/show/demo1/css/styles.css">
<!--必要样式-->
<link rel="stylesheet" href="http://www.bokequ.com/show/demo1/css/jcslider.css">
<link rel="stylesheet" href="http://www.bokequ.com/show/demo1/css/animate.min.css">
</head>
<body>
<div class="htmleaf-container">
<main>
<section class="example">
<h2>示例演示1:</h2>
<!-- Slider start -->
<ul class="jc-slider">
<li class="jc-animation">
<div class="wrap">
天行九歌卫庄高清壁纸图/天行九歌卫庄超清壁纸
</div>
</li>
<li class="jc-animation">
<div class="wrap">
每盏灯光下都有照不亮的黑影。越繁华的城市越像一座丛林，潮湿*暗的角落里充满了危险的猛兽，随时准备撕碎无辜弱小的猎物，捕食留下一道道血迹，像满脸皱纹看着城市衰老。雨丝中带着熟悉的血腥，这才是属于夜晚的气味。有些人天生就属于深夜，今晚会有人死去，一如既往。
</div>
</li>
<li class="jc-animation">
<div class="wrap">
有的人在浅摊上只能说等死，而有的人确实在等待水落石出，水太深的地方会掩藏太多的真相，只有等潮水退去，才能看清楚那些不为人知的杂草和暗礁。
</div>
</li>
</ul>
<!-- Slider end -->
<h2>示例演示 2:</h2>
<!-- Slider start -->
<ul class="jc-slider2">
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1foxiagy1k9j31hc0u04qr.jpg" alt="1">
</li>
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1g4fyvr19frj31hc0u0kjm.jpg" alt="2">
</li>
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1fpdoeds0bcj31hc0u0u0x.jpg" alt="3">
</li>
</ul>
<!-- Slider end -->
<h2>示例演示 3:</h2>
<!-- Slider start -->
<ul class="jc-slider3">
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xly1fzpjjcbzqhj30q80eoq4z.jpg" alt="1">
</li>
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1g3sb1se1azj31hc0u0adz.jpg" alt="2">
</li>
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1fmolsstgvnj31hc0u04qq.jpg" alt="3">
</li>
</ul>
<!-- Slider end -->
<h2>示例演示 4:</h2>
<!-- Slider start -->
<ul class="jc-slider4">
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1fgbgsbike2j31hc0u079c.jpg" alt="1">
</li>
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1fhpa354gvjj31hc0u0kjl.jpg" alt="2">
</li>
<li class="jc-animation">
<img src="http://img.bokequ.com/dongman/005XKz6xgy1fijefqph3pj31kw1vqaox.jpg" alt="3">
</li>
</ul>
<!-- Slider end -->
</section>
</main>
</div>
<script src="http://www.bokequ.com/show/demo1/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.bokequ.com/show/demo1/js/jquery.jcslider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.jc-slider').jcSlider({
animationIn: 'bounceInRight',
animationOut: 'bounceOutLeft',
stopOnHover: false
});
$('.jc-slider2').jcSlider({
animationIn: 'zoomInUp',
animationOut: 'flipOutX',
stopOnHover: false
});
$('.jc-slider3').jcSlider({
animationIn: 'flipInX',
animationOut: 'shake',
stopOnHover: false
});
$('.jc-slider4').jcSlider({
animationIn: 'zoomIn',
animationOut: 'zoomOut',
stopOnHover: false
});
});
</script>
</body>
</html>
多种动画特效jQuery幻灯片网页演示地址jquery图片3d翻转效果
评论