复制以下代码,并自己改正引用JQ的路径即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5侧滑</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style>
*{margin: 0; padding: 0;}
.top_plate {
background: #f0f0f0;
height: 40px;
position: relative;
overflow: hidden;
}
.top_plate ul {
position: absolute;
left: 0;
height: 40px;
width: 10000px;
margin: 0;
padding: 0;
}
.top_plate li {
margin: 0;
list-style: none;
}
.top_plate li a {
display: block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.top_plate li a.hot {
color: #F00;
}
</style>
</head>
<body>
<div class="top_plate"id="cms_nav_2">
<ul>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
<li style="clear:none; float:left;">
<a href="javascript:void(0)" target="_blank" class="">这是一个标题</a>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.12.1.js" ></script>
<script>
//左右侧滑模板
var gH = $(window).height();
var gW = $(window).width();
var ul_w = 0; //列表宽度
$ ("body").ready(function() {
var url = location.href;
if (url.indexOf("visualEditor") == -1 && url.indexOf("visualeditor") == -1) {
var ul_l = $(".top_plate ul li").length;
var ul_wrap = $(".top_plate").width(); //外框宽度
$(".top_plate ul li").each(function() {
var w = $(this).width();
ul_w = ul_w + w;
})
$(".top_plate ul").width(ul_w);
if (ul_w > ul_wrap) { //ul_w > ul_wrap -50
touchChannel();
}
}
});
//频道触屏滑动
//触屏滑动触发
function touchChannel() {
//全局变量,触摸开始位置
var startX = 0,
startD = 0,
OX = 0,
md =- (ul_w - gW)
//若想拉到最右边时有个50px 的位置放下拉箭头,则md改为:
// md = -50 - (ul_w - gW) 且上面的if里的ul_w > ul_wrap改为ul_w > ul_wrap-50
//touchstart事件
function touchSatrtFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
OX = parseInt($("#cms_nav_2 ul").css("left").replace('px', '')); //记录当前位置
console.log(OX)
} catch (e) {
//alert('touchSatrtFunc:' + e.message);
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
startD = x - startX;
if (OX + startD > 0) {
var logx = 2 * Math.sqrt(startD + OX);
$("#cms_nav_2 ul").css("left", logx);
} else if (OX + startD < md) {
var logx = 2 * Math.sqrt(md - OX - startD);
$("#cms_nav_2 ul").css("left", md - logx);
} else {
$("#cms_nav_2 ul").css("left", OX + startD);
}
} catch (e) {
//alert('touchMoveFunc:' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
var ml = parseInt($("#cms_nav_2 ul").css("left").replace('px', ''));
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
if (ml >= 0 && startD > 0) {
$("#cms_nav_2 ul").animate({ left: 0, }, 300);
} else if (ml < md && startD < 0) {
$("#cms_nav_2 ul").animate({ left: md, }, 300);
} else {
}
} catch (e) {
alert('touchEndFunc:' + e.message);
}
}
function bindEvent() {
document.getElementById("cms_nav_2").addEventListener('touchstart', touchSatrtFunc, false);
document.getElementById("cms_nav_2").addEventListener('touchmove', touchMoveFunc, false);
document.getElementById("cms_nav_2").addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
bindEvent(); //绑定事件
} catch (e) {}
}
window.onload = isTouchDevice;
}
//频道触屏滑动end
</script>
</body>
</html>