广告式图片浏览在手机上也能实现触摸滑动效果

最新推荐文章于 2020-11-06 19:15:20 发布

morxiyee

最新推荐文章于 2020-11-06 19:15:20 发布

阅读量457

点赞数

分类专栏： WifiDog项目

本文链接：https://blog.csdn.net/u013276166/article/details/38750853

版权

WifiDog项目专栏收录该内容

16 篇文章 0 订阅

订阅专栏

注：项目一共三个文本（test.html,touchImgDrag.css,touchImgDrag.js）和一个images文件夹在同一目录下面。

1.test.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<link href="touchImgDrag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/touchImgDrag.js"></script>

<title>微信认证流程</title>

<script>
function OnPageLoad(){

tidOnLoad();
}
</script>
</head>

<body>
<div id="ImgDragContainer" >
<div id="iTouchImgDrag">
<ul id="iTIDbody">
<li style="background:url('images/0.jpg');" ></li>
<li style="background:url('images/1.jpg');" ></li>
<li style="background:url('images/2.jpg');" ></li>
<li style="background:url('images/3.jpg');" ></li>
<li style="background:url('images/4.jpg');" ></li>
<li style="background:url('images/5.jpg');" ></li>
<li style="background:url('images/6.jpg');" ></li>
<li style="background:url('images/7.jpg');" ></li>
<li style="background:url('images/8.jpg');" ></li>
</ul>
<ul id="iTIDnav">
<li οnclick="tidStartRPAniPage(0)">●</li>
<li οnclick="tidStartRPAniPage(1)">●</li>
<li οnclick="tidStartRPAniPage(2)">●</li>
<li οnclick="tidStartRPAniPage(3)">●</li>
<li οnclick="tidStartRPAniPage(4)">●</li>
<li οnclick="tidStartRPAniPage(5)">●</li>
<li οnclick="tidStartRPAniPage(6)">●</li>
<li οnclick="tidStartRPAniPage(7)">●</li>
<li οnclick="tidStartRPAniPage(8)">●</li>
</ul>
</div>
</div>

<script>OnPageLoad();</script>
</body>
</html>

2.touchImgDrag.css

html,body{
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
height: 100%; /*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
}
#iTouchImgDrag {
width: 100%;
height: 100%;
background: #000;
padding: 0px;
margin: 0px;
overflow:hidden;
}

#iTIDbody {
left: 0px;
position: relative;
padding:0px;
margin: 0px auto 0px;
overflow:hidden;
}
#iTIDbody li {
float: left;
list-style-type: none;
overflow:hidden;

}
#iTIDnav {
position: relative;
left: 36px;
top: -100px;
padding: 10px 10px;
}
#iTIDnav li{
text-align: center;
font-size: 48px;
color: gray;
list-style-type: none;
float: left;
}

#ImgDragContainer{
left:-1px; /* 解决白边问题 */
top:-1px;
width:101%;
height:101%;
text-align:center;
color:red;
background:#000;
position:absolute;
padding: 0px;
margin: auto;
}

3.touchImgDrag.js

var tidPageWidth; //页宽
var tidPageHeight; //页高
var tidPageTotalWidth; //整幅宽
var tidPageCount;
var tidTimer = null; //用于复位动画的Timer
var tidOpObj = null;
var tidPosition = null;
var tidCurPage = 0;
var tidTouchIsDown = false;

function tidOnLoad()
{
var touchSupport = false;
try {
document.createEvent("TouchEvent");
touchSupport = true;
//alert("支持TouchEvent事件！");
}
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
}

var referObj = document.getElementById('iTouchImgDrag');
var vWidth = referObj.offsetWidth ;
var vHeight = referObj.offsetHeight;
tidPageWidth = vWidth;
tidPageHeight = vHeight;
referObj.style.width = vWidth+"px";
referObj.style.height = vHeight+"px";
//alert("offsetWidth"+referObj.offsetWidth +"offsetHeight"+referObj.offsetHeight+"clientWidth"+referObj.clientWidth+"clientHeight"+referObj.clientHeight);

referObj = document.getElementById('iTIDbody').getElementsByTagName('li');
var vCount = referObj.length;
tidPageCount = vCount;
//var vCount = referObj.getElementsByTagName('li').length;
//alert('vCount'+vCount);
for(var i=0;i<vCount;i++)
{
referObj[i].style.width = vWidth+"px";
referObj[i].style.height = vHeight+"px";
//不知道为什么下面两个属性放css不行，只能javascript和html里写
referObj[i].style.backgroundRepeat = "no-repeat";
referObj[i].style.backgroundPosition = "center";
}

tidPageTotalWidth = vWidth * vCount;
tidOpObj = document.getElementById('iTIDbody');
tidOpObj.style.width = tidPageTotalWidth+"px";
tidOpObj.style.height = vHeight+"px";
//alert('vUIWidth'+vUlWidth);
//var vHeight = document.getElementById('iTouchImgDrag').style.height;
//tidOpObj.style.left = "-100px";

tidPosition = new Object();
tidPosition.ObjX = 0; //必须初始化，否则一开始就点园点会出错
if(touchSupport){
document.addEventListener('touchstart', tidStartDragT, true);
document.addEventListener("touchend", tidStopDragT, true);
document.addEventListener("touchmove", tidDragMoveT, true);
}
else{
tidOpObj.onmousedown = function (event)
{
tidStartDragM(window.event || event);
};
}

referObj = document.getElementById('iTIDnav').getElementsByTagName('li');
for(var i=0;i<vCount;i++)
{
if(i==tidCurPage){
referObj[i].style.color = "green";
}

}
}
/*----------------------------------*/
function tidStartDragT(touch)
{
tidTouchIsDown = true;
tidStartDrag(touch.touches[0].pageX);
}

function tidStartDragM(ev)
{
if(!ev) ev = window.event;

tidStartDrag(ev.clientX);
//增加消息持续捕捉
if(tidOpObj.setCapture)
{
tidOpObj.setCapture();

tidOpObj.οnmοuseup=tidStopDragM;
tidOpObj.οnmοusemοve=tidDragMoveM;
}
else
{
document.addEventListener("mouseup", tidStopDragM, true);
document.addEventListener("mousemove", tidDragMoveM, true);

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}

function tidStartDrag(clientX)
{
var str = tidOpObj.style.left;
var idx = str.indexOf('px');
if(idx>0){
str = str.substring(0,idx);
}
else str="0";
tidPosition.ObjX = parseInt(str);
tidPosition.MouseX = clientX;


if(tidTimer)
{
clearInterval(tidTimer);
}

}
/*----------------------------------*/
function tidDragMoveM(ev)
{
if(!ev) ev = window.event;
tidDragMove(ev.clientX);
}

function tidDragMoveT(touch)
{
if(tidTouchIsDown){
touch.preventDefault();
tidDragMove(touch.touches[0].pageX);
}
}

function tidDragMove(clientX)
{
var mx = clientX;
var str = (tidPosition.ObjX + (mx - tidPosition.MouseX))+"px";
tidOpObj.style.left = (tidPosition.ObjX + (mx - tidPosition.MouseX))+"px";
}
/*----------------------------------*/
function tidStopDragT(touch)
{
tidTouchIsDown = false;
tidStopDrag(touch.changedTouches[0].pageX);

}

function tidStopDragM(ev)
{
if(!ev) ev = window.event;
if(tidOpObj.releaseCapture)
{
tidOpObj.releaseCapture();

tidOpObj.οnmοuseup=null;
tidOpObj.οnmοusemοve=null;
}
else
{
document.removeEventListener("mouseup", tidStopDragM, true);
document.removeEventListener("mousemove", tidDragMoveM, true);

window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
}
tidStopDrag(ev.clientX);
}
function tidStopDrag(clientX)
{
var str = tidOpObj.style.left;
var idx = str.indexOf('px');
if(idx>0){
str = str.substring(0,idx);
}
else str="0";
tidPosition.ObjX = parseInt(str);

var tar = Math.floor(tidPosition.ObjX/tidPageWidth);
var delta = clientX - tidPosition.MouseX;
var absDelta = Math.abs(delta);
if ( absDelta>(tidPageWidth/4) ){
if(delta>0)tar+=1;
}
else{
if(delta<0)tar+=1;
}
if(tar>0)tar=0;
if(tar<=-tidPageCount)tar=-tidPageCount+1;
tar*=tidPageWidth;

//开始复位动画
tidStartRPAni(tar)
}
function tidStartRPAniPage(page)
{
tidStartRPAni(-page*tidPageWidth);
}
function tidStartRPAni(tar) //RP=Reset Position
{
var referObj = document.getElementById('iTIDnav').getElementsByTagName('li');
if(tidCurPage<referObj.length && tidCurPage>=0 && referObj[tidCurPage]){
referObj[tidCurPage].style.color="gray";
}
tidCurPage = -tar/tidPageWidth;
if(tidCurPage<referObj.length && tidCurPage>=0 && referObj[tidCurPage]){
referObj[tidCurPage].style.color="green";
}

if(tidTimer)
{
clearInterval(tidTimer);
}
tidTimer=setInterval("tidDoRPAni("+tar+")", 30);
}

function tidDoRPAni(tar)
{
var cur = tidPosition.ObjX;

var iSpeed = (tar-cur)/3;
iSpeed *= 0.7;

cur += iSpeed;

if(Math.abs(tar-cur)<1 && Math.abs(iSpeed)<1)
{
clearInterval(tidTimer);
tidTimer = null;
cur = tar;
}

tidPosition.ObjX = cur;
tidOpObj.style.left = cur+"px";
}

function tidStopRPAni()
{
if(tidTimer)
{
clearInterval(tidTimer);
}
}