帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» CSS3旋转翻页特效
CSS3旋转翻页特效
浏览:617次
-
评论:0次
-
发布时间:2017-03-20
Html
Css
Js
html,body { background-color:#232323; } #wrap { width:500px; height:300px; margin:10px auto; padding:10px; border-radius:5px; box-shadow:0 0 5px #000; position:relative; } #wrap .pic { width:500px; height:300px; perspective:800px; } #wrap .pic ul { width:500px; height:300px; position:absolute; transform-style:preserve-3d; z-index:-1; } #wrap .pic ul.now { z-index:2; } #wrap .pic ul.next { z-index:1; } #wrap .pic ul li { list-style:none; position:absolute; transform:translate(0px,0px) rotateX(0deg); border:1px solid transparent; background-origin:border-box; opacity:1; } #wrap .pic ul li.on { transform:translate(-50px,-50px) rotateX(720deg); border:1px solid #000; opacity:0; } #wrap .pic ul li.move { transition:1.5s transform,1.5s opacity; } #wrap .pic ul li.last { transform:translate(0px,0px) rotateX(0deg); border:1px solid transparent; opacity:1; } #wrap .pic .ul1 li { background-image:url("http://www.sucainiu.com/themes/images/demo/500x300.png"); } #wrap .pic .ul2 li { background-image:url("http://www.sucainiu.com/themes/images/demo/500x300.png"); } #wrap .pic .ul3 li { background-image:url("http://www.sucainiu.com/themes/images/demo/500x300.png"); } #wrap .pic .ul4 li { background-image:url("http://www.sucainiu.com/themes/images/demo/500x300.png"); } #wrap .pic .ul5 li { background-image:url("http://www.sucainiu.com/themes/images/demo/500x300.png"); } #wrap .btn div { width:40px; height:69px; position:absolute; top:50%; margin-top:-35px; background-image:url("http://www.sucainiu.com/upload/image/20170320/6ec14e19adece44eb32e596fbacfd26d_20170320150822.png"); cursor:pointer; } #wrap .btn div#left { left:15px; background-position:0px 0px; } #wrap .btn div#right { right:15px; background-position:-42px 0px; }
$(function() { fn(10, 7); function fn(numX, numY) { var $ul = $('.pic ul'); var $btn = $('.btn div'); var ulW = $ul.width(), ulH = $ul.height(); var $li; var liW = ulW / numX, liH = ulH / numY; var ulIndex = 1; var onOff = true; $ul.each(function() { var s = ''; for (var i = 0; i < numX * numY; i++) { s += '
' } $(this).append(s); }); $li = $('.pic ul li'); $li.each(function(i) { i %= numX * numY; var iX = i % numX; var iY = parseInt(i / numX); this.x = iX; this.y = iY; $(this).css({ width: liW - 2 + 'px', height: liH - 2 + 'px', backgroundPosition: ( - liW * iX) + 'px ' + ( - liH * iY) + 'px', left: liW * iX + 'px', top: liH * iY + 'px' }); }); $btn.click(function() { if (onOff) { onOff = !onOff; var index = $(this).index(); var $ulLi; if (index) { zIndexNext(); var sum = numX + numY - 2; $ulLi = $ul.eq(ulIndex).find('li'); ulIndex++; var timer = setInterval(function() { $ulLi.each(function() { if (this.x + this.y == sum) { $(this).removeClass('last move').addClass('on move'); } }); sum--; if (sum < 0) { clearInterval(timer); setTimeout(function() { onOff = !onOff; if (ulIndex == $ul.length - 1) { $li.removeClass('on last move'); $ul.removeClass('next now'); $ul.eq(1).addClass('next'); ulIndex = 1; } }, 1500); } }, 50); } else { zIndexLast(); ulIndex--; $ulLi = $ul.eq(ulIndex).find('li'); $ulLi.removeClass('move').addClass('on'); var sum = 0; var timer = setInterval(function() { $ulLi.each(function() { if (this.x + this.y == sum) { $(this).addClass('last move'); } }); sum++; if (sum > numX + numY - 2) { clearInterval(timer); setTimeout(function() { onOff = !onOff; if (ulIndex == 0) { $li.removeClass('on last'); $ul.removeClass('next now'); $ul.eq($ul.length - 2).addClass('next'); ulIndex = $ul.length - 2; } }, 1500); } }, 50); } } }); function zIndexNext() { var i = ulIndex + 1; $ul.eq(ulIndex).addClass('now').siblings().removeClass('now'); $ul.eq(i).addClass('next').siblings().removeClass('next'); } function zIndexLast() { var i = ulIndex - 1; $ul.eq(ulIndex).addClass('next').siblings().removeClass('next'); $ul.eq(i).addClass('now').siblings().removeClass('now'); } } });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.9.1
<!doctype html><html><head><meta charset="utf-8"><title>CSS3旋转翻页特效-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery CSS3旋转翻页特效
纯css3鼠标经过显示边框弹出
复制文字追加网站来源
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
617
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值