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,
});
}
|
[網頁設計] 日期選擇器jQuery套件
1、套件：bootstrap.min.js.
2、套件：moment.js
3、套件：bootstrap-datetimepicker.min.js
4、bootstrap-datetimepicker.css
5、$('#datetimepicker10').datetimepicker({
format: 'YYYY-MM-DD'
});
以上範例都在login/register.php中
[網頁設計] 驗證欄位jQuery套件
1、套件：jquery.validate.js
2、套件：cmxforms.js
3、套件：cmxforms.css
4、$("#commentForm").validate({
rules:{
repassword:{equalTo: '#password'}
},
errorPlacement: function(error, element) {
error.appendTo( element.parents(".control-group"))
}
});
註：原始為$("#commentForm").validate(); 即可，此為套用bootstrap之範例
以上範例都在login/register.php中
[網頁設計] 彈出視窗jQuery套件
1.套件：sweetalert2
2.$(function() {
$('p').bind('click', function(event) {
swal({
title: 'jQuery HTML example',
html: $('<div>')
.addClass('some-class')
.text('jQuery is everywhere.')
})
);
})
以上無範例
1.套件：jquery.poptrox.min.js
2.撰寫js
$(function() {
var foo = $('#gallery');
foo.poptrox({
usePopupCaption: false
});
});
3.HTML
<div class="col-xs-8 col-md-8 hover" id="gallery">
<a href="https://youtu.be/nSJFveEL_38" data-poptrox="youtube,800x480">
<span>點我看更多</span>
<img src="images2/btn-08.jpg" class="img-responsive">
</a>
</div>
以上範例在321/index2.html中
[網頁設計] 物件黏住jQuery套件
應用說明：滑鼠滑上去後，按鈕被黏住
1.套件：stickyElements
2.stickyElements('.item', {stickiness: 5,duration: 450});
以上範例都在comecloud中
[網頁設計] menu固定在最上方jQuery套件
應用說明：圖片放置在最上面，滑動至最上面後，menu固定在最上方
1.套件affix.js與bootstrap
2.設定 .affix { top: 0;width: 100%;}
3.<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="500">
以上範例都在comecloud中
[網頁設計] 滑下去後再執行動畫jQuery套件
1.<script src="wow.js"></script>
2.<script>new WOW().init();</script>
3.<p class="wow flash">this is WOW.js</p>
以上範例都在comecloud中
[網頁設計] 記憶目前所在的頁面jQuery套件
說明：Bootstrap 記憶目前所在的頁面 (Nav .active效果)
1.套件：The Scrollspy Plugin、Bootstrap
2.<body data-spy="scroll" data-target=".navbar" data-offset="50">
3.<a class="page-scroll" href="#section1">Services</a>
4.<div id="section1" class="container-fluid">
線上教學網址：
以上範例在comecloud中
[網頁設計] Nav放大縮小jQuery套件
1.套件：先掛classie.js 再掛cbpAnimatedHeader.js
2.Js會去抓取 .navbar-default 元素，加上navbar-shrink類別
3.設定navbar-shrink 的csss
PS.classie.js與cbpAnimatedHeader.js 須放在網頁最底部
以上範例在comecloud中
[網頁設計] Bootatrap 相關網站整理
Bootatrap 官網
Jasny Bootstrap
Bootstrap線上編輯器
Start Bootstrap
Bootstrap-material-design
Bootswatch
(提供各種 Bootstrap 的主題配色)
(提供各種 Bootstrap 的主題配色)
Bootatrap教學
Bootatrap網格模板素材網
http://benstewart.net/2014/04/bootstrap3-responsive-grid-photoshop/
檔案在psd/bootstrap3-psds中
檔案在psd/bootstrap3-psds中
Bootatrap圖像素材
http://www.designshock.com/bootstrap-4-gui
檔案在psd/designshock-Bootstrap-GUI-v4-free-1032400180中
Bootatrap UI素材
http://bootstrapuikit.com/
四套免费的Bootstrap 3 UI Kits设计素材分享
http://www.25xt.com/webdevelop/6023.html
更改 Bootatrap Nav顏色
https://work.smarchal.com/twbscolor/
精選15款！可商業用「Bootstrap自適應網頁」版型下載
https://www.minwt.com/webdesign-dev/html/13234.html
Bootatrap4主題
https://bootswatch.com/
Bootatrap3主題
https://bootswatch.com/3/
檔案在psd/designshock-Bootstrap-GUI-v4-free-1032400180中
Bootatrap UI素材
http://bootstrapuikit.com/
四套免费的Bootstrap 3 UI Kits设计素材分享
http://www.25xt.com/webdevelop/6023.html
更改 Bootatrap Nav顏色
https://work.smarchal.com/twbscolor/
精選15款！可商業用「Bootstrap自適應網頁」版型下載
https://www.minwt.com/webdesign-dev/html/13234.html
Bootatrap4主題
https://bootswatch.com/
Bootatrap3主題
https://bootswatch.com/3/
熱門文章
-
1.套件：sweetalert2 2.$(function() { $('p').bind('click', function(event) { swal({ title: &... -
以下範例都在321/index3.html中 1. 套件： swiper.jquery.min.js 2. css ： swiper.css 3. 布局 <div class="swiper-container">... -
<script src="@Url.Content("~/Scripts/jquery.waypoints.min.js")"></script> <script src="@Url.Co...
