2:还有移动端的zepto库 也有手势插件,
3:另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库,
4:早期的应该是用wml语言支持的WMLScript实现。
5:举例:使用iscroll.js实现
1)下载iScroll.js,百度搜索iScroll.js下载即可
2)引入iScroll.js,在要使用滑动效果的地方,引入iScroll.js文件
3)编写规范的html格式
只有如下格式才能实现滑动效果
<div id="wrapper">
<div class="scroll">
这个区域可以滑动
</div>
</div>
如下格式不能滑动
<div id="wrapper">
<div class="other">这个区域可以滑动</div>
<div class="scroll">
这个区域不可以滑动了
</div>
</div>
只有wrapper的第一个子元素才能实现滑动效果。
4)编写js调用代码
var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})
第一参数必需是滑动元素的父元素的id。
主要参数一览:
hScroll: true, 左右滑动,默认为true
vScroll: true,上下滑动
hScrollbar: true, 是否显示y轴滚动条,默认为显示
vScrollbar: true,是否显示X轴滚动条,默认为显示
<html><meta http-equiv="content-type" content="text/htmlcharset=gb2312" />
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="JavaScript" type="text/javascript">
function get(obj) {
var obj = document.getElementById("qx").value
var obj = obj.split('\n')
var i = 0
var arr_all = new Array()
var exists = document.getElementById('a').childNodes
for (var j=0j<exists.lengthj++) {
if (exists[j].nodeName == 'DIV') {
var exist_url = exists[j].firstChild.nextSibling.value
var exist_name = exists[j].lastChild.previousSibling.innerHTML
var exist = exist_url + '|' + exist_name
arr_all.push(exist, arr_all)
}
}
for (i = 0i <obj.lengthi++) {
obj[i] = trim(obj[i])
if (obj[i] == '') {
continue
}
if (in_array(obj[i], arr_all)) {
continue
}
arr_all.push(obj[i])
var name = obj[i].split("|")[1]
var url = obj[i].split("|")[0]
var iht = ''
iht += '<div><span>上移</span><span>下移</span><input size=80 value='+url+' /><span>'+name+'</span>'
iht +='<input type="button" value=" 删除 " class="inputbtn" onclick="deleteNum(this)" /></div><br>'
document.getElementById("a").innerHTML+=iht
}
document.getElementById("qx").value=""
}
function deleteNum(obj) {
obj.parentNode.parentNode.removeChild(obj.parentNode.nextSibling)
obj.parentNode.parentNode.removeChild(obj.parentNode)
}
function trim(string) {
return string.replace(/(^\s*)|(\s*$)/g, "")
}
function in_array(stringToSearch, arrayToSearch) {
for (s = 0s <arrayToSearch.lengths++) {
thisEntry = arrayToSearch[s].toString()
if (thisEntry == stringToSearch) {
return true
}
}
return false
}
$(document).ready(function() {
//$("div[name=spanFor]").draggable()
$("#a").draggable({axis:'y',grid:[0,20],containment:'parent'})
})
</script>
</head>
<body>
<div id = "a" ></div>
<textarea name="fbaddress" cols="100" rows="5" id="qx">19880101|名字1
19880102|名字2
19880103|名字3
19880104|名字3</textarea>
<input type="button" name="Submit1" value=" 编号 " onclick="get()" class="inputbtn" /><br>
在保证别的功能不变的情况下 实现上移下移
</body>
</html>