JS三教九流系列-jquery實例開發到插件封裝3

時間 2019-11-08

標籤三教九流系列 jquery 實例開發插件封裝欄目 JavaScript 简体版

原文原文鏈接

咱們先寫實例，而後可能須要在封裝爲插件，最後作更高級的處理！javascript

封裝插件基礎學習 http://my.oschina.net/u/2352644/blog/487688css

1-7實例地址 http://my.oschina.net/u/2352644/blog/490827html

8-17實例地址 http://my.oschina.net/u/2352644/blog/491933 java

效果目錄：jquery

18.計數增長效果web

19.模仿3d的焦點圖效果數組

20.倒計時效果app

21.導航滾動監聽 dom

22.圖片預加載函數

23.滾動事件觸發圖片預加載

18.計數增長效果

咱們在瀏覽網頁，有的頁面會有對會員註冊人數的顯示，而且是從0增長到指定值的，動態增加

其實原理很簡單，咱們指定目標值，而後指定增加速度，間隔函數不斷從0開始累加增加速度，超過目標值清空間隔函數便可！

代碼實現：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 /*
 cdom 獲取外圍對象
 cont 獲取顯示數字
 speed 設置循環次數
 cdom 設置動畫延時
 cdom 設置數字間距，存在時speed參數無效
 */
 function count(cdom,cont,speed,interspe,speedt){  
  var speedb=speedt?speedt:Math.ceil(cont/speed);
  var coni=0;
  var jsq=setInterval(function(){
   if(coni>=cont){cdom.html(cont);clearInterval(jsq)}else{   
   cdom.html(coni);coni+=speedb;}
  },interspe) 
 };
 //call fun
 count($(".cont"),$(".cont").attr("data"),10,50);
 count($(".cont1"),$(".cont1").attr("data"),10,50);
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.nm{ height:100px; width:100px;opacity:0.5; filter:alpha(opacity=50); background:#09F;}
#ckepop{ height:200px; width:200px; background:#3F9;}
</style>
</head>
<body>
<br>
    <div class="cont" style="height:100px; line-height:100px; text-align:center; width:500px;background:#69F;font-size:50px; color:#fff; font-weight:bold;" data="54752"></div>
<div class="cont1" style="height:100px;line-height:100px; text-align:center; width:500px;background:#69F;font-size:50px;color:#fff; font-weight:bold;" data="8975"></div>
</body>
</html>

19.模仿3d的焦點圖效果

這樣一種焦點圖效果，中間的比較大，兩側依次變小，而且被壓住一部分，

原理：點擊觸發切換，將全部元素經過jq的each遍歷，判斷當前的位置，根據切換方向，對當前位置、層高。大小等屬性作出css的更改

實現代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 $("#Main").click(function(event){
  var med=$("#Main").offset().left,medw=$("#Main").width(),medl=med+medw/2,medr=med+medw;
  var el=event.pageX;
  if(el>med&&el<medl){
   Turns("left")}
  else if(el>medl&&el<medr){
   Turns("right")}
 });
//end
});
var isMoving=false;
var isfa=function(){isMoving = false};
function Turns(fangxiang) {
    if (isMoving == false) {
        isMoving = true;
//start 
var tindex1=1,tindex2=2,tindex3=10,tindex4=5,tindex5=0; 
var anim5=function(){
target.css("z-index", tindex5);
target.animate({width:"150px",height:"100px",marginTop:"75px",marginLeft:"1000px"}, 800,isfa);
};
var anim2=function(){
target.css("z-index", tindex2);
target.animate({width:"250px",height:"175px",marginTop:"35px",marginLeft:"150px"}, 800,isfa);
};
var anim3=function(){
target.css("z-index", tindex3);
target.animate({width:"350px",height:"250px",marginTop:"0px",marginLeft:"400px"}, 800,isfa);
};
var anim4=function(){
target.css("z-index", tindex4);
target.animate({width:"250px",height:"175px",marginTop:"35px",marginLeft:"750px"}, 800,isfa);
};
var anim1=function(){
target.css("z-index", tindex1);
target.animate({width:"150px",height:"100px",marginTop:"75px",marginLeft:"0px"}, 800,isfa);
}; 
if(fangxiang=="left"){
for (var i = 0; i < $(".wheelItem").length; i++) {
var target = $(".wheelItem").eq(i);
if (target.css("margin-left") == "0px" || target.css("margin-left") == "auto") {
anim5();
} else if (target.css("margin-left") == "150px") {
anim1();
} else if(target.css("margin-left")=="400px"){
   anim2();
}else if(target.css("margin-left")=="750px"){
anim3();
}else if(target.css("margin-left")=="1000px"){
anim4();
}
         }
}
//cc
if(fangxiang=="right"){
for (var i = 0; i < $(".wheelItem").length; i++) {
var target = $(".wheelItem").eq(i);
if (target.css("margin-left") == "0px" || target.css("margin-left") == "auto") {
anim2();
} else if (target.css("margin-left") == "150px") {
anim3();
} else if(target.css("margin-left")=="400px"){
   anim4();
}else if(target.css("margin-left")=="750px"){
anim5();
}else if(target.css("margin-left")=="1000px"){
anim1();
}
}
}
//end
    }
}
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
#Main{width:1180px;height:300px;margin:0 auto;margin-top:100px;}
.wheelItem{float:left;position:absolute;border:2px solid #fff;}
.img1{width:150px;height:100px;margin-top:75px;margin-left:0px;}
.img2{width:250px;height:175px;margin-top:35px;margin-left:150px;}
.img3{width:350px;margin-left:400px;height:250px;z-index:10;}
.img4{width:250px;height:175px;margin-left:750px;margin-top:35px;z-index:9;}
.img5{width:150px;margin-left:1000px;height:100px;margin-top:75px;}
</style>
</head>
<body>
<div id="Main">
  <img class="wheelItem img1" src="http://h.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=deceb63ade54564ee530b779d5e3a8b0/5ab5c9ea15ce36d342a3091939f33a87e950b170.jpg"/>
  <img class="wheelItem img2" src="http://a.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=5a2d9b6a88d4b31cf069c7fbe1eb134d/cc11728b4710b912d83c76d7c0fdfc039245221d.jpg"/>
  <img class="wheelItem img3" src="http://b.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=33201307abd3fd1f365cf17a5673112d/b17eca8065380cd7208822c4a244ad3459828101.jpg"/>
  <img class="wheelItem img4" src="http://f.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=d774260ab37eca8012506aa7f71ea3ef/1e30e924b899a901296ddb1f1e950a7b0208f5bb.jpg"/>
  <img class="wheelItem img5" src="http://d.hiphotos.baidu.com/super/whfpf%3D425%2C260%2C50/sign=55c411d57fd98d1076815f7147028c3c/f603918fa0ec08fa2a24948e5aee3d6d55fbdaf7.jpg"/>
</div>
</body>
</html>

20.倒計時效果

倒計時的原理：傳入指定時間（當前作秒數的處理），調用間隔函數，執行時間爲一秒；秒數時間/60獲取分鐘，秒數時間%60取得餘數，獲得秒數，

代碼以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start   
 function timeend(classname,maxtime){
  var timer = setInterval(countDown,1000);  
  countDown();
  function countDown(){  
   if(maxtime>=0){
    minutes = Math.floor(maxtime/60);  
    seconds = Math.floor(maxtime%60);  
    msg = "距離結束還有"+minutes+"分"+seconds+"秒";
    classname.html(msg);       
    if(maxtime == 5*60) 
    {alert('注意，還有5分鐘!');}  
    maxtime--; 
    
   }else{  
    clearInterval(timer);  
    classname.html("時間到，結束!");  
   }  
  }; 
 };
 
 timeend($('.timeend1'),24*60);
 timeend($('.timeend2'),50*60);
 timeend($('.timeend3'),48*60);
 timeend($('.timeend4'),6*60);
 
//end
});
 
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.timer{ height:40px; line-height:40px; margin:40px;}
</style>
</head>
<body>
<div style="color:red" class="timer timeend1"></div> 
<div style="color:red" class="timer timeend2"></div> 
<div style="color:red" class="timer timeend3"></div> 
<div style="color:red" class="timer timeend4"></div> 
</body>
</html>

21.導航滾動監聽

原理：window監聽滾動事件，返回滾動值；建立數組，存放全部標題錨點相對頁面頂部的top值；滾動值與全部錨點top值作差值，獲取最小值在數組位置

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 
 var navarr=[];
 $(".con .con-title a").each(function(index, element) {
  navarr[index]=($(this).offset().top);
 });
 $(window).scroll(function(){
  var scrolltop=$(window).scrollTop();
  scrolllin(scrolltop);
 });
 function scrolllin(scrolltop){
  var temparr=[];
  $.each(navarr, function(i, n){
    temparr[i]=Math.floor(Math.abs(scrolltop-navarr[i]));
  });
  console.log(temparr)
  minaddclass(temparr);
 };
 function minaddclass(temparr){
  var ind=returnin(temparr);
  $(".nav").children().eq(ind).addClass("focus").siblings().removeClass("focus");
 };
 function returnin(temparr){
  var minval=Math.min.apply(null,temparr);
  var resval;
  for(var i=0;i<temparr.length;i++){
   if(temparr[i]==minval){
    resval=i;
   }else{}
  };
  return resval
 };
 $(".nav").children().click(function(){
  $(this).addClass("focus").siblings().removeClass("focus");
 });
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.nav{ position:fixed; right:0px; top:200px; width:100px; height:200px; line-height:40px; background:#000; opacity:0.6;}
.nav a{ float:left; margin:0 10px; color:#09F; width:100px; height:40px;}
.nav a.focus{ color:#F03;}
.box{}
.con{ height:400px;}
.con .con-title{ height:40px; line-height:40px; font-size:14px; text-indent:20px;}
.con .con-title a{}
</style>
</head>
<body>
<div class="nav">
 <a href="#h1" class="focus" idlink="h1">html章節</a>
    <a href="#h2" idlink="h2">css章節</a>
    <a href="#h3" idlink="h3">js章節</a>
    <a href="#h4" idlink="h4">jquery章節</a>
    <a href="#h5" idlink="h5">jq實例開發</a>
</div>
<div class="box">
 <div class="con">
     <div class="con-title">
         <a id="h1">html章節</a>
        </div>
     
    </div>
    <div class="con">
     <div class="con-title">
         <a id="h2">css章節</a>
        </div>
    </div>
    <div class="con">
     <div class="con-title">
         <a id="h3">js章節</a>
        </div>    
    </div>
    <div class="con">
     <div class="con-title">
         <a id="h4">jquery章節</a>
        </div>    
    </div>
    <div class="con">
     <div class="con-title">
         <a id="h5">jq實例開發</a>
        </div>    
    </div>   
</div>
<div style="height:300px;">footer</div>
</body>
</html>

22.圖片預加載

原理：咱們知道dom對象具備load事件，加載完成事件，咱們根據將處理程序放在img的load事件內部處理就能夠了，只要img加載完，裏面的處理就會執行，固然圖片比較多還須要額外的處理

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var imglen=$(".readyimg").length;
 var isimg=[];
 for(var i=0;i<imglen;i++){
  isimg[i]=0;
 };
 for(var i=0;i<imglen;i++){
  (function(i){
   $(".readyimg")[i].onload=function(){
    isimg[i]=1;
    ifready();
   };
  })(i);
  
 };
 function ifready(){
  if(isready()==1){
   alert('圖片所有加載完！當前放入處理代碼')
  }else{
   
  };
 };
 function isready(){
  var res=1;
  for(var i=0;i<imglen;i++){
   if(isimg[i]==0){
    res=0;
   }else{};
  };
  return res;
 };
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.box{width: 900px;margin: 0 auto;}
.box img{ width: 200px;height: 200px;margin: 10px;border: 1px solid #000;}
</style>
</head>
<body>
<div class="box">
     <img src="http://fe.topit.me/e/53/65/11639567172a86553eo.jpg" class="readyimg ready1">
     <img src="http://www.pp3.cn/uploads/allimg/111116/1102135I3-12.jpg" class="readyimg ready2">
     <img src="http://i5.topit.me/5/d1/9b/1132725126ff69bd15o.jpg" class="readyimg ready3">
     <img src="http://f9.topit.me/9/31/41/113272518184741319o.jpg" class="readyimg ready4">
     <img src="http://img4q.duitang.com/uploads/item/201303/08/20130308121537_tQBXj.jpeg" class="readyimg ready5">
     <img src="http://fa.topit.me/a/9b/0e/11387318338f00e9bao.jpg" class="readyimg ready6">
     <img src="http://fe.topit.me/e/84/21/1196631638af72184eo.jpg" class="readyimg ready7">
     <img src="http://i2.3conline.com/images/piclib/201307/11/batch/1/184202/1373533683845esf53p850y.jpg" class="readyimg ready8">
    </div>
</body>
</html>

屬於模擬測試，咱們引入外部較大圖片，會出現加載過程，咱們會發現只有圖片所有加載完畢纔會觸發alert(),咱們把處理代碼放在alert位置替換就能夠了！每次ctrl+f5強制刷新查看！

23.滾動事件觸發圖片預加載

原理：分頁原理，初始設置爲第一頁，滾動監聽滾動到指定位置，加載第二頁，實際是給要顯示的img加入src屬性

分頁變量page=1；顯示數量count=n；當前顯示頁數（page-1）*count至（page-1）*count+count遍歷，實現當前頁內容顯示

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
var count=6; 
var page=1;
var nowpage;
var allimg=$(".box").children();
$(window).scroll(function(){
 var scrolltop=$(window).scrollTop();
 if(scrolltop>=0&&scrolltop<500){
  page=1;
  nowpage=(page-1)*count;
  for(var i=nowpage;i<=nowpage+5;i++){
   allimg.eq(i).attr('src',allimg.eq(i).attr('data')).show();
  }
  
 }else if(scrolltop>=500&&scrolltop<1000){
  page=2;
  nowpage=(page-1)*count;
  for(var i=nowpage;i<=nowpage+5;i++){
   allimg.eq(i).attr('src',allimg.eq(i).attr('data')).show();;
  }
 }else if(scrolltop>=1200){
  page=3;
  nowpage=(page-1)*count;
  for(var i=nowpage;i<=nowpage+5;i++){
   allimg.eq(i).attr('src',allimg.eq(i).attr('data')).show();;
  }
 };
});
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.box{width: 900px;margin: 0 auto;}
.box img{ width: 300px;height: 300px;margin: 10px;border: 1px solid #000; display:none;}
</style>
</head>
<body>
<div class="box" style="height:2000px;">
     <img data="http://fe.topit.me/e/53/65/11639567172a86553eo.jpg" class="readyimg ready1" alt="1">
     <img data="http://www.pp3.cn/uploads/allimg/111116/1102135I3-12.jpg" class="readyimg ready2" alt="1">
     <img data="http://i5.topit.me/5/d1/9b/1132725126ff69bd15o.jpg" class="readyimg ready3" alt="1">
     <img data="http://f9.topit.me/9/31/41/113272518184741319o.jpg" class="readyimg ready4" alt="1">
     <img data="http://img4q.duitang.com/uploads/item/201303/08/20130308121537_tQBXj.jpeg" class="readyimg ready5" alt="1">
     <img data="http://fa.topit.me/a/9b/0e/11387318338f00e9bao.jpg" class="readyimg ready6" alt="1">
        
     <img data="http://fe.topit.me/e/84/21/1196631638af72184eo.jpg" class="readyimg ready7" alt="1">
     <img data="http://i2.3conline.com/images/piclib/201307/11/batch/1/184202/1373533683845esf53p850y.jpg" class="readyimg ready8" alt="1">
        <img data="http://f9.topit.me/9/31/41/113272518184741319o.jpg" class="readyimg ready4" alt="1">
     <img data="http://img4q.duitang.com/uploads/item/201303/08/20130308121537_tQBXj.jpeg" class="readyimg ready5" alt="1">
     <img data="http://fa.topit.me/a/9b/0e/11387318338f00e9bao.jpg" class="readyimg ready6" alt="1">
        <img data="http://f9.topit.me/9/31/41/113272518184741319o.jpg" class="readyimg ready4" alt="1">
        
     <img data="http://img4q.duitang.com/uploads/item/201303/08/20130308121537_tQBXj.jpeg" class="readyimg ready5" alt="1">
     <img data="http://fa.topit.me/a/9b/0e/11387318338f00e9bao.jpg" class="readyimg ready6" alt="1">
        <img data="http://f9.topit.me/9/31/41/113272518184741319o.jpg" class="readyimg ready4" alt="1">
     <img data="http://img4q.duitang.com/uploads/item/201303/08/20130308121537_tQBXj.jpeg" class="readyimg ready5" alt="1">
     <img data="http://fa.topit.me/a/9b/0e/11387318338f00e9bao.jpg" class="readyimg ready6" alt="1">
        <img data="http://f9.topit.me/9/31/41/113272518184741319o.jpg" class="readyimg ready4" alt="1">
     
    </div>
</body>
</html>