pageSwitch实现121种页面滚动过渡切换动画效果代码
代码语言:html
所属分类:布局界面
代码描述:pageSwitch实现121种页面滚动过渡切换动画效果代码
代码标签: pageSwitch 页面 过渡 动画 滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" /> <style type="text/css"> body,div{margin:0;padding:0;} html,body{height:100%;background:black;} /*body{background:#379EB6;}*/ #wrap{min-height:100%;height:100%;min-width:268px;overflow:hidden;} #imgs{position:relative;width:320px;height:268px;margin:0 auto;overflow:hidden;border-radius:15px;top:50px;z-index:1;} #imgs.visible{overflow:visible;} #imgs div{overflow:hidden;} #imgs img{width:100%;height:100%;display:block;} #tssel{position:absolute;top:330px;left:50%;z-index:10;width:160px;margin-left:-80px;} #navs{z-index:10;position:absolute;left:50%;top:145px;margin-left:180px;width:4px;} #navs a{overflow:hidden;display:block;width:2px;height:20px;border:1px solid #fff;margin:0 0 4px;transition:background 600ms ease;} #navs .active{background:#fff;} </style> </head> <body> <div id="wrap"> <div id="imgs"> <div><img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png" /></div> <div><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" /></div> <div><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png" /></div> </div> <div id="navs"> <a href="javascript:;" class="active"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <select id="tssel"> <option value="">选择切页效果</option> <option value="fade">fade</option> <optgroup label="滚动效果"> <option value="scroll">scroll</option> <option value="scroll3d">scroll3d</option> <option value="scrollCover">scrollCover</option> <option value="scrollCoverReverse">scrollCoverReverse</option> <option value="scrollCoverIn">scrollCoverIn</option> <option value="scrollCoverOut">scrollCoverOut</option> <option value="scrollX">scrollX</option> <option value="scroll3dX">scroll3dX</option> <option value="scrollCoverX">scrollCoverX</option> <option value="scrollCoverReverseX">scrollCoverReverseX</option> <option value="scrollCoverInX">scrollCoverInX</option> <option value="scrollCoverOutX">scrollCoverOutX</option> <option value="scrollY">scrollY</option> <option value="scroll3dY">scroll3dY</option> <option value="scrollCoverY">scrollCoverY</option> <option value="scrollCoverReverseY">scrollCoverReverseY</option> <option value="scrollCoverInY">scrollCoverInY</option> <option value="scrollCoverOutY">scrollCoverOutY</option> </optgroup> <optgroup label="滑动效果"> <option value="slide">slide</option> <option value="slideCover">slideCover</option> <option value="slideCoverReverse">slideCoverReverse</option> <option value="slideCoverIn">slideCoverIn</option> <option value="slideCoverOut">slideCoverOut</option> <option value="slideX">slideX</option> <option value="slideCoverX">slideCoverX</option> <option value="slideCoverReverseX">slideCoverReverseX</option> <option value="slideCoverInX">slideCoverInX</option> <option value="slideCoverOutX">slideCoverOutX</option> <option value="slideY">slideY</optio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0