JS三教九流系列-jquery实例开发到插件封装

我们先写实例，然后在分装为插件，最后做更高级的处理！

封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688

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();
});  
//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();
   });
  });
 }
});
//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>
时间： 2024-10-05 07:26:02

JS三教九流系列-jquery实例开发到插件封装的相关文章

JS三教九流系列-jquery实例开发到插件封装3

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址  http://my.oschina.net/u/2352644/blog/490827 8-17实例地址 http://my.oschina.net/u/2352644/blog/491933 效果目录: 18.计数增加效果 19.模仿3d的焦点图效果 20.倒计时效果 21.导航滚动监听 18.计数增加效果 我

JS三教九流系列-jquery实例开发到插件封装2

我们先写实例,然后有必要在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 前面的7个实例在这里 http://my.oschina.net/u/2352644/blog/490827 效果目录: 8.商品数量加减效果 9.星星评分效果 10.刮刮卡效果 11.圆形大转盘抽奖效果 12.贪食蛇小游戏效果 13.video的html5视频播放器 14.可拖拽的登陆框 15.树形菜单效果 16.全选/反全选处理

JS三教九流系列-jquery实例开发到插件封装4

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 1-7实例地址  http://my.oschina.net/u/2352644/blog/490827 8-17实例地址 http://my.oschina.net/u/2352644/blog/491933 18-23实例地址 http://my.oschina.net/u/2352644/blog/497003 效果目录:

把jQuery的类、插件封装成seajs的模块的方法

这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(function () { //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict(); }); 调用方法: 这样引进就可以像以前一样使用jquery define(function (require, exports, module) { var $

JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他类库,还有自己写的js或者jq代码等.一个html页面会有n多个script标签对外部js的引用,是不是感觉这样的页面会非常的混乱,如果我们可以只用一个script标签载入一个js文件,这个js文件把其他需要的js文件能全部加载进去,并且按着之间依赖关系执行,是不是一个页面就非常的整洁和容易扩展处

JS三教九流系列-Zepto.js-为移动端开发的类库

zepto.js的api地址 http://www.css88.com/doc/zeptojs_api/ 类库源码下载http://www.zeptojs.cn/ 滚动当前页面,看到这部分点击下载 和使用jquery一样,我们只要html页面引入即可.zepto的api与jq几乎一样,同时各个接口名字也是一样的,我们只要按着写jq一样去写zepto就好了,既然这样,我们为何要用zepto,主要就是zepto提供时触摸事件,为开发移动端的更好处理. jq是为多个浏览器支持的类库,并没有封装上tou

BlueDream.js(蓝梦)——jQuery网站使用引导插件

小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件. 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门. 这应该是个常见的功能,做成插件也不是什么难事,既然现在还比较少,那小菜就写一个吧! 于是BlueDream.js诞生了...因为此插件的设计色调为蓝色,因此起名"蓝梦". 简介: BlueDream.js是一款用户引导插件,可以让您的网站更容易入门. BlueDream.js依赖jQuery,因此自身

JQuery分页插件封装（源码来自百度，自己封装）

最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运行看看,下图是文件目录展示. html <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…. //…… }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦. 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery