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，劃分等級的話，這些的處理都是屬於初級，實例咱們還會繼續開發下去，不過就不會作這種初級的常實現了，會在其餘系列作複雜的效果！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程