Copy the following code, and references to their own correct path to the 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;"> </ li>
<a href="javascript:void(0)" target="_blank" class=""> This is a title </a>
<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;"> </ div> </ ul> </ li>
<a href="javascript:void(0)" target="_blank" class=""> This is a title </a>
<Script of the type = "text / JavaScript" src = "jQuery-1.12.1.js"> </ Script>
<Script>
// template sliding around
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();
}
}
});
// touch slide channel
// sliding touch trigger
function touchChannel () {
// global variables, the touch start position
var startX = 0,
startd = 0,
OX = 0,
MD = - (ul_w - gW)
// To pulled to the rightmost position when there is a pull-down arrow of 50px, md then read:
// -50 md = - (ul_w - gW) and if in the above ul_w> ul_wrap to ul_w> ul_wrap-50
// touchstart event
function touchSatrtFunc (EVT) {
the try {
//evt.preventDefault (); // stop when touching browser zoom, scroll bar to scroll the like
var touch = evt.touches [0]; // get the first contact
var x = Number (touch.pageX); // X coordinate of the contact page
var y = Number (touch.pageY); // Y coordinate contacts page
// record the initial contact position
startX = X;
OX = the parseInt ($ ( "# cms_nav_2 UL") CSS ( "left") Replace ( 'PX', '')..); // record the current position
console.log (OX)
} the catch (E) {
// Alert ( 'touchSatrtFunc:' + e.message);
}
}
// touchMove event, which can not obtain the coordinate
function touchMoveFunc (EVT) {
the try {
//evt.preventDefault () ; // stop when touching browser zoom, scroll bar to scroll the like
var touch = evt.touches [0]; // Get the first contact
var x = Number (touch.pageX); // X coordinate of the contact page
var y = Number (touch.pageY);// Y coordinate of the contact page
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) {
the parseInt ml = var ($ ( "# cms_nav_2 UL") CSS ( "left") Replace ( 'PX', '')..);
the try {
//evt.preventDefault (); // stop when touching browser zoom, scroll bars, scroll and the like
IF (ml> = 0 && startd> 0) {
$ ( "# cms_nav_2 UL") Animate ({left: 0,}, 300);.
} the else IF (ml <MD && startd <0 ) {
$ ( "# cms_nav_2 UL") Animate ({left:. MD,}, 300);
} the else {
}
} the 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;
}
// channel touch-screen slide end
</script>
</body>
</html>