轻便的XMLHttpRequest应用函数,html5实现多文件的上传示例代码

javascript小例子:實現四方向文本无缝滚动效果,實現

实现一个文本无缝滚动的效果:

<!DOCTYPE html> <!–[if lt IE 7 ]> <html lang=”zh-CN”
class=”ie6″> <![endif]–> <!–[if IE 7 ]> <html
lang=”zh-CN” class=”ie7″> <![endif]–> <!–[if IE 8
]> <html lang=”zh-CN” class=”ie8″> <![endif]–>
<!–[if IE 9 ]> <html lang=”zh-CN” class=”ie9″>
<![endif]–> <!–[if (gt IE 9)|!(IE)]><!–>
<html lang=”zh-CN”> <!–<![endif]–> <head>
<title>文字滚动</title> <meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8″/> <style type=”text/css”>
*{margin:0;padding:0;} .home-page{padding:20px;} .textbox{border:1px
solid #ddd;width:auto;overflow: hidden;} .textbox ul{list-style:
none;position: relative;} .textbox ul li{padding:5px 0;} </style>
</head> <body class=”home-page”> <div id=”textbox”
class=”textbox”> <ul> <li>汽车 | 运动B级车降3万5
</li> <li>家居 | 这么厉害的装修
女人真的要坐不住了</li> <li>教育 |
各省前三报考华工重奖10万元/人</li> <li>汽车 |
运动B级车降3万5 平行进口车加价11万</li> <li>健康 |
滥用激素酿苦果 14岁男孩10年不长个儿</li> <li>数码 |
最新手机报价 说好的宽带降费提速呢?</li> <li>汽车 |
平行进口车加价11万</li> <li>汽车 |
运动B级车降3万5</li> <li>汽车 |
平行进口车加价11万</li> <li>运动 | 恒大亚冠生死战
猜比分赢正版球衣</li> </ul> <a href=”#”
class=”btnPrev”>向左</a> <a href=”#”
class=”btnNext”>向右</a> </div> <br> <br>
<div id=”textbox2″ class=”textbox”> <ul> <li>汽车 |
运动B级车降3万5 </li> <li>家居 | 这么厉害的装修
女人真的要坐不住了</li> <li>教育 |
各省前三报考华工重奖10万元/人</li> <li>汽车 |
运动B级车降3万5 平行进口车加价11万</li> <li>健康 |
滥用激素酿苦果 14岁男孩10年不长个儿</li> <li>数码 |
最新手机报价 说好的宽带降费提速呢?</li> <li>汽车 |
平行进口车加价11万</li> <li>汽车 |
运动B级车降3万5</li> <li>汽车 |
平行进口车加价11万</li> <li>运动 | 恒大亚冠生死战
猜比分赢正版球衣</li> </ul> <a href=”#”
class=”btnPrev”>向上</a> <a href=”#”
class=”btnNext”>向下</a> </div> <script
type=”text/javascript”
src=”;
<script type=”text/javascript”> setTimeout(function(){
//四方向无缝滚动
scroll(‘#textbox’,{vis:2,btnHidden:false,dir:’prev’,type:’h’});
scroll(‘#textbox2′,{vis:3,btnHidden:false,dir:’prev’,type:’v’});
},500); function scroll(container,options){ var box = $(container); var
boxUl = box.find(‘ul’).eq(0); var LiHeight = 0; //不包含克隆li列表高度
var cloneLiHeight = 0; //包含克隆li列表高度 var LiWidth = 0;
//不包含克隆li列表宽度 var cloneLiWidth = 0; //包含克隆li列表宽度 var
Lis = boxUl.children(); var btnPrev = box.find(‘.btnPrev’); var btnNext
= box.find(‘.btnNext’); //默认参数 var defult= { vis : 2, //显示个数
autoPlay:true, //自动播放 speed :50, //滚动速度 dir:’prev’, //滚动方向
btnHidden:false, //按钮是否隐藏 type:’v’ // 水平或者垂直方向 }; var opt
= $.extend({},defult,options); //构建DOM结构 var lastClone=0;
//最后克隆元素 var lastCloneHeight=0;//最后克隆元素高度 var
allCloneHeight=0;//全部克隆元素总高度 var lastCloneWidth=0; var
allCloneWidth=0; var visHeight=0; //可视高度 var visWidth=0; var
boxUl_wrap; if(opt.type == “v”){ //垂直方向 Lis.each(function(){
if(console.log){console.log($(this).height());}
$(this).height($(this).height()); LiHeight += $(this).outerHeight(true);
}); lastClone=
boxUl.children(‘:last’).clone().addClass(‘clone’).prependTo(boxUl);
lastCloneHeight = lastClone.outerHeight(true); allCloneHeight =
lastClone.outerHeight(true); for(var i = 0; i < opt.vis ; i++){
Lis.eq(i).clone().addClass(‘clone’).appendTo(boxUl); allCloneHeight +=
Lis.eq(i).outerHeight(true); } visHeight = allCloneHeight –

点评:多文件的上传在以前或许实现起来会很复杂,不过自从html5的出现,让其变得非常容易,下面有个不错的示例,大家可以参考下

前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。

lastCloneHeight; cloneLiHeight = LiHeight + allCloneHeight; boxUl_wrap

$(‘<div></div>’).css({‘width’:’100%’,’height’:visHeight,’overflow’:’hidden’,’position’:’relative’}).attr(‘id’,’ulWrap’);
boxUl.css({‘height’:cloneLiHeight,’top’:-lastCloneHeight}).wrap(boxUl_wrap);
}else if(opt.type ==”h”){ //水平方向
Lis.css({‘whiteSpace’:’nowrap’,’float’:’left’,’paddingRight’:’10px’});
Lis.each(function(){ $(this).width($(this).width()); LiWidth +=
$(this).outerWidth(true); }); lastClone=
boxUl.children(‘:last’).clone().addClass(‘clone’).prependTo(boxUl);
lastCloneWidth= lastClone.outerWidth(true); allCloneWidth =
lastClone.outerWidth(true); for(var j = 0; j < opt.vis ; j++){
Lis.eq(j).clone().addClass(‘clone’).appendTo(boxUl); allCloneWidth +=
Lis.eq(j).outerWidth(true); } visHeight = Lis.eq(0).outerHeight(true);
visWidth = allCloneWidth – lastCloneWidth; cloneLiWidth = LiWidth +
allCloneWidth; boxUl_wrap =
$(‘<div></div>’).css({‘width’:visWidth,’height’:visHeight,’overflow’:’hidden’,’position’:’relative’}).attr(‘id’,’ulWrap’);
boxUl.css({‘width’:cloneLiWidth,’left’:-lastCloneWidth}).wrap(boxUl_wrap);
box.css({‘width’:visWidth}); } //添加事件处理 var timer = null; var
scrollTop = function(){ clearInterval(timer); timer =
setInterval(function(){ var tmp =
parseInt(boxUl.css(‘top’).replace(‘px’,””)); tmp–;
boxUl.animate({‘top’:tmp},0,function(){ if(tmp <= -(LiHeight +
lastCloneHeight)){ boxUl.css(‘top’,-lastCloneHeight); } });
},opt.speed); }; var scrollDown = function(){ clearInterval(timer);
timer = setInterval(function(){ var tmp =
parseInt(boxUl.css(‘top’).replace(‘px’,””)); tmp++;
boxUl.animate({‘top’:tmp},0,function(){ if(tmp >= 0){
boxUl.css(‘top’,-(LiHeight)); } }); },opt.speed); }; var scrollLeft =
function(){ clearInterval(timer); timer = setInterval(function(){ var
tmp = parseInt(boxUl.css(‘left’).replace(‘px’,””)); tmp–;
boxUl.animate({‘left’:tmp},0,function(){ if(tmp <= -(LiWidth +
lastCloneWidth)){ boxUl.css(‘left’,-(lastCloneWidth)); } });
},opt.speed); }; var scrollRight = function(){ clearInterval(timer);
timer = setInterval(function(){ var tmp =
parseInt(boxUl.css(‘left’).replace(‘px’,””)); tmp++;
boxUl.animate({‘left’:tmp},0,function(){ if(tmp >= 0){
boxUl.css(‘left’,-(LiWidth)); } }); },opt.speed); }; var scrollType =
function(type,dir){ if(Lis.length >= opt.vis){
//显示个数不能多于列表个数,否则不显示效果 var sdir = typeof
dir!==”undefined” ? dir : opt.dir; switch(type){ case “v”: if(sdir ==
“prev”){scrollTop();}else{scrollDown();} break; case “h”: if(sdir ==
“prev”){scrollLeft();}else{scrollRight();} } } }; if(opt.autoPlay){
scrollType(opt.type); } //添加事件处理
box.find(‘#ulWrap’).hover(function(){ clearInterval(timer);
},function(){ scrollType(opt.type); }); //按钮是否隐藏
if(!opt.btnHidden){ btnPrev.unbind(‘mouseover’);
btnNext.unbind(‘mouseover’); btnPrev.mouseover(function(){
scrollType(opt.type,”prev”); }); btnNext.mouseover(function(){
scrollType(opt.type,”next”); }); }else{ btnPrev.hide(); btnNext.hide();
} } </script> </body> </html>

 

 

 

一些問題:

本地測試沒問題,但是
通過document.write()把代碼輸入執行后,垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..

源代碼:

图片 1<!DOCTYPE
html> <!–[if lt IE 7 ]> <html lang=”zh-CN”
class=”ie6″> <![endif]–> <!–[if IE 7 ]> <html
lang=”zh-CN” class=”ie7″> <![endif]–> <!–[if IE 8
]> <html lang=”zh-CN” class=”ie8″> <![endif]–>
<!–[if IE 9 ]> <html lang=”zh-CN” class=”ie9″>
<![endif]–> <!–[if (gt IE 9)|!(IE)]><!–>
<html lang=”zh-CN”> <!–<![endif]–> <head>
<title>文字滚动</title> <meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8″/> <style type=”text/css”>
*{margin:0;padding:0;} body{padding:20px;} .textbox{border:1px solid
#ddd;width:auto;overflow: hidden;} .textbox ul{list-style:
none;position: relative;} .textbox ul li{padding:5px 0;} </style>
</head> <body class=”home-page”> <div id=”textbox”
class=”textbox”> <ul> <li>汽车 | 运动B级车降3万5
</li> <li>家居 | 这么厉害的装修
女人真的要坐不住了</li> <li>教育 |
各省前三报考华工重奖10万元/人</li> <li>汽车 |
运动B级车降3万5 平行进口车加价11万</li> <li>健康 |
滥用激素酿苦果 14岁男孩10年不长个儿</li> <li>数码 |
最新手机报价 说好的宽带降费提速呢?</li> <li>汽车 |
平行进口车加价11万</li> <li>汽车 |
运动B级车降3万5</li> <li>汽车 |
平行进口车加价11万</li> <li>运动 | 恒大亚冠生死战
猜比分赢正版球衣</li> </ul> <a href=”#”
class=”btnPrev”>向左</a> <a href=”#”
class=”btnNext”>向右</a> </div> <br> <br>
<div id=”textbox2″ class=”textbox”> <ul> <li>汽车 |
运动B级车降3万5 </li> <li>家居 | 这么厉害的装修
女人真的要坐不住了</li> <li>教育 |
各省前三报考华工重奖10万元/人</li> <li>汽车 |
运动B级车降3万5 平行进口车加价11万</li> <li>健康 |
滥用激素酿苦果 14岁男孩10年不长个儿</li> <li>数码 |
最新手机报价 说好的宽带降费提速呢?</li> <li>汽车 |
平行进口车加价11万</li> <li>汽车 |
运动B级车降3万5</li> <li>汽车 |
平行进口车加价11万</li> <li>运动 | 恒大亚冠生死战
猜比分赢正版球衣</li> </ul> <a href=”#”
class=”btnPrev”>向上</a> <a href=”#”
class=”btnNext”>向下</a> </div> <script
type=”text/javascript”
src=”script/jquery-1.11.1.min.js”></script> <script
type=”text/javascript”> //四方向无缝滚动
scroll(‘#textbox’,{vis:2,btnHidden:false,dir:’prev’,type:’h’});
scroll(‘#textbox2′,{vis:3,btnHidden:false,dir:’prev’,type:’v’});
function scroll(container,options){ var box = $(container); var boxUl =
box.find(‘ul’).eq(0); var LiHeight = 0; //不包含克隆li列表高度 var
cloneLiHeight = 0; //包含克隆li列表高度 var LiWidth = 0;
//不包含克隆li列表宽度 var cloneLiWidth = 0; //包含克隆li列表宽度 var
Lis = boxUl.children(); var btnPrev = box.find(‘.btnPrev’); var btnNext
= box.find(‘.btnNext’); //默认参数 var defult= { vis : 2, //显示个数
autoPlay:true, //自动播放 speed :50, //滚动速度 dir:’prev’, //滚动方向
btnHidden:false, //按钮是否隐藏 type:’v’ // 水平或者垂直方向 }; var opt
= $.extend({},defult,options); //构建DOM结构 var lastClone=0;
//最后克隆元素 var lastCloneHeight=0;//最后克隆元素高度 var
allCloneHeight=0;//全部克隆元素总高度 var lastCloneWidth=0; var
allCloneWidth=0; var visHeight=0; //可视高度 var visWidth=0; var
boxUl_wrap; if(opt.type === “v”){ //垂直方向 Lis.each(function(){
$(this).height($(this).height()); LiHeight += $(this).outerHeight(true);
}); lastClone=
boxUl.children(‘:last’).clone().addClass(‘clone’).prependTo(boxUl);
lastCloneHeight = lastClone.outerHeight(true); allCloneHeight =
lastClone.outerHeight(true); for(var i = 0; i < opt.vis ; i++){
Lis.eq(i).clone().addClass(‘clone’).appendTo(boxUl); allCloneHeight +=
Lis.eq(i).outerHeight(true); } visHeight = allCloneHeight –

主要用到的是<input>的multiple属性

downloadUrl(url, callback, data);

lastCloneHeight; cloneLiHeight = LiHeight + allCloneHeight; boxUl_wrap

$(‘<div></div>’).css({‘width’:’100%’,’height’:visHeight,’overflow’:’hidden’,’position’:’relative’}).attr(‘id’,’ulWrap’);
boxUl.css({‘height’:cloneLiHeight,’top’:-lastCloneHeight}).wrap(boxUl_wrap);
}else if(opt.type ===”h”){ //水平方向
Lis.css({‘whiteSpace’:’nowrap’,’float’:’left’,’paddingRight’:’10px’});
Lis.each(function(){ $(this).width($(this).width()); LiWidth +=
$(this).outerWidth(true); }); lastClone=
boxUl.children(‘:last’).clone().addClass(‘clone’).prependTo(boxUl);
lastCloneWidth= lastClone.outerWidth(true); allCloneWidth =
lastClone.outerWidth(true); for(var j = 0; j < opt.vis ; j++){
Lis.eq(j).clone().addClass(‘clone’).appendTo(boxUl); allCloneWidth +=
Lis.eq(j).outerWidth(true); } visHeight = Lis.eq(0).outerHeight(true);
visWidth = allCloneWidth – lastCloneWidth; cloneLiWidth = LiWidth +
allCloneWidth; boxUl_wrap =
$(‘<div></div>’).css({‘width’:visWidth,’height’:visHeight,’overflow’:’hidden’,’position’:’relative’}).attr(‘id’,’ulWrap’);
boxUl.css({‘width’:cloneLiWidth,’left’:-lastCloneWidth}).wrap(boxUl_wrap);
box.css({‘width’:visWidth}); } //添加事件处理 var timer = null; var
scrollTop = function(){ clearInterval(timer); timer =
setInterval(function(){ var tmp =
parseInt(boxUl.css(‘top’).replace(‘px’,””)); tmp–;
boxUl.animate({‘top’:tmp},0,function(){ if(tmp <= -(LiHeight +
lastCloneHeight)){ boxUl.css(‘top’,-lastCloneHeight); } });
},opt.speed); }; var scrollDown = function(){ clearInterval(timer);
timer = setInterval(function(){ var tmp =
parseInt(boxUl.css(‘top’).replace(‘px’,””)); tmp++;
boxUl.animate({‘top’:tmp},0,function(){ if(tmp >= 0){
boxUl.css(‘top’,-(LiHeight)); } }); },opt.speed); }; var scrollLeft =
function(){ clearInterval(timer); timer = setInterval(function(){ var
tmp = parseInt(boxUl.css(‘left’).replace(‘px’,””)); tmp–;
boxUl.animate({‘left’:tmp},0,function(){ if(tmp <= -(LiWidth +
lastCloneWidth)){ boxUl.css(‘left’,-(lastCloneWidth)); } });
},opt.speed); }; var scrollRight = function(){ clearInterval(timer);
timer = setInterval(function(){ var tmp =
parseInt(boxUl.css(‘left’).replace(‘px’,””)); tmp++;
boxUl.animate({‘left’:tmp},0,function(){ if(tmp >= 0){
boxUl.css(‘left’,-(LiWidth)); } }); },opt.speed); }; var scrollType =
function(type,dir){ if(Lis.length >= opt.vis){
//显示个数不能多于列表个数,否则不显示效果 var sdir = typeof
dir!==”undefined” ? dir : opt.dir; switch(type){ case “v”: if(sdir ==
“prev”){scrollTop();}else{scrollDown();} break; case “h”: if(sdir ==
“prev”){scrollLeft();}else{scrollRight();} } } }; if(opt.autoPlay){
scrollType(opt.type); } //添加事件处理
box.find(‘#ulWrap’).hover(function(){ clearInterval(timer);
},function(){ scrollType(opt.type); }); //按钮是否隐藏
if(!opt.btnHidden){ btnPrev.unbind(‘mouseover’);
btnNext.unbind(‘mouseover’); btnPrev.mouseover(function(){
scrollType(opt.type,”prev”); }); btnNext.mouseover(function(){
scrollType(opt.type,”next”); }); }else{ btnPrev.hide(); btnNext.hide();
} } </script> </body> </html> View Code

 demo:

Download

 

实现一个文本无缝滚动的效果: !DOCTYPE html !–[if lt IE 7 ] html
lang=”zh-CN” class=”ie6″ ![end…

代码如下:

参数说明:
url不用说了;
callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就是responseText,responseCode就是status;
data是要post的数据,get方式时此参数可省略。

<input type=”file” name=”multipleFileUpload” multiple />

用法一:直接把回调函输写在参数中
downloadUrl(”, function (data, responseCode) {
alert(data); // 这里处理返回的数据
});

下面是页面的详细代码:

用法二:先定义回调函数,然后传入
function test(data, responseCode) {
alert(data); // 这里处理返回的数据
}

代码如下:

downloadUrl(”, test);

发表评论

电子邮件地址不会被公开。 必填项已用*标注