求一个网易手机端的效果
0
悬赏园豆：5
[已解决问题]
解决于 2015-10-14 09:34
跪求一个这样的效果，这个是手指左右滑动的，他这里有个特别之处就是放手之后有个根据手指瞬间移动跨度去快慢移动他的left值，有没有demo，我也做了一个不过有些问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>移动端触摸滑动</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="移动端触摸滑动" />
<style>
* {margin: 0;padding: 0;}
li {list-style: none;}
.m-slider {width: 100%;margin: 50px auto;overflow: hidden;background: #ccc;position: relative;border: 1px solid red;height: 80px;}
.m-slider ul {position: absolute;top: 0;left: 0;height: 30px;}
.m-slider li {float: left;width: 100px;height: 80px;line-height: 80px;overflow: hidden;text-align: center;}
</style>
</head>
<body>
<div class="m-slider">
<ul class="cnt" id="slider"><li>中国</li><li>英国</li><li>美国</li><li>法国</li><li>德国</li><li>意大利</li><li>奥地利</li><li>新西兰</li><li>泰国</li><li>新加坡</li><li>韩国</li><li>日本</li><li>瑞典</li><li>冰岛</li><li>丹麦</li><li>俄罗斯</li></ul>
</div>
</body>
<script>
window.onload = function() {
var startPos = 0,
endPos = 0,
lastX=0,
iSpeedX=0,
slider = document.getElementById('slider');
slider.style.width = slider.getElementsByTagName("li").length * parseInt(getStyle(slider.getElementsByTagName("li")[0], "width")) + "px";
if (!!('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
addEvent(self.slider, "touchstart", fnstart);
addEvent(self.slider, "touchmove", fnmove);
addEvent(self.slider, "touchend", fnend);
}
function fnstart(ev) {
var touch = ev || event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startPos =touch.pageX-slider.offsetLeft;
}
function fnmove(ev) {
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch =ev || event.targetTouches[0];
endPos =touch.pageX - startPos;
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
iSpeedX=endPos-lastX;
slider.style.WebkitTransition=slider.style.transition="";
slider.style.left=endPos+"px";
}
function fnend() {
//document.getElementById('slider').style.WebkitTransform = document.getElementById('slider').style.transform = "translateX(" + (endPos+=Math.abs(iSpeedX)) + "px)";
slider.style.left=(endPos+=iSpeedX)+"px";
slider.style.WebkitTransition=slider.style.transition=" left 1s";
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function addEvent(obj, event, fn) {
obj['bind' + event] = obj['bind' + event] || [];
obj['bind' + event]['bind' + fn] = obj['bind' + event]['bind' + fn] || function() {
fn.call(obj);
}
if (typeof document.addEventListener != "undefined") {
obj.addEventListener(event, obj['bind' + event]['bind' + fn], true);
} else {
obj.attachEvent('on' + event, obj['bind' + event]['bind' + fn]);
}
};
}
</script>
</html>
最佳答案
0
又见到这个问题了，你解决了没呀
收获园豆：5
解决了！！！嘻嘻，用了一个swiper插件就行了
