文档章节

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

透笔度
 透笔度
发布于 2015/08/25 18:17
字数 2777
阅读 226
收藏 11

我们先写实例,然后可能需要在封装为插件,最后做更高级的处理!

封装插件基础学习 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.导航滚动监听 

22.图片预加载

23.滚动事件触发图片预加载

 

18.计数增加效果

我们在浏览网页,有的页面会有对会员注册人数的显示,并且是从0增加到指定值的,动态增长

其实原理很简单,我们指定目标值,然后指定增长速度,间隔函数不断从0开始累加增长速度,超过目标值清空间隔函数即可!

代码实现:

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

19.模仿3d的焦点图效果

这样一种焦点图效果,中间的比较大,两侧依次变小,并且被压住一部分,

原理:点击触发切换,将所有元素通过jq的each遍历,判断当前的位置,根据切换方向,对当前位置、层高。大小等属性做出css的更改

实现代码:

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

20.倒计时效果

倒计时的原理:传入指定时间(当前做秒数的处理),调用间隔函数,执行时间为一秒;秒数时间/60获取分钟,秒数时间%60取得余数,得到秒数,

代码如下:

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

 21.导航滚动监听

 原理:window监听滚动事件,返回滚动值;创建数组,存放所有标题锚点相对页面顶部的top值;滚动值与所有锚点top值做差值,获取最小值在数组位置

代码:

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

 22.图片预加载

原理:我们知道dom对象具有load事件,加载完成事件,我们根据将处理程序放在img的load事件内部处理就可以了,只要img加载完,里面的处理就会执行,当然图片比较多还需要额外的处理

代码:

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

属于模拟测试,我们引入外部较大图片,会出现加载过程,我们会发现只有图片全部加载完毕才会触发alert(),我们把处理代码放在alert位置替换就可以了!每次ctrl+f5强制刷新查看!

23.滚动事件触发图片预加载

原理:分页原理,初始设置为第一页,滚动监听滚动到指定位置,加载第二页,实际是给要显示的img加入src属性

分页变量page=1; 显示数量count=n; 当前显示页数 (page-1)*count至(page-1)*count+count遍历,实现当前页内容显示

代码:

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

 

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西...

柒月-小妖精
2013/09/06
107
0
jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn....

i33
2012/06/29
119
0
jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

crazyinsomnia
2010/01/10
1K
2
JS杂谈系列-jquery-插件开发小记

//=======================start(function ($) {//扩展 必须$.fn.extend({ //插件名称 必须colh: function (options) {//默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)va...

透笔度
2015/08/04
438
1

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
10
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
8
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
11
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部