[HTML]簡易選單製作

首先html部分

<div class="header" style="height:300px;">
</div>
<section class="section section--menu" id="Alonso">
<nav class="menu menu--alonso">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">NEWS</a></li>
<li class="menu__item"><a href="#" class="menu__link">PROJECT</a></li>
<li class="menu__item"><a href="#" class="menu__link">RESERVATION</a></li>
<li class="menu__item"><a href="#" class="menu__link">CONTECT</a></li>
</ul>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="#">NEWS</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">RESERVATION</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
</div>
</nav>
</section>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>

CSS部分

<style>
body{
padding:0;
margin:0;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
.section {
}
.menu--alonso{
display:block;
}
.section--menu {
position: relative;
}
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
-webkit-align-items: center;
        align-items: center;
-webkit-justify-content: center;
        justify-content: center;
background: burlywood;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__list .selected a{
color: #f48b95;
}

.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* mobile style */
#dl-menu{
display: none;
}
.dl-menuwrapper button {
background: #ccc;
border: none;
width: 48px;
height: 45px;
text-indent: -900em;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
background: #aaa;
}
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 5px;
background: #fff;
top: 10px;
left: 16%;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
}
.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.dl-menuwrapper li {
position: relative;
min-width: 300px;
}
.dl-menuwrapper li a {
display: block;
position: relative;
padding: 15px 20px;
font-size: 16px;
line-height: 20px;
font-weight: 300;
color: #fff;
outline: none;
}
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
.dl-menuwrapper .dl-menu {
margin: 5px 0 0 0;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
@media screen and (max-width:1025px) {
.menu__list {
display: none;
}
#dl-menu{
display: block;
width: 100%;
text-align: center;
}
}
</style>

javascript部分

<script>
jQuery(document).ready(function(){
jQuery('.menu__item').click(function(){
jQuery(this).addClass('selected');
jQuery(this).siblings('.selected').removeClass('selected');
});

var flag = false;
jQuery('.dl-trigger').click(function(){
if(flag == false){
jQuery(this).parents().find('.dl-menu').addClass('dl-menuopen');
flag = true;
}else{
jQuery(this).parents().find('.dl-menu').removeClass('dl-menuopen');
flag = false;
}
});
});
</script>
<script>
jQuery(document).ready(function(){
var hh = jQuery('.header').height();
var window_height;
jQuery(window).scroll(function() {
window_height = jQuery(document).scrollTop();
if(window_height > hh){
jQuery('.menu__list').css({position: 'fixed',top: '0', width: '100%', 'z-index': '9999', background: 'rgb(255, 255, 255)', left: '0px', height: '120px'});
}else{
jQuery('.menu__list').css({position: "relative"});
}
});
});
</script>

[javascript]簡單製作浮動視窗置底功能

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
  if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()){
jQuery('#warnings').css("position", "static");
jQuery(window).scrollTop(jQuery(document).height());
}else{
jQuery('#warnings').css("position", "fixed");
}
  });
});
</script>


jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()
// 這段是判斷scrollbar是否已經到最底部，當滑到最底時改為固定在最底下否則以浮動的方式固定在網頁的最下方


CSS部分

#warnings {

1. position: fixed;
2. bottom: 0;
3. z-index: 999;

}

[javacript]偵測螢幕scroll bar 滑動

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(window).scroll(function() {
  var pos = jQuery(window).scrollTop();
  console.log(pos);
  });
});
</script>

[javascript]上傳圖片預覽

html部分:

<div>

<img class="img_preview" style="max-width: 150px; max-height: 150px;" src="xxx.png">

<div class="img_size"></div>

<input type="file" name="img_upload" id="img_upload">

</div>

javascript部分:

jQuery(document).ready(function() {

 

  function img_preview(input){

    if (input.files && input.files[0]) {

      var reader = new FileReader();

      reader.onload = function (e) {

        jQuery('.img_preview').attr('src', e.target.result);

        var kb = format_float(e.total / 1024, 2);

        jQuery('.img_size').text("檔案大小：" + kb + " KB");

      }

      reader.readAsDataURL(input.files[0]);

    }

  }

 

  jQuery("body").on("change", "#img_upload", function (){

   img_preview(this);

  });

});

[jQuery]計算文字框輸入的字數

HTML部分:
<div>
<textarea id="desc" name="desc"></textarea>
<div class="change">您還剩下「<span id="word"></span>」字，即可進行下一步</div>
<div class="next">滿200個字囉！您可以繼續填寫或進行下一步</div>
</div>

javacript部分:
jQuery(document).ready(function() {
jQuery('#word').text('200');
jQuery('.next').hide();
jQuery('#desc').on("keyup", KeyIn).on("keydown", KeyIn).on("change", KeyIn);
});

function KeyIn(evt) {
var maxLength = 200;

var nowContent = jQuery(this).val();
var nowLehgth = nowContent.length;

if (nowLehgth > maxLength){
jQuery('.change').hide("slow");
jQuery('.next').show("slow");
}
else{
jQuery('.next').hide("slow");
jQuery('.change').show("slow");
jQuery("#word").html(maxLength - nowLehgth);
}
}

[javascript]取得螢幕&瀏覽器寬度高度

//取得螢幕寬度
function getScreenWidth() {
return screen.width;
}
//取得螢幕高度
function getScreenHeight() {
return screen.height;
}
//取得瀏覽器視窗寬度
function getBrowserWidth(){
return jQuery(window).width();
}
//取得瀏覽器視窗高度
function getBrowserHeight() {
return jQuery(window).height();
}

[javascript]正規式

線上驗證正規式
http://www.rubular.com/

例:SB001-1500001
前兩碼英文，後面3碼數字，接著"-"符號後面再接7碼數字
共13碼
/^[a-zA-Z]{2}[0-9]{3}[-][0-9]{7}$/