[JQuery] slideShow 輪播

記錄一下 好用的輪播套件 slick 連結

然後下面範例是拿其他教學範例多加的功能

在特定的高度上會停止撥放幻燈片

     $(document).ready(function (){
            //window.scroll 抓取使用者滾輪高度..這裡自訂600
            var stop = false;
            $(window).scroll(function () {
                var scrollTop = $(window).scrollTop();
                if (scrollTop >= 600 ) {
                    console.log("stop" + scrollTop);
                    stop = true;
                } else {
                    console.log("r" + scrollTop);
                    stop = false;
                }
            });

            var num = 1;
            var tNum = 5;
            var duration = 2000;
            console.log("A");

            run();
            
            $("#box").mouseover(function () { stopRun(); })
            .mouseout(function () { run();})
      
            for (var i = 1; i <= tNum; i++) {
                document.getElementById("tab" + i).onclick = show;
                document.getElementById("con" + i).style.display = "none";
            }
            document.getElementById("con1").style.display = "block";
            document.getElementById("tab1").className = "now-tab";

            //在 autoShow 判斷是否停止撥放
            function autoShow() {
                if (stop) return;

                for (var i = 1; i <= tNum; i++) {
                    document.getElementById("con" + i).style.display = "none";
                    document.getElementById("tab" + i).className = "";
                }
                if (num < tNum) { num++; } else { num = 1; }
                document.getElementById("con" + num).style.display = "block";
                document.getElementById("tab" + num).className = "now-tab";

            }

            function show() {
                num = this.id.substr(3) - 1;
                autoShow();
            }

            function stopRun() { clearInterval(myInterval); }

            function run() { myInterval = setInterval(autoShow, duration); }
          
        });

來源:Flycan-輪播廣告 教學

[Jquery]scrollTop 滑鼠滾到指定位置，顯現DIV(浮水印 Top)

$(function(){
    $(window).scroll(function () {
       if ($(this).scrollTop() > 800) {
            $('.left_BOX').fadeIn("fast");
           } else {
            $('.left_BOX').stop().fadeOut("fast");
           }
    });
});

<div class="left_BOX" style="display: none; position: fixed;">
    <div class="goTop" style="display: none;position: fixed;margin-top: 60px;">
       <a href="#"></a>
    </div>
</div>

幾個重點 ：

滑鼠要滾到指定位置，才會出現元素 => 預設是看不見的 display:none

元素要固定在頁面的某處 ==>  position: fixed

至於固定的位置可以用 top left right bottom 自行隨意調整


goTop比較簡單的寫法 可以設置連結(#) 就可以回到最頂端了

[Jquery] FB上傳大頭照的裁減選圖

imgAreaSelect
教學 : http://kevintsengtw.blogspot.tw/2012/01/aspnet-mvc-jquery-imageareaselect.html

       function ImageArea(){
            $('img#imgCut').imgAreaSelect({
                handles: true, //是否出現小方塊 易於拖拉
                aspectRatio: "1:1", //比例
                x1: 0, y1: 0, x2: 100, y2: 100, //預設選取區塊
                onSelectChange: preview //及時預覽
                //onSelectEnd: someFunction
            });
        };

前端上傳預覽

使用 JQUERY

HTML 5

但覽器要支援HTML5 API 才可以使用

部分原始碼來源

[JQuery] LazyCode 圖片載入 實現圖片看到哪Load到哪

 $().ready(function(){
    $("#lazy").find("img").lazyload({
      placeholder: "/img/backgroupImg.png", //背景圖
      effect: "fadeIn", //特效
      threshold: 200,  //页面高度200時 開載載圖片
      failurelimit: 40 //載到第N個不可見區域的圖片
    });
});

//img 的src換成 data-original
 <div id="lazy">
  <img data-original="/img/ShowImg.png" />
</div>

[JQuery].eachcheckbox 全選 略過特定條件

要做出快速全選的表單時

第一個項目 口全選 被打勾，但是我又不要他的屬性

可以這樣做...

給全選一個特殊的class : CheckALL

在each時，發現class=CheckALL 就略過，繼續執行

只要加個 return true; 就行了

var No = "";
         if ($(".chk").is(":checked")) {
             $("#Product input:checked").each(function () {
                 if ($(this).attr("class") == "CheckALL")
                 {
                     return true;
                 }
                 No += $(this).attr("id").split("_")[1] + ",";
             });

[MVC]CheckBox複選、全選、取消

我忘了有沒有寫過類似的東西 剛好今天有空，索性整理一下吧
JQUERY

         // Tab名稱的全選和取消
         $("#AllTab").change(function () {
             if ($(this).is(":checked")) {
                 $("[id*=chkTab] input").prop("checked", true);
             } else {
                 $("[id*=chkTab] input").removeAttr("checked");
             }
         });
         $("[id*=chkTab] input").on("change", function () {

             //全部都選到了,"全部"這個選項打勾,反之,則取消
             if ($("[id*=chkTab] input").length == $("[id*=chkTab] input:checked").length) {
                 $("#AllTab").prop("checked", true);
             }
             else {
                 $("#AllTab").removeAttr("checked");
             }
         });

View 順便講一下好了，checkList 這個是用來記錄CheckBox選取的狀態 MVC 才可以這樣用......

//這段程式碼可以不用理他，是POSTBACK 回來時
//想讓畫面保留勾選的項目
@{ 
    string[] checkList = new string[7];//最後一個存放 全部 的狀態
    if (splitFilter[1] != null)
    {
      string[] splitck = splitFilter[1].TrimEnd(',').Split(',');
      if (splitck[0] != "-1")
      {
         foreach (string i in splitck)
         {
           checkList[int.Parse(i) - 1] = "checked";
          }
      }
                                 
    }
 }

Checkbox是長這樣的

<input type="checkbox" value="1" @checkList[1]><label>AA</label>

全部

AA	BB
CC	DD
EE	FF

 Controller

接到勾選的Tab後，去DB搜尋
之前寫的不太簡潔，順帶記錄一下新寫法

if (Tag != "-1") 
{
  List TagCondition = new List();
  foreach (var t in Tag.Substring(0, Tag.Length - 1).Split(','))
  {
     TagCondition.Add(Convert.ToInt32(t));
   }
   product = product.Where(x =>TagCondition.Contains(x.TabName));
}

[Jquery]Ajax表單POST 多次

Ajax表單無故POST 兩次 , 弄了好久...

 發現罪魁禍首 是這隻.js jquery.unobtrusive-ajax

因為included 2 次 所以也POST 2 次

參考這篇

[jquery]用change事件 取得select 的值