JS三教九流系列-swiper.js-搭建微信、手機端全屏廣告效果
swiper.js http://www.swiper.com.cn/ 官方網站，下載的類庫和要用那些api咱們都需在這裏查找javascript
http://www.swiper.com.cn/demo/senior/index.html各類效果，咱們要作的就是這種css
咱們簡單發現，就是每一屛會出現動畫（css3 animation），切換的當前屏會從新執行動畫，可推出，沒顯示的屏刪除了動畫html
看咱們發現了什麼？看第一張firebug截圖java
每一屛就是一個section標籤， 在當前顯示的section上有了其餘兄弟沒有的 swiper-slide-active類名jquery
再看當前顯示的section下的子標籤經過這個swiper-slide-active 類添加了什麼，截圖css3
看右側，發現了，section有swiper-slide-active 類名下的元素添加了animation動畫處理api
咱們已經能夠得出原理了css3動畫
當前顯示的那一屏，就是那個section標籤有一個swiper-slide-active 類名app
有了swiper-slide-active 類名，他下面的子元素會添加css3動畫效果（動畫css樣式）ide
咱們的動畫樣式就是掛在在swiper-slide-active下面的，經過添加刪除這個類名，實現下面元素動畫的有無（當前那一屏動畫的有無）
咱們總結以下
初始
<section class="swiper-slide-active">第一屏</section> 帶有類名 swiper-slide-active，因此下面的元素有了動畫效果
<section>第二屏</section>
<section>第三屏</section>
滑動到下一屏
<section>第一屏</section> 刪除類名swiper-slide-active
<section class="swiper-slide-active">第二屏</section> 帶有類名 swiper-slide-active，因此下面的元素有了動畫效果
<section>第三屏</section> 刪除類名swiper-slide-active
咱們先來最簡單的例子，最後在套用這個swiper插件
作一個帶動畫顯示內容的tab切換效果，下面是代碼，加載好jquery，複製粘貼查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<style>
/* yu she */
*{ margin:0; padding:0;}
a{ text-decoration:none;}
img{ border:none;}
ul{ list-style:none;}
body{ color:#222121; font-size:15px; font-family:"宋體"; background-color:#fefefe}
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
/*clear*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.wrapper{margin:0 auto;width:1000px;}
/*=========main========*/
.demo{ width:350px; margin:20px; float:left;}
.tab-list1{ height:40px; line-height:40px;}
.tab-list1 span{ color:#0CC; margin:0 10px; cursor:pointer;}
.tab-list1 span:hover{color:#F33;}
.tab-list1 span.adstyle1{ color:#F33;}
.tab-con1{ width:300px; height:300px; background:#CC9; position:relative;}
.tab-con1 div{position:absolute; left:150px; top:150px;transition:all .6s ease-in .2s; opacity:0; width:0px; height:0px; overflow:hidden;}
.tab-con1 div.addss1{opacity:1; left:0px; top:0px; width:300px; height:300px;}
</style>
</head>
<body>
<div class="demo">
<div class="tab-list1">
<span class="adstyle1">第一個</span>
<span>第二個</span>
<span>第三個</span>
</div>
<div class="tab-con1">
<div class="addss1">1111111
* @param str 檢驗的內容
* @param cType 預設的檢驗規則 字符串</div>
<div>222222222
* @param str 檢驗的內容
* @param cType 預設的檢驗規則 字符串</div>
<div>3333333
* @param str 檢驗的內容
* @param cType 預設的檢驗規則 字符串</div>
</div>
</div>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tab-list1").children().click(function(){
$(this).addClass("adstyle1").siblings().removeClass("adstyle1");
$(".tab-con1").children().eq($(this).index()).addClass("addss1").siblings().removeClass("addss1");
});
});
</script>
</html>
看見效果了吧！每次切換到對象顯示內容，內容是動畫出現的，核心js處理
$(".tab-con1").children().eq($(this).index()).addClass("addss1").siblings().removeClass("addss1");
});
切換顯示的內容會添加類名 addss2（這個做用就是那個active類名做用），在這個類名下會加載動畫樣式，
根據原理咱們作了這種切換動畫的最簡單實現
下面咱們拿出一套swiper全屏模板，代碼以下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes, minimum-scale=1.0, maximum-scale=1.5" id="viewport" />
<title>Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<style>
/* Demo Styles */
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 0px 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #06F;
}
#wipeprev{ position: absolute;
z-index: 20;
left: 50%;
top: 30px;
width:20px; height:80px; margin-left:-10px; background:#999;}
#swipernext{position: absolute;
z-index: 20;
left: 50%;
bottom: 30px;
width:20px; height:80px; margin-left:-10px; background:#999;}
/*main*/
.ping1{ background:#FC6;}
.ping2{ background:#C6C;}
.ping3{ background:#0CF;}
.ping1 p,ping2 p,ping3 p{ font-size:15px; text-align:center;}
</style>
</head>
<body>
<div>
<div>
<div class="swiper-slide ping1">
<p>第一屏</p>
</div>
<div class="swiper-slide ping2">
<p>第二屏</p>
</div>
<div class="swiper-slide ping3">
<p>第三屏</p>
</div>
</div>
<div></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
mode: 'vertical',
//loop: true,
pagination: '.pagination',
paginationClickable: true,
resistance: false,
speed: 0.1,
onSlideChangeEnd : function(swiper){ //mySwiper.activeLoopIndex
//mySwiper.activeIndex==0){
}
});
</script>
</body>
</html>
swiper不是基於jq的，無關緊要，swiper的css文件和js文件是插件必須的，調用插件代碼以下（有一篇博文介紹了插件開發）
var mySwiper = new Swiper('.swiper-container',{
mode: 'vertical',
//loop: true,
pagination: '.pagination',
paginationClickable: true,
resistance: false,
speed: 0.1,
onSlideChangeEnd : function(swiper){ //mySwiper.activeLoopIndex
//mySwiper.activeIndex==0){
}
});
那些解釋能夠去api查看，onSlideChangeEnd是滑動結束事件，裏面咱們能夠作回調處理，沒有事件沒麼聯繫後臺
咱們firebug發現，原理同分析同樣，當前屏會添加一個 swiper-slide-active 類名
咱們把動畫css都寫在插件提供的切換類名下就行了，相比tab切換實例去本身設置active簡潔多了
咱們在<div class="swiper-slide ping2"> 下添加子結構，提供動畫源，在style添加基於swiper-slide-active的動畫css樣式
修改後代碼以下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes, minimum-scale=1.0, maximum-scale=1.5" id="viewport" />
<title>Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<style>
/* Demo Styles */
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 0px 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #06F;
}
#wipeprev{ position: absolute;
z-index: 20;
left: 50%;
top: 30px;
width:20px; height:80px; margin-left:-10px; background:#999;}
#swipernext{position: absolute;
z-index: 20;
left: 50%;
bottom: 30px;
width:20px; height:80px; margin-left:-10px; background:#999;}
/*main*/
.ping1{ background:#FC6;}
.ping2{ background:#C6C;}
.ping3{ background:#0CF;}
.ping1 p,ping2 p,ping3 p{ font-size:15px; text-align:center;}
.base1{ height:200px; width:200px; margin:100px; background:#FFF; border-radius:100px;}
.base2{height:200px; width:200px; margin:100px; background:#FFF; border-radius:100px;}
.base3{height:200px; width:200px; margin:100px; background:#FFF; border-radius:100px;}
.swiper-slide-active .ani1{animation:do1 1s ease-in forwards infinite;}
@keyframes do1{
0%{transform:scale(1);}
100%{transform:scale(1.5);}
}
.swiper-slide-active .ani2{animation:do2 1s ease-in forwards infinite;}
@keyframes do2{
0%{transform:scale(1); opacity:1;}
100%{transform:scale(1.5); opacity:0.2;}
}
.swiper-slide-active .ani3{animation:do3 1s ease-in forwards infinite;}
@keyframes do3{
0%{background:#FFF;}
100%{ background:#699;}
}
</style>
</head>
<body>
<div>
<div>
<div class="swiper-slide ping1">
<p>第一屏</p>
<div class="ani1 base1">我是動畫1</div>
</div>
<div class="swiper-slide ping2">
<p>第二屏</p>
<div class="ani2 base2">我是動畫2</div>
</div>
<div class="swiper-slide ping3">
<p>第三屏</p>
<div class="ani3 base3">我是動畫3</div>
</div>
</div>
<div></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
mode: 'vertical',
//loop: true,
pagination: '.pagination',
paginationClickable: true,
resistance: false,
speed: 0.1,
onSlideChangeEnd : function(swiper){ //mySwiper.activeLoopIndex
//mySwiper.activeIndex==0){
}
});
</script>
</body>
</html>
我只作了最簡單處理，動畫那麼神奇，全靠思惟，看見swiper.js的效果，只要花時間去處理，用這個邏輯也是很簡單就能實現的
<link rel="stylesheet" href="css/idangerous.swiper.css">
<script src="js/idangerous.swiper-2.1.min.js"></script>
在官網可下載
相關文章
- 1. iOS 仿寫知乎 feed 流透明全屏廣告效果
- 2. js全屏滾動效果
- 3. 廣告圖寬屏顯示的效果
- 4. 全面屏手機_適配全面屏廣告
- 5. js瀑布流效果搭建
- 6. 蘋果cms如何去除手機端漂浮廣告教程
- 7. 蘋果cmsv10手機端播放器廣告去除教程
- 8. js原生廣告漂浮效果
- 9. Js浮動廣告效果實現
- 10. swiper.js-全屏動畫切換效果實現
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • Swift 環境搭建 - Swift 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. iOS 仿寫知乎 feed 流透明全屏廣告效果
- 2. js全屏滾動效果
- 3. 廣告圖寬屏顯示的效果
- 4. 全面屏手機_適配全面屏廣告
- 5. js瀑布流效果搭建
- 6. 蘋果cms如何去除手機端漂浮廣告教程
- 7. 蘋果cmsv10手機端播放器廣告去除教程
- 8. js原生廣告漂浮效果
- 9. Js浮動廣告效果實現
- 10. swiper.js-全屏動畫切換效果實現