平日收集有價值的網頁頗多,而收集資料并不是一件快樂的事情,反而越多越給內心壓力,困擾自己的同時,也錯失了提高的時機。因此此系列文章意在探討前端的編程所感,亦是疏解內心壓力,自我提高的途徑。此偏文章涉及內容均來自[網友博客](http://blog.csdn.net/blatar/article/category/1229834)。
示例一:
~~~
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>bar</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#time_back{width:300px;height:20px;border:1px solid #246;background:#CCC}
#time_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#input_time").change(function(){//輸入框中數值一旦變化,則觸發change函數
var rate = $(this).attr("value");
changebar("#time_bar",rate,"red");
});
/**
* 更新進度條
* @ param obj 進度條id
* @ param rate 進度,0-100間的整數
* @ param deadColor 當進度超過一定值(默認80)的顏色
*/
function changebar(obj,rate,deadColor){
if(undefined!=deadColor&&rate>80){
$(obj).css({"background":deadColor})
}
rate = rate%100 + "%";
$(obj).animate({width:rate},1000);
$(obj).html(rate);
}
});
</script>
<body>
日期:<div id="time_back" ><div id="time_bar" ></div></div>
<input type="text" id="input_time" />
</body>
</html>
~~~
**這個例子制作工具條的例子,非常簡單。外層div,內層嵌套一個div,用animate函數設置內層背景顏色和文字,通過change方法觸發使得整個頁面呈現出響應和動態的效果。**
示例二:
~~~
$(document).ready(function(){
//滾動事件,滾動window元素時,調用滾動事件
$(window).scroll(function(){
//顯示滾動條位置
$(".fixed").html(document.body.scrollTop||document.documentElement.scrollTop);
var t = document.body.scrollTop||document.documentElement.scrollTop;
//當導航條不可見時,重新定義導航條位置
if(t>100){//100為導航欄高度
$("#nav").css({
"position":"fixed",
"top" :"0px",
"left" :"0px"
});
}else{
//回到導航條原來位置時,還原導航條位置
$("#nav").css({
"position":"",
"top" :"",
"left" :""
});
}
});
});
~~~
**這段代碼則是通過滑動滾動條來觸發函數,并且通過導航與瀏覽器頂部的距離作為條件,修改id為nav的位置,意在使nav這個元素始終保持在視野中的頂部。**
示例三:
~~~
$(document).ready(function(){
// 初始化內容
for(var i = 0 ; i < 3 ; i++){
$(".flow").each(function(){
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
});
}
$(window).scroll(function(){
// 被卷去的高度
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
// 頁面高度
var pageHeight = $(document).height();
// 可視區域高度
var viewHeight = $(window).height();
//alert(viewHeight);
//當滾動到底部時
if((scrollTop+viewHeight)>(pageHeight-20)){
if(scrollTop<1000){//防止無限制的增長
for(var i = 0 ; i < 2 ; i++){
$(".flow").each(function(){
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
});
}
}
}
});
});
/*
* 獲取指定范圍隨機數
* @param min,最小取值
* @param max,最大取值
*/
function getRandom(min,max){
//x上限,y下限
var x = max;
var y = min;
if(x<y){
x=min;
y=max;
}
var rand = parseInt(Math.random() * (x - y + 1) + y);
return rand;
}
~~~
?
**這段代碼是典型瀑布流構造的代碼,只需要加入圖片到div內部即可。通過滾動條觸發函數,使得在一定范圍內,隨機加載div寬度,連接到原有div之后,構成邊拉邊加載的效果。**
示例四:
~~~
$.extend({
wordScroll:function(opt,callback){
//alert("suc");
this.defaults = {
objId:"",
width:300, // 每行的寬度
height:100, // div的高度
liHeight:25, // 每行高度
lines:2, // 每次滾動的行數
speed:1000, // 動作時間
interval:2000, // 滾動間隔
picTimer:0, // 間隔句柄,不需要設置,只是作為標識使用
isHorizontal:false // 是否橫向滾動
}
//參數初始化,看是否有新的參數傳入,傳入則更新初始化設置
var opts = $.extend(this.defaults,opt);
// 縱向橫向通用
$("#"+opts.objId).css({
width:opts.width,
height:opts.height,
"min-height":opts.liHeight+"px",
"line-height":opts.liHeight+"px",
overflow:"hidden"
});
$("#"+opts.objId+" li").css({
height:opts.liHeight
});
if(opts.lines==0)
opts.lines=1;
// 橫向滾動
if(opts.isHorizontal){
$("#"+opts.objId).css({
width:opts.width*opts.lines + "px"
});
$("#"+opts.objId+" li").css({
"display":"block",
"float":"left",
"width":opts.width + "px"
});//水平則行內顯示
$("#"+opts.objId+" ul").css({
width:$("#"+opts.objId).find("li").size()*opts.width + "px"// 輸出li選擇器的數量,乘以寬度
}); // 橫向使用,不夠一屏則不滾動
if($("#"+opts.objId).find("li").size()<=opts.lines)
return;
var scrollWidth = 0 - opts.lines*opts.width;
}else{
//如果不夠一屏內容 則不滾動
if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10))
return;
var upHeight=0-opts.lines*opts.liHeight;
}
// 橫向滾動
function scrollLeft(){
$("#"+opts.objId).find("ul:first").animate({
marginLeft:scrollWidth
},opts.speed,function(){
for(i=1;i<=opts.lines;i++){
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
}
$("#"+opts.objId).find("ul:first").css({marginLeft:0});
});
};
// 縱向滾動
function scrollUp(){
$("#"+opts.objId).find("ul:first").animate({
marginTop:upHeight
},opts.speed,function(){
for(i=1;i<=opts.lines;i++){
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
}
$("#"+opts.objId).find("ul:first").css({marginTop:0});
});
};
//鼠標滑上焦點圖時停止自動播放,滑出時開始自動播放
$("#"+opts.objId).hover(function() {
clearInterval(opts.picTimer);
},function() {
opts.picTimer = setInterval(function() {
// 判斷執行橫向或縱向滾動
if(opts.isHorizontal)
scrollLeft();
else
scrollUp();
},opts.interval); // 自動播放的間隔,單位:毫秒
}).trigger("mouseleave");
}
})
~~~
**這段代碼是一個使文字橫向或者縱向滾動的插件,如果想了解清楚插件的工作原理大體需要看這[兩個](http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html)[網頁](http://www.css88.com/jqapi-1.9/jQuery.extend/)了解了extend函數的用法即可。在了解extend用法之后,就可以找一下插件了如上前三段代碼的聯系了。jquery插件與如上三段代碼的區別在于通過extend方法后,內部的對象wordScroll就成了jquery包含的對象了,引用的時候可以這樣:**
~~~
$.wordScroll({
});
~~~
**插件內都會設置一些default屬性,當有部分變量傳入時,與默認重復的會被覆蓋成傳入的,未傳入的仍會保持原樣。如下代碼實現此功能:**
~~~
var opts = $.extend(this.defaults,opt);
~~~
剩余內容就是上述四段代碼的共同點了,在代碼內完成結構、樣式、交互邏輯代碼的設計,也就是說,用上extend函數和如上一行代碼,就可以輕松實現jquery功能的擴展即插件。此篇引用博主的文章前幾篇都是插件的使用。插件的確增加了“簡單可依賴”的特點,增加了封裝性,但封裝涉及交互、樣式和結構,降低了代碼的可讀性,以此看來插件的開發是把雙刃劍。
- 前言
- 前端編程提高之旅(一)----插件
- 前端編程提高之旅(二)----網站常見特效的jquery實現
- 前端編程提高之旅(三)----瀏覽器兼容之IE6
- 前端編程提高之旅(四)----backbone初體驗
- 前端編程提高之旅(五)----寫給大家看的css書
- 前端編程提高之旅(六)----backbone實現todoMVC
- 前端編程提高之旅(七)----marionette實現todoMVC
- 前端編程提高之旅(八)----D3.js數據可視化data join解析
- 前端編程提高之旅(九)----延遲對象
- 前端編程提高之旅(十)----表單驗證插件與cookie插件
- 前端編程提高之旅(十一)----jquery代碼的組織
- 前端編程提高之旅(十二)----position置入值應用
- 前端編程提高之旅(十三)----jquery選擇器
- 前端編程提高之旅(十四)----jquery DOM操作
- 前端編程提高之旅(十五)----jquery事件
- 前端編程提高之旅(十六)----jquery中的動畫
- 前端編程提高之旅(十七)----jquery中表單、表格和ajax
- 前端編程提高之旅(十八)----移動端web流行交互技術方案研究