參考網站：http://www.minwt.com/webdesign-dev/html/14066.htm...
2016年8月14日 星期日
2016年8月10日 星期三
2016年8月9日 星期二
[視覺設計] 質感背景與縫隙製作
以下範例在 psd/free_labels_fo_you_guys.psd 中
ps. 此範例擋亦有皮革書籤範例
背景製作
1.新增形狀、435365
2.轉換成智慧型濾鏡
3.「濾鏡」→「雜訊」→「增加雜訊」→「總量」1%
縫隙製作
1.新增形狀、000000
2.新增圖層樣式
3.「混合選項」→「填滿不透明」32%
4.內陰影
5....
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"
...
[網頁設計] 選單動畫jQuery套件
以下範例都在menu_left /index.html中
ps.官網 http://git.blivesta.com/drawer/
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...
[網頁設計] 圖片輪播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">
...
[網頁設計] 日期選擇器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.p...
[網頁設計] 驗證欄位jQuery套件
1、套件：jquery.validate.js
2、套件：cmxforms.js
3、套件：cmxforms.css
4、$("#commentForm").validate({
rules:{
repassword:{equalTo: '#password'}
},
errorPlacement: function(error, element) {
error.appendTo(...
[網頁設計] 彈出視窗jQuery套件
1.套件：sweetalert2
2.$(function() {
$('p').bind('click', function(event) {
swal({
title: 'jQuery HTML example',
html: $('<div>')
...
[網頁設計] 物件黏住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">
以上範例都在comeclou...
[網頁設計] 滑下去後再執行動畫jQuery套件
1.<script src="wow.js"></script>
2.<script>new WOW().init();</script>
3.<p class="wow flash">this is WOW.js</p>
以上範例都在comeclou...
[網頁設計] 記憶目前所在的頁面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">
線上教學網址：
http://www.w3sc...
[網頁設計] 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 官網
http://getbootstrap.com
Bootatrap 中文網站
http://bootstrap.hexschool.com/
Jasny Bootstrap
http://www.jasny.net/bootstrap/
Bootstrap線上編輯器
http://www.layoutit.com/build
Start Bootstrap
https://startbootstrap.com/
Bootstrap-material-design
http://fezvrasta.github.io/bootstrap-material-design/
Bootswatch
(提供各種...
熱門文章
-
以下範例都在321/index3.html中 1. 套件： swiper.jquery.min.js 2. css ： swiper.css 3. 布局 <div class="swiper-container"... -
1.套件：sweetalert2 2.$(function() { $('p').bind('click', function(event) { swal({ title: ... -
<script src="@Url.Content("~/Scripts/jquery.waypoints.min.js")"></script> <script src="@Url.Co...
