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

時間 2019-11-10

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

原文原文鏈接

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

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

效果目錄：html

1.tab切換效果的實例和封裝java

2.帶左右按鈕圖片滾動效果的實例和封裝jquery

3.九宮格大轉盤的實例css3

4.燈箱效果實例web

5.焦點圖效果實例數組

6.全屏漂浮廣告效果實例app

7.關鍵詞搜索補全效果實例dom

1.tab切換效果的實例和封裝

tab切換效果的原理：

點擊選項，對應內容項顯示，獲取選項索引，內容項索引等於選項索引的顯示，其餘內容項隱藏

要用的處理方法：

$().index()獲取當前對象的索引，從0開始

$().eq() 獲取當前對象索引等於參數值的那一個

jq實例代碼：

<!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
//$(".tab1").tab();
$(".tab1").find(".tabnav").children().click(function(){
 $(".tab1").find(".tabbox").children().eq($(this).index()).show().siblings().hide();
$(this).addClass("fou").siblings().removeClass("fou");
});  
//end
})
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
    <div class="tabnav">
        <span class="fou">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="tabbox">
        <div>111111</div>
        <div style="display:none;">22222222222</div>
        <div style="display:none;">33333333</div>
    </div>
</div> 
</body>
</html>

jq一句話實現，咱們不作太多解釋，就是eq和index的處理

咱們看插件處理：

html頁面：

<!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" src="js/jqExobjs1.js"></script>
<script type="text/javascript">
$(function(){
//start
$(".tab1").tab(); 
//end
})
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
    <div class="tabnav">
        <span class="fou">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="tabbox">
        <div>111111</div>
        <div style="display:none;">22222222222</div>
        <div style="display:none;">33333333</div>
    </div>
</div> 
</body>
</html>

jqExobjs1.js頁面：

//// JavaScript Document  效果擴展，基於對象
$(function(){
//extends start
$.fn.extend({
 tab:function(){ 
  return this.each(function () { 
   var obj = $(this);
   obj.find(".tabnav").children().click(function(){
    obj.find(".tabbox").children().eq($(this).index()).show().siblings().hide();
    $(this).addClass("fou").siblings().removeClass("fou");
   });
  });
 }
});
//extends end
});

2.帶左右按鈕圖片滾動效果的實例和封裝

有一對左右按鈕，點擊左邊，往左動，點右邊，往右動，這個很常見吧，咱們分析原理：

咱們有一個固定寬高的容器，超出隱藏，咱們要左右移動現實的的內容平鋪爲一行，這個相對於超出隱藏容器定位，利用超出隱藏的才截取，實現left的改變

要用的處理方法：

$().is(":animate")判斷對象是否處在是方法的參數值中，是返回true 當前判斷是否處在動畫中，參數能夠是:checked是否選中；div標籤名是否爲div；#id 是否id是這個等

$().animate() 對象添加動畫處理，實現動態屬性值改變

$().stop() 清除對象的動畫隊列

jq代碼實現：

<!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 
 if($(".kvc-box").children("li").length>5){
  $(".kvc-btn").show();
 }else{
  $(".kvc-btn").hide();
 }; 
 $(".kvc-box").css('width',$(".kvc-box").children("li").length*150);
 $(".kvc-btnle").click(function(){
  var nowl=$(".kvc-box").position().left; 
  if(nowl==0){}else{ 
   if(!$(".kvc-box").is(":animated")){
   $(".kvc-box").stop(true).animate({    
   left: nowl+150
      }, {duration:300,queue:false});
  };};   
 });
 $(".kvc-btnri").click(function(){    
  var nowl=$(".kvc-box").position().left;  
  var jix=-($(".kvc-box").children("li").length-1)*150;
  if(nowl==jix){}else{
   if(!$(".kvc-box").is(":animated")){
   $(".kvc-box").stop(true).animate({    
   left: nowl-150
      }, {duration:300,queue:false});
  };};
 });
//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*/
.kvc-cont{ height:27px; line-height:27px; border-bottom:1px solid #53a9d6; width:900px;}
.kvc-window{ width:750px; height:27px; float:left; overflow:hidden; position:relative;}
.kvc-box{ position:absolute; left:0; top:0;height:27px; overflow:hidden;}
.kvc-box li{ float:left;margin-right:5px; background:#fbfbfb; border:1px solid #e5e5e5; border-bottom:none; border-top-left-radius:6px;border-top-right-radius:6px; cursor:pointer; width:139px; text-align:center; padding:0 2px;height:27px;}
.kvc-box li.focus-kvc{background:#0278b5; border:1px solid #0278b5; border-bottom:none; color:#fff;}
.kvc-btn{ float:right; height:27px; width:36px;width:150px;}
.kvc-btn span{ cursor:pointer; width:40px; color:#fff; margin:0 10px; text-align:center; border-radius:8px;}
.kvc-btn .kvc-btnle{float:left; height:27px; background:#09C;}
.kvc-btn .kvc-btnri{float:left; height:27px; background:#09C;}
</style>
</head>
<body>
 <div class="kvc-cont">
     <div class="kvc-window">
         <ul class="kvc-box">
             <li class="focus-kvc" title="初級一班">初級一班</li>
                <li title="中級二班">初級二班</li>
                <li title="中級二班">中級二班</li>
                <li title="中級二班">初級初級二班二班</li>
                <li title="中級二班">中級初級二班二班</li>
                <li title="中級二班">中級初級二班二班</li>
                <li title="中級二班">中級初級二班二班</li>
            </ul>           
        </div> 
        <div class="kvc-btn" style="display:none;">
         <span class="kvc-btnle">左移</span>
            <span class="kvc-btnri">右移</span>
        </div>
    </div>
</body>
</html>

咱們進行插件的封裝，html頁面：

<!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" src="js/jqExobjs2.js"></script>
<script type="text/javascript">
$(function(){
//start 
$(".kvc-cont").scrollimg({duration:1000,limit: 5});
//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*/
.kvc-cont{ height:27px; line-height:27px; border-bottom:1px solid #53a9d6; width:900px;}
.kvc-window{ width:750px; height:27px; float:left; overflow:hidden; position:relative;}
.kvc-box{ position:absolute; left:0; top:0;height:27px; overflow:hidden;}
.kvc-box li{ float:left;margin-right:5px; background:#fbfbfb; border:1px solid #e5e5e5; border-bottom:none; border-top-left-radius:6px;border-top-right-radius:6px; cursor:pointer; width:139px; text-align:center; padding:0 2px;height:27px;}
.kvc-box li.focus-kvc{background:#0278b5; border:1px solid #0278b5; border-bottom:none; color:#fff;}
.kvc-btn{ float:right; height:27px; width:36px;width:150px;}
.kvc-btn span{ cursor:pointer; width:40px; color:#fff; margin:0 10px; text-align:center; border-radius:8px;}
.kvc-btn .kvc-btnle{float:left; height:27px; background:#09C;}
.kvc-btn .kvc-btnri{float:left; height:27px; background:#09C;}
</style>
</head>
<body>
 <div class="kvc-cont">
     <div class="kvc-window">
         <ul class="kvc-box">
             <li class="focus-kvc" title="初級一班">初級一班</li>
                <li title="中級二班">初級二班</li>
                <li title="中級二班">中級二班</li>
                <li title="中級二班">初級初級二班二班</li>
                <li title="中級二班">中級初級二班二班</li>
                <li title="中級二班">中級初級二班二班</li>
                <li title="中級二班">中級初級二班二班</li>
            </ul>           
        </div> 
        <div class="kvc-btn" style="display:none;">
         <span class="kvc-btnle">左移</span>
            <span class="kvc-btnri">右移</span>
        </div>
    </div>
</body>
</html>

jqExobjs2.js頁面：

// JavaScript Document  效果擴展，基於對象
$(function(){
//extends start
$.fn.extend({
 //duration  動畫時間
 //limit  限制個數
 scrollimg:function(options){ 
  return this.each(function () { 
   var defaults = {duration:300,limit: 5};
   var opts = $.extend(defaults, options);
   var obj = $(this);
   if(obj.find(".kvc-box").children("li").length>opts.limit){
    obj.find(".kvc-btn").show();
   }else{
    obj.find(".kvc-btn").hide();
   }; 
   obj.find(".kvc-box").css('width',$(".kvc-box").children("li").length*150);
   obj.find(".kvc-btnle").click(function(){
    var nowl=$(".kvc-box").position().left; 
    if(nowl==0){}else{ 
     if(!$(".kvc-box").is(":animated")){
     $(".kvc-box").stop(true).animate({    
     left: nowl+150
     }, {duration:opts.duration,queue:false});
    };};   
   });
   obj.find(".kvc-btnri").click(function(){    
    var nowl=$(".kvc-box").position().left;  
    var jix=-($(".kvc-box").children("li").length-1)*150;
    if(nowl==jix){}else{
     if(!$(".kvc-box").is(":animated")){
     $(".kvc-box").stop(true).animate({    
     left: nowl-150
     }, {duration:opts.duration,queue:false});
    };};
  
   });   
   
  });
 }
});
//extends end
});

3.九宮格大轉盤的實例

頁面代碼：

<!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" src="js/jqExobjs2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 
//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*/
#lottery{width:400px;height:400px;margin:20px auto 0; position:relative;}
#lottery div{width:100px;height:100px;text-align:centerfont-size:24px;color:#333; float:left;}
#lottery .cent{ background:#C33;}
#lottery .lottery-unit-0{ background:#CC6;}
#lottery .lottery-unit-1{ background:#F99;}
#lottery .lottery-unit-2{ background:#CC6;}
#lottery .lottery-unit-3{ background:#F99;}
#lottery .lottery-unit-4{ background:#CC6;}
#lottery .lottery-unit-5{ background:#F99;}
#lottery .lottery-unit-6{ background:#CC6;}
#lottery .lottery-unit-7{ background:#F99;}
#lottery .lottery-unit-8{ background:#CC6;}
#lottery .lottery-unit-9{ background:#F99;}
#lottery .lottery-unit-10{ background:#CC6;}
#lottery .lottery-unit-11{ background:#F99;}
#lottery div.select{background:#F0F;}
#lottery .start{ position:absolute; left:100px; top:100px; height:200px; width:200px;background:#C33; font-size:30px; text-align:center; cursor:pointer; line-height:200px; color:#fff;}
</style>
</head>
<body>
<div id="lottery">
   
   <div class="lottery-unit lottery-unit-0">1</div>
   <div class="lottery-unit lottery-unit-1">2</div>
   <div class="lottery-unit lottery-unit-2">3</div>
            <div class="lottery-unit lottery-unit-3">4</div>
            
            <div class="lottery-unit lottery-unit-11">12</div>            
            <div class="cent"></div>
            <div class="cent"></div>            
            <div class="lottery-unit lottery-unit-4">5</div>
            
            <div class="lottery-unit lottery-unit-10">11</div>            
            <div class="cent"></div>
            <div class="cent"></div>            
            <div class="lottery-unit lottery-unit-5">6</div>
        
   <div class="lottery-unit lottery-unit-9">10</div>
   <div class="lottery-unit lottery-unit-8">9</div>
   <div class="lottery-unit lottery-unit-7">8</div>
            <div class="lottery-unit lottery-unit-6">7</div>
 
   <div class="start">抽獎</div>
</div>
</body>
</html>

咱們加入jq代碼，動起來:

<!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 set;//存放間隔函數id，用於清除動畫 
 var i=0;//初始位置，
 var speed=100;//轉動速度
 var ok=Math.floor((Math.random()*12));//產生0-11的整數，標記中獎位置
 var count=5*12+ok;//總圈數

 var nowcount=0;//當前的圈數
 function dong(){
  if(nowcount>count){
   clearInterval(set);
   alert("恭喜你，中了"+eval(ok+1)+"等獎")
  }else{   
   nowcount+=1;
   if(i>10){   
    $(".lottery-unit").removeClass("select");
    $(".lottery-unit-11").addClass("select");
    i=0;
   }else{
    $(".lottery-unit").removeClass("select");
    $(".lottery-unit-"+i).addClass("select");
    i+=1;
   };
  };  
  
 }; 
 $(".start").click(function(){
  set=setInterval(dong,speed);
 });
//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*/
#lottery{width:400px;height:400px;margin:20px auto 0; position:relative;}
#lottery div{width:100px;height:100px;text-align:centerfont-size:24px;color:#333; float:left;}
#lottery .cent{ background:#C33;}
#lottery .lottery-unit-0{ background:#CC6;}
#lottery .lottery-unit-1{ background:#F99;}
#lottery .lottery-unit-2{ background:#CC6;}
#lottery .lottery-unit-3{ background:#F99;}
#lottery .lottery-unit-4{ background:#CC6;}
#lottery .lottery-unit-5{ background:#F99;}
#lottery .lottery-unit-6{ background:#CC6;}
#lottery .lottery-unit-7{ background:#F99;}
#lottery .lottery-unit-8{ background:#CC6;}
#lottery .lottery-unit-9{ background:#F99;}
#lottery .lottery-unit-10{ background:#CC6;}
#lottery .lottery-unit-11{ background:#F99;}
#lottery div.select{background:#F0F;}
#lottery .start{ position:absolute; left:100px; top:100px; height:200px; width:200px;background:#C33; font-size:30px; text-align:center; cursor:pointer; line-height:200px; color:#fff;}
</style>
</head>
<body>
<div id="lottery">
   
   <div class="lottery-unit lottery-unit-0">1</div>
   <div class="lottery-unit lottery-unit-1">2</div>
   <div class="lottery-unit lottery-unit-2">3</div>
            <div class="lottery-unit lottery-unit-3">4</div>
            
            <div class="lottery-unit lottery-unit-11">12</div>            
            <div class="cent"></div>
            <div class="cent"></div>            
            <div class="lottery-unit lottery-unit-4">5</div>
            
            <div class="lottery-unit lottery-unit-10">11</div>            
            <div class="cent"></div>
            <div class="cent"></div>            
            <div class="lottery-unit lottery-unit-5">6</div>
        
   <div class="lottery-unit lottery-unit-9">10</div>
   <div class="lottery-unit lottery-unit-8">9</div>
   <div class="lottery-unit lottery-unit-7">8</div>
            <div class="lottery-unit lottery-unit-6">7</div>
 
   <div class="start">抽獎</div>
</div>
</body>
</html>

寫好告終構，結構優秀，jq不出20行就搞定了抽獎效果

4.燈箱效果實例

燈箱效果，也是網頁常見的瀏覽之一

靜態結構搭建：

<!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 
$(".dengback").height($(window).height());
//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*/
.deng{width:600px;margin:20px auto 0; position:relative;}
.deng div{width:130px;height:130px;text-align:centerfont-size:24px;color:#333; float:left; margin:0 10px 10px 0; background:#09C;}
.dengback{ position:absolute; width:100%; background:#000; opacity:0.4; z-index:99; top:0px; left:0px;}
.dengbig{ width:500px; height:500px; background:#FFF; position:absolute; left:50%; top:100px; margin-left:-250px; z-index:999;}
.close{ position:absolute; right:0px; top:0px; background:#933; width:50px; height:50px; line-height:50px; text-align:center; cursor:pointer;}
</style>
</head>
<body>
<div class="deng">
 <div class="lottery-unit" big="1111">1</div>
 <div class="lottery-unit" big="2222">2</div>
 <div class="lottery-unit" big="3333">3</div>
    <div class="lottery-unit" big="4444">4</div>
    <div class="lottery-unit" big="5555">5</div>
    <div class="lottery-unit" big="6666">6</div>
    <div class="lottery-unit" big="7777">7</div>
    <div class="lottery-unit" big="8888">8</div>
    <div class="lottery-unit" big="9999">9</div>
    <div class="lottery-unit" big="10">10</div>
</div>
<div class="dengback"></div>
<div class="dengbig"><span class="close">X</span></div>
</body>
</html>

遮罩和彈出的白色區域實在點擊下面列表顯示的，我作個示範。下面是

jq代碼：

<!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 
$(".dengback").height($(window).height());
$(".deng").find(".lottery-unit").click(function(){
 var i=$(this).index();
 $(".dengback").show();
 $(".dengbig").show();
 $(".dengbig").find(".nie").html($(".deng").find(".lottery-unit").eq(i).attr("big"));
  
});
$(".close").click(function(){
 var i=$(this).index();
 $(".dengback").hide();
 $(".dengbig").hide();  
});
//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*/
.deng{width:600px;margin:20px auto 0; position:relative;}
.deng div{width:130px;height:130px;text-align:centerfont-size:24px;color:#333; float:left; margin:0 10px 10px 0; background:#09C;}
.dengback{ position:absolute; width:100%; background:#000; opacity:0.4; z-index:99; top:0px; left:0px; display:none;}
.dengbig{ width:500px; height:500px; background:#FFF; position:absolute; left:50%; top:100px; margin-left:-250px; z-index:999;display:none;}
.close{ position:absolute; right:0px; top:0px; background:#933; width:50px; height:50px; line-height:50px; text-align:center; cursor:pointer;}
.nie{ padding:50px; height:400px;}
</style>
</head>
<body>
<div class="deng">
 <div class="lottery-unit" big="1111">1</div>
 <div class="lottery-unit" big="2222">2</div>
 <div class="lottery-unit" big="3333">3</div>
    <div class="lottery-unit" big="4444">4</div>
    <div class="lottery-unit" big="5555">5</div>
    <div class="lottery-unit" big="6666">6</div>
    <div class="lottery-unit" big="7777">7</div>
    <div class="lottery-unit" big="8888">8</div>
    <div class="lottery-unit" big="9999">9</div>
    <div class="lottery-unit" big="10">10</div>
</div>
<div class="dengback"></div>
<div class="dengbig">
 <span class="close">X</span>
    <div class="nie"></div>
</div>
</body>
</html>

此次燈箱顯示了，不過感受很low，不能燈箱的左右切換，咱們加上這些，而且使用jq提供的動畫顯示隱藏處理

修改：

<!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 
$(".dengback").height($(window).height());
var i;
$(".deng").find(".lottery-unit").click(function(){
 i=$(this).index();
 $(".dengback").fadeIn();
 $(".dengbig").fadeIn();
 setTimeout(function(){
  $(".dengbig").find(".nie").html($(".deng").find(".lottery-unit").eq(i).attr("big"));
 },500);
 
  
});
$(".dengl").click(function(){
 i-=1;
 if(i==-1){
  $(".dengbig").find(".nie").html($(".deng").find(".lottery-unit").eq($(".deng").find(".lottery-unit").length-1).attr("big"));
  i=$(".deng").find(".lottery-unit").length-1;
 }else{
  $(".dengbig").find(".nie").html($(".deng").find(".lottery-unit").eq(i).attr("big"));
 };
});
$(".dengr").click(function(){
 i+=1;
 if(i==$(".deng").find(".lottery-unit").length){
  $(".dengbig").find(".nie").html($(".deng").find(".lottery-unit").eq(0).attr("big"));
  i=0;
 }else{
  $(".dengbig").find(".nie").html($(".deng").find(".lottery-unit").eq(i).attr("big"));
 };
});
$(".close").click(function(){
 $(".dengbig").find(".nie").html("");
 $(".dengback").fadeOut();
 $(".dengbig").fadeOut();
});
//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*/
.deng{width:600px;margin:20px auto 0; position:relative;}
.deng div{width:130px;height:130px;text-align:centerfont-size:24px;color:#333; float:left; margin:0 10px 10px 0; background:#09C;}
.dengback{ position:absolute; width:100%; background:#000; opacity:0.4; z-index:99; top:0px; left:0px; display:none;}
.dengbig{ width:500px; height:500px; background:#FFF; position:absolute; left:50%; top:100px; margin-left:-250px; z-index:999;display:none;}
.close{ position:absolute; right:0px; top:0px; background:#933; width:50px; height:50px; line-height:50px; text-align:center; cursor:pointer;}
.nie{ padding:50px; height:400px;}
.dengl{ position:absolute; bottom:0px; right:70px; width:50px; height:20px; line-height:20px; background:#36F; cursor:pointer; color:#fff;}
.dengr{position:absolute; bottom:0px; right:10px;width:50px; height:20px; line-height:20px;background:#36F;cursor:pointer;color:#fff;}
</style>
</head>
<body>
<div class="deng">
 <div class="lottery-unit" big="1111">1</div>
 <div class="lottery-unit" big="2222">2</div>
 <div class="lottery-unit" big="3333">3</div>
    <div class="lottery-unit" big="4444">4</div>
    <div class="lottery-unit" big="5555">5</div>
    <div class="lottery-unit" big="6666">6</div>
    <div class="lottery-unit" big="7777">7</div>
    <div class="lottery-unit" big="8888">8</div>
    <div class="lottery-unit" big="9999">9</div>
    <div class="lottery-unit" big="10">10</div>
</div>
<div class="dengback"></div>
<div class="dengbig">
 <span class="close">X</span>
    <div class="nie"></div>
    <span class="dengl">左</span>
    <span class="dengr">右</span>
</div>
</body>
</html>

5.焦點圖效果實例

這個效果很是常見了，下面有對象的按鈕，一樣還有左右按鈕，還能自動播放，咱們看代碼：

<!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>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.css3box{ width:400px; height:500px; background:#FCC; border:1px solid #0F9; position:relative;}
.box-con{height:400px; width:400; overflow:hidden; position:relative;}
.box-con-item{ height:400px; width:400px; position:relative; background:#fff; float:left;}
.poa{ position:absolute; left:0px; width:1600px; height:400px;}
.box-list{ height:50px; line-height:50px;}
.box-list span{ float:left; margin:0 10px; padding:0 15px; cursor:pointer; background:#09F; height:50px;}
.box-list span.focus{ color:#3CF;}
.btn-list-left{ position:absolute; left:10px; top:200px; height:40px; width:40px; background:#09C; cursor:pointer;}
.btn-list-right{position:absolute; right:10px; top:200px; height:40px; width:40px; background:#09C; cursor:pointer;}
.box-con-item .zz{background:#C60; width:50px; height:0px; position:absolute; bottom:0px;}
.box-con-item .zz1{left:10px;}
.box-con-item .zz2{left:110px;}
.box-con-item .zz3{left:210px;}
.box-con-item .zz4{left:110px;}
.box-con-item .zz5{left:210px;}
/*code css3*/
.active .zz1{ animation:zfirst 2s ease-out forwards;}
.active .zz2{ animation:zfirst2 2s ease-out 2s forwards;}
.active .zz4{ animation:zfirst4 2s ease-out forwards;}
.active .zz5{ height:150px;}
@keyframes zfirst{0% {height:0px; }   100%{height:100px; }}
@keyframes zfirst2{0% {height:0px; }   100%{height:150px; }}
@keyframes zfirst4{0% {height:0px; }   100%{height:150px; }}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
 $(".box-list").children().click(function(){
  $(this).addClass("focus").siblings().removeClass("focus");
  var aa=$(this).index();
  i=aa;
  $(".poa").children().eq(aa).addClass("active").siblings().removeClass("active");
  $(".poa").css('left',-aa*400);
 }); 
 
 var i=0;
 var ji=$(".poa").children().length;
 
 var ani=setInterval(anid,5000);
 function anid(){
  i+=1;
  if(i>=ji){   
   $(".poa").children().eq(0).addClass("active").siblings().removeClass("active");
   $(".poa").css('left',0);
   $(".box-list").children().eq(0).addClass("focus").siblings().removeClass("focus");
   i=0;
  }else{
   $(".poa").children().eq(i).addClass("active").siblings().removeClass("active");
   $(".poa").css('left',-i*400);
   $(".box-list").children().eq(i).addClass("focus").siblings().removeClass("focus");
  };
 };
 
 $(".css3box").hover(function(){
  clearInterval(ani);
 },function(){ani=setInterval(anid,5000);});
 
 $(".btn-list-left").click(function(){
  if(i<=0){
   $(".box-list").children().eq(ji-1).addClass("focus").siblings().removeClass("focus");
   $(".poa").children().eq(ji-1).addClass("active").siblings().removeClass("active");
   $(".poa").css('left',-(ji-1)*400);
   i=ji-1; 
  }else{
   $(".box-list").children().eq(i-1).addClass("focus").siblings().removeClass("focus");
   $(".poa").children().eq(i-1).addClass("active").siblings().removeClass("active");
   $(".poa").css('left',-(i-1)*400);
   i-=1;
  }   
 });
 $(".btn-list-right").click(function(){
  if(i>=ji-1){
   $(".box-list").children().eq(0).addClass("focus").siblings().removeClass("focus");
   $(".poa").children().eq(0).addClass("active").siblings().removeClass("active");
   $(".poa").css('left',0);
   i=0; 
  }else{
   $(".box-list").children().eq(i+1).addClass("focus").siblings().removeClass("focus");
   $(".poa").children().eq(i+1).addClass("active").siblings().removeClass("active");
   $(".poa").css('left',-(i+1)*400);
   i+=1;
  }  
 });
 
//end
})
</script>
</head>
<body>
 <div class="css3box">
     <div class="box-con">
         <div class="poa">
                <div class="box-con-item active">
                    <div class="zz zz1"></div>
                    <div class="zz zz2"></div>
                </div>
                <div class="box-con-item" >
                    <div class="zz zz4"></div>
                </div>
                 <div class="box-con-item">
                    <div class="zz zz4"></div>
                </div>
                 <div class="box-con-item">
                    <div class="zz zz1"></div>
                    <div class="zz zz2"></div>         
                </div>
         </div>
        </div>
        <div class="box-list">
         <span class="focus">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <span class="btn-list-left">l</span>
        <span class="btn-list-right">r</span>
        
    </div> 
</body>
</html>

6.全屏漂浮廣告效果實例

直接代碼：

<!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 fu=$("#fu");
     var hengw=$(window).width()-200;
     var hengh=$(window).height()-200;
     var zx=1;
     var zy=1;
     var dong=setInterval(function(){
        var eley=fu.position().top;
        var elex=fu.position().left;        
        eley=eley+zx*1;
        elex=elex+zy*1; 
        if(eley>hengh){zx=-1;};
        if(eley<0){zx=1;};
        if(elex>hengw){zy=-1;};
        if(elex<0){zy=1;};
         fu.css('top',eley);
         fu.css('left',elex);
                    
     },10);
     fu.hover(function(){
    clearInterval(dong);
  },function(){
  dong=setInterval(function(){
            var eley=fu.position().top;
            var elex=fu.position().left;        
            eley=eley+zx*1;
            elex=elex+zy*1; 
            if(eley>hengh){zx=-1;};
            if(eley<0){zx=1;};
            if(elex>hengw){zy=-1;};
            if(elex<0){zy=1;};
            fu.css('top',eley);
          fu.css('left',elex);
                        
         },10);
  
  });
//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*/
</style>
</head>
<body>
<div id="fu" style="position:absolute; left:0px;top:0px; background:#ffa;width:200px;height:200px; ">123</div>
<p style="height:1500px;"></p>
</body>
</html>

7.關鍵詞搜索補全效果實例

<!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 conl=$("#seocon").find("option").length;//獲取option總數量
 var cono=$("#seocon").find("option");//option節點
 var cona=[];//空數組，存儲每一個option值
 for(var i=0;i<conl;i++){
  cono.eq(i).attr('name',i);//按索引，給option添加name屬性
  cona.push(cono.eq(i).html());//數組存放全部option值
 };
 $("#seo").keyup(function(event){
  //搜索框輸入內容事件
  var nowl=$("#seocon").find("option").length;//繼續輸入數值，存儲當前option個數，變化後
  if(nowl<conl){//當前option小於原始個數
   $("#seocon").find("option").remove();//option所有刪除
   for(var i=0;i<conl;i++){
    $("#seocon").append('<option name="'+i+'">'+cona[i]+'</option>');//把原始的option重新插入到select中，添加好name屬性和裏面內容   
   };
  }
  var seotext=$(this).val();//搜索框內容
  for(i=0;i<conl;i++){
   //alert($("#seocon").find("option[name='"+i+"']").html());
   if($("#seocon").find("option[name='"+i+"']").html().match(seotext)){//若是option內容包含搜索框內容
    //不處理
   }else{
    $("#seocon").find("option[name='"+i+"']").remove();//把節點remove
   }
  } 
 });
 $("#seocon").find("option").click(function(){
  $("#seo").val($(this).html());
 });
//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*/
</style>
</head>
<body>
<div>聯動搜索：</div>
<p>
 搜索：<input type="text" id="seo"/>
</p>
<p>
 顯示：<select name="" id="seocon" size="5">
  <option value="">誒接健健康康</option>
  <option value="">你級空間連接</option>
  <option value="">太456</option>
  <option value="">玩家將可以可靠</option>
  <option value="">破骨毛利率嘎嘎嘎嘎嘎嘎</option>
  <option value="">111111111111111111</option>
  <option value="">222222222222222222222</option>
  <option value="">333333333333333333</option>
  <option value="">4444444444444444444</option>
  <option value="">555555555555555555555</option>
  <option value="">55555555555555556665</option>
 </select>
</p>
</body>
</html>