1. 技术文章
  2. JS三教九流系列-jquery实例开发到插件封装1

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

由 梦想与她 提交于 2020-03-02 01:27:14

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

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

效果目录：

1.tab切换效果的实例和封装

2.带左右按钮图片滚动效果的实例和封装

3.九宫格大转盘的实例

4.灯箱效果实例

5.焦点图效果实例

6.全屏漂浮广告效果实例

7.关键词搜索补全效果实例

 

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>

 

标签
js
jq
jq实例开发
js小实例原理分析
jq切换效果
jq九宫格大转盘
jq灯箱效果
jq焦点图效果
jq全屏漂浮广告
jq关键字搜索自动补全
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!