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</option>
<option value="slideCoverY">slideCoverY</option>
<option value="slideCoverReverseY">slideCoverReverseY</option>
<option value="slideCoverInY">slideCoverInY</option>
<option value="slideCoverOutY">slideCoverOutY</option>
</optgroup>
<optgroup label="封面效果">
<option value="flow">flow</option>
<option value="flowCover">flowCover</option>
<option value="flowCoverReverse">flowCoverReverse</option>
<option value="flowCoverIn">flowCoverIn</option>
<option value="flowCoverOut">flowCoverOut</option>
<option value="flowX">flowX</option>
<option value="flowCoverX">flowCoverX</option>
<option value="flowCoverReverseX">flowCoverReverseX</option>
<option value="flowCoverInX">flowCoverInX</option>
<option value="flowCoverOutX">flowCoverOutX</option>
<option value="flowY">flowY</option>
<option value="flowCoverY">flowCoverY</option>
<option value="flowCoverReverseY">flowCoverReverseY</option>
<option value="flowCoverInY">flowCoverInY</option>
<option value="flowCoverOutY">flowCoverOutY</option>
</optgroup>
<optgroup label="裁切效果">
<option value="slice">slice</option>
<option value="sliceX">sliceX</option>
<option value="sliceY">sliceY</option>
</optgroup>
<optgroup label="缩放效果">
<option value="zoom">zoom</option>
<option value="zoomCover">zoomCover</option>
<option value="zoomCoverReverse">zoomCoverReverse</option>
<option value="zoomCoverIn">zoomCoverIn</option>
<option value="zoomCoverOut">zoomCoverOut</option>
<option value="zoomX">zoomX</option>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0