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

时间 2019-11-10

标签三教九流系列 jquery 实例开发插件封装栏目 JavaScript 繁體版

原文原文链接

咱们先写实例，而后可能须要在封装为插件，最后作更高级的处理！javascript

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

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

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

18-23实例地址 http://my.oschina.net/u/2352644/blog/497003 jquery

效果目录：web

24.页面滚动时部分结构相对窗口定位express

25.返回顶部app

26.无缝滚动ide

27.多行文本框字数限制效果学习

28.表单验证

29.移动列表切换焦点图

30.下拉框选项左右移动

24.页面滚动时部分结构相对窗口定位

原理：获取元素相对页面的top值作判断标准，不断监听窗口滚动条的位置，超过这个top值，加入position:fixed属性，实现窗口固定，小于这个top值移除属性，恢复为默认页面位置（针对ie6对fixed的不支持问题，写入css的hack：position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop)); 利用支持的absolute和对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 i=0;
 var objtop=$("#fixa").offset().top;
 $(window).scroll(function(){
  i=$(window).scrollTop();
  if(i>=objtop)
  {
   $("#fixa").addClass('se')
  }else
  {
   $("#fixa").removeClass('se')
  }
 })
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.fou{ width: 1000px; height: 2000px; background: #faa;margin: 0 auto;}
/*抖动问题ie6*/
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
/*让position:fixed在IE6下可用! */ 
div.se{position:fixed;bottom:auto;top:0px;background: #000; color: #fff; width: 1000px;height: 30px;}
/*xxx{position:fixed;bottom:auto;top:0px;}*//* 头部固定 */
/*xxx{position:fixed;bottom:0px;top:auto;}*//* 底部固定 */
/*xxx{position:fixed;right:auto;left:0px;}*//* 左侧固定 */
/*xxx{position:fixed;right:0px;left:auto;}*//* 右侧固定 */
/* IE6 头部固定 */
*html div.se{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
/* IE6 右侧固定 */
/** html .fixed-right  {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
*//* IE6 底部固定  */
/** html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}*/
/* IE6 左侧固定 */
/** html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}*/
#fixa{background:#000;height: 30px;color: #fff;}
</style>
</head>
<body>
<div class="fou">
 <div style="height:400px;">124564</div>
 <div id="fixa">
 <div class="ddd">
 <span>111</span>
 <span>222</span>
 <span>3333</span>
 <span>4444</span>
 <span>5555</span>
 </div>
 </div>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br> 
</div>
</body>
</html>

25.返回顶部

原理：返回顶部就是将html元素的scrollTop设置为0；咱们能够经过jq的动画去设置，实现缓冲效果（对滚动值的赋值咱们是对html元素，获取值是对window对象

注意：scroll事件是加在window上的，获取这个滚动事件的top值也能够经过window获取，可是给页面的设置scrolltop的值，在动画处理中要在html或者body元素上（火狐支持html的scrolltop动画处理，谷歌支持body的scrolltop动画处理），非动画处理能够再window上（取值$(window).scroll();赋值：$(window).scrollTop(val);$("html,body"))animate({scrollTop:val},duration);）

代码：

<!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-min.js"></script>
<script type="text/javascript">
$(function(){
//start 
 $(".gotop0").click(function(){
  $('html,body').scrollTop(0);
 });
 $(".gotop").click(function(){
  $('html,body').animate({
   scrollTop:0
  },500);
 });
 $(".gotop2").click(function(){
  $('html,body').animate({
   scrollTop:0
  },500);
 });
 var wheight=$(window).height()/2;
 if($(window).scrollTop()>=wheight){
   $(".gotop2").fadeIn();
  }else{
   $(".gotop2").fadeOut();
  };
 $(window).scroll(function(){
  if($(window).scrollTop()>=wheight){
   $(".gotop2").fadeIn();
  }else{
   $(".gotop2").fadeOut();
  };
 });
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.gotop0{ height:100px; width:100px; right:0px; bottom:350px; position:fixed; background:#09F;}
.gotop{ height:100px; width:100px; right:0px; bottom:200px; position:fixed; background:#09F;}
.gotop2{ height:100px; width:100px; right:0px; bottom:50px; position:fixed; background:#09F; display:none;}
</style>
</head>
<body>
<div style="height:2000px;">
  
</div>
<span class="gotop0">返回顶部1</span>
<span class="gotop">返回顶部2</span>
<span class="gotop2">返回顶部3</span>
</body>
</html>

26.无缝滚动

原理：利用父容器超出隐藏，子元素做为滚动对象，滚动对象的宽度等与内部个数2倍，为了就是在循环到一圈后，保证拖拽为起始位置不出现空白问题

代码：

<!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 len=$(".marque").children("a").length;
	var objw=$(".marquebox").width();
	$(".marque").css('width',len*objw*2);
	var clo=$(".marque").children("a").clone();	
	$(".marque").append(clo);	
	var speed=2;
	var setin=setInterval(dong,20);
	function dong(){
		var objl=$(".marque").position().left-speed;
		if(objl<=-len*objw){
					
			$(".marque").css('left',0);
		}else{
			$(".marque").css('left',objl);
			
		};
		
	};
	$(".marque").children("a").hover(function(){
		clearInterval(setin);
	},function(){
		setin=setInterval(dong,20);
	});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.marquebox{ position: relative; height:100px; width:200px; background:#FCC; overflow:hidden; margin:100px;}
.marque{ position:absolute; left:0px; top:0px; height:100px;}
.marque a{ float:left; height:100px; width:200px; line-height:100px; text-align:center;}
.marqueadd{ position:absolute; left:0px; top:0px; height:100px; width: 200px;}
</style>
</head>
<body>
<div class="marquebox">
	<div class="marque">
        <a href="#2">111111111111</a>
        <a href="#2">222222222222</a>
        <a href="#2">3333333333</a>
    </div>
    
</div>
</body>
</html>

27.多行文本框字数限制效果

原理：文本框改变事件的监听，对内部数字个数的判断

代码：

<!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 
$("#maxcharfield").keyup(function(){
 var count=$(this).val().length;
 textCounter(count,20);
});
$("#maxcharfield").keydown(function(){
 var count=$(this).val().length;
 textCounter(count,20);
});
//end
});
 function textCounter(count,allc){
  var reval;
  if(count>allc){
   reval=$("#maxcharfield").val().substr(0,allc);
   setcolor(allc,allc)
  }else{   
   reval=$("#maxcharfield").val();
   setcolor(count,allc)
  };
  $("#maxcharfield").val(reval);
 };
 
 function setcolor(realc,allc){  
  var percent=(realc/allc)*100;
  $(".pros").css('width',percent+"%");
 };
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
#maxcharfield{ width:600px; height:200px; line-height:20px;}
.progress{
 width: 600px;
 height: 18px;
 font-size: 12px;
    overflow: hidden;
 background:#999;
}
.pros{
 width: 0;
 height: 18px;
 font-size: 12px;
    overflow: hidden;
 background:#06F;
}
</style>
</head>
<body>
<textarea name="maxcharfield" id="maxcharfield" ></textarea>
<div id="progressbar1" class="progress">
 <div class="pros"></div>
</div>
</body>
</html>

28.表单验证

原理：检测文本框的内容是否符合规定的要求，咱们就监听blur失去焦点事件去处理

代码：

<!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 
 
 $("#user").blur(function(){
  var userval=$.trim($(this).val());
  if(userval.length<6){
   $(this).next().html("不能小于6位")
   $(this).val(""); 
   $("#user").focus(); 
  }else if(userval.length>10){
   $(this).next().html("不能大于10位")
   $(this).val("");
   $("#user").focus(); 
  }else{
   $(this).next().html("")
  }
  
 });
 
 $("#phone").blur(function(){
  var userval=$.trim($(this).val());
  var reg=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  var res=reg.test(userval);
  if(!res){
   $(this).next().html("手机号格式错误")
   $(this).val("");
   $("#phone").focus(); 
  }else{
   $(this).next().html("")
  }
  
 }); 
 
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}

</style>
</head>
<body>
<p>用户名：<input type="text" id="user" /><span></span></p>
<p>手机号：<input type="text" id="phone" /><span></span></p>
</body>
</html>

29.移动列表切换焦点图

原理：根据选项卡位置，作出头尾判断，是否列表移动（测试时，载入正确路径）

代码：

<!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 inde=null;
  var len=$(".nav li").length;
  $(".nav li").click(function(){
 
   if($(this).index()==0||$(this).index()==1)
   {
    $(".nav").animate({
    left:0})
   }
   else if($(this).index()==(len-2)||$(this).index()==(len-1)){
    $(".nav").animate({
    left:-(len-3)*$(".nav li").width()  
    })
   }
    else{
   $(".nav").animate({
    left:0-($(this).index()-1)*$(".nav li").width() 
   })
   }
   inde=$(this).index();
   $(".box1 img").eq($(this).index()).show().siblings().hide();
  })
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
ul{ list-style:none;}

.box{ height: 50px; width: 300px; margin: 10px; position: relative;overflow: hidden;border:1px solid #999;}
.nav{ height:50px; position: absolute;top:0; left: 0px;}
.nav li{ float: left;height:50px; width:50px; cursor:pointer;}
.nav img{ height:50px; width:50px; }
.box1{ width: 300px; height: 300px; overflow:hidden;position: relative; border:1px solid #999;}
.box1 img{display:none;}
</style>
</head>
<body>
<div class="box1">
 <img src="img/b1.jpg" alt="1" style="display:block;">
 <img src="img/b2.jpg" alt="2">
 <img src="img/b3.jpg" alt="3">
 <img src="img/b4.jpg" alt="4">
 <img src="img/b1.jpg" alt="5">
 <img src="img/b2.jpg" alt="6">
 <img src="img/b3.jpg" alt="7">
 <img src="img/b4.jpg" alt="8">
</div>
<div class="box">
 <ul class="nav">
  <li><img src="http://pic.nipic. com/2007-11-12/2007111212424561_2.gif" alt="1"></li>
  <li><img src="http://img2.imgt n.bdimg.com/it/u=1292662832,1364251236&fm=21&gp=0.jpg" alt="2"></li>
  <li><img src="http://pic.nipic. com/2007-11-12/2007111212424561_2.gif" alt="3"></li>
  <li><img src="http://img2.imgtn .bdimg.com/it/u=1292662832,1364251236&fm=21&gp=0.jpg" alt="4"></li>
        <li><img src="http://pic.nipic. com/2007-11-12/2007111212424561_2.gif" alt="5"></li>
  <li><img src="http://img2.imgtn. bdimg.com/it/u=1292662832,1364251236&fm=21&gp=0.jpg" alt="6"></li>
        <li><img src="http://pic.nipic. com/2007-11-12/2007111212424561_2.gif" alt="7"></li>
  <li><img src="http://img2.imgtn.b dimg.com/it/u=1292662832,1364251236&fm=21&gp=0.jpg" alt="8"></li>
        <li><img src="http://pic.nipic. com/2007-11-12/2007111212424561_2.gif" alt="9"></li>
  <li><img src="http://img2.imgtn.b dimg.com/it/u=1292662832,1364251236&fm=21&gp=0.jpg" alt="10"></li>
 </ul>
</div>
</body>
</html>

30.下拉框选项左右移动

原理：设置下拉框size属性，规定显示个数，选中的option具备selected属性，将全部有此属性的选项移动

代码：

<!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 left=$("#left");
var right=$("#right");
var leftoptions=left.children("option");
var rightoptions=right.children("option");
var movel=$("#movel");
var mover=$("#mover"); 
movel.click(function(){
 leftoptions=left.children("option");
 var arrl=[];
 leftoptions.each(function(index, element) {
  if($(this).prop('selected')){
   arrl.push($(this));
  };
 });
 for(var i=0;i<arrl.length;i++){
  right.append(arrl[i]);
 };
});
mover.click(function(){
 rightoptions=right.children("option");
 var arrr=[];
 rightoptions.each(function(index, element) {
  if($(this).prop('selected')){
   arrr.push($(this));
  };
 });
 for(var i=0;i<arrr.length;i++){
  left.append(arrr[i]);
 };
}); 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}

</style>
</head>
<body>
<select id="left" style="width:100px;" size="5" multiple>
    <option>11111</option>
    <option>22222</option>
    <option>333333</option>
    <option>4444444</option>
    <option>5555555</option>
</select>
<span id="movel">右移动</span>
<span id="mover">左移动</span>
<select id="right" style="width:100px;" size="5" multiple>
     
</select>
</body>
</html>

结束语：这是基于jq开发网页经常使用小实例的最后一部分，大概有30个demo，划分等级的话，这些的处理都是属于初级，实例咱们还会继续开发下去，不过就不会作这种初级的常实现了，会在其余系列作复杂的效果！！！