2016年8月14日 星期日
2016年8月10日 星期三
2016年8月9日 星期二
2016年8月8日 星期一
[網頁設計] 背景幻燈片jQuery套件
官網 http://vegas.jaysalvat.com/documentation/transitions/
1. 套件：Zepto.js、vegas.min.js
2. css：vegas.css
3. 初始化
$(function() {
$('body').vegas({
slides: [{
src: "images/banner.jpg"
}, {
src: "images/banner2.jpg"
}],
animation: 'kenburns'
});
});
以上範例都在menu_left /index3.html中
[網頁設計] 選單動畫jQuery套件
以下範例都在menu_left /index.html中
1.套件：iscroll.js、drawer.min.js
2.css：drawer.css
3.HTML
<body
class="drawer drawer--left">
<header role="banner">
<button type="button"
class="drawer-toggle drawer-hamburger">
<span
class="sr-only">toggle navigation</span>
<span
class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav"
role="navigation">
<ul class="drawer-menu">
<li><a
class="drawer-brand"
href="#">Brand</a></li>
<li><a
class="drawer-menu-item"
href="#">Nav1</a></li>
<li><a
class="drawer-menu-item"
href="#">Nav2</a></li>
</ul>
</nav>
</header>
<main role="main">
<!-- Page content -->
</main>
</body>
|
4.初始化
$(document).ready(function()
{
$('.drawer').drawer();
});
|
[網頁設計] 圖片輪播jQuery套件
以下範例都在321/index3.html中
1.套件：swiper.jquery.min.js
2. css：swiper.css
3.布局
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images3/a-1.jpg">
<div>
<div class="swiper-slide">
<img src="images3/a-2.jpg">
</div>
<div class="swiper-slide">
<img src="images3/a-3.jpg">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
|
4.指定swiper 容器尺寸:
.swiper-container, .swiper-slide {
width: 250px;
}
|
5.初始化文件
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
//添加需要的选项:
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 0,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
});
}
|
熱門文章
-
以下整理我自己一些常用的免費圖庫 smartmockups http://smartmockups.com/ FindA.Photo (以顏色與標籤分類) http://finda.photo/ GRATISOGRAPHY http://www.grati... -
sketch教學影片 https://www.youtube.com/watch?v=dxUR0kfidb0 sketch素材網 https://www.sketchappsources.com/ sketchrepo https://sketchrepo.com/...
-
第一PPT http://www.1ppt.com/moban/shangwu/ slides carnival http://www.slidescarnival.com/category/free-templates
