图片滑动-兼容手机与pc端 原
时间:2022-06-19
本文章向大家介绍图片滑动-兼容手机与pc端
原,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
html, body{height:100%;margin:0;padding:0}
#canvas{width:100%;height:100%;background:gray;}
ul{list-style:none;margin:0;padding:0;background:black;width:100%;height:100%;position:relative;overflow:hidden;}
ul li{background:black;top:0;position:absolute;width:100%;height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
ul li img{max-width:100%;max-height:100%}
@media(min-width:600px) {
#canvas{width:500px;height:600px;margin:0 auto;}
}
</style>
</head>
<body>
<!-- 外层画布 -->
<div id="canvas">
</div>
<script type="text/javascript">
//所有的数据
var list = [{
height: 950,
width: 800,
img: "imgs/1.jpg"
},
{
height: 1187,
width: 900,
img: "imgs/2.jpg"
},
{
height: 766,
width: 980,
img: "imgs/3.jpg"
},
{
height: 754,
width: 980,
img: "imgs/4.jpg"
},
{
height: 493,
img: "imgs/5.jpg",
width: 750
},
{
height: 500,
img: "imgs/6.jpg",
width: 750
},
{
height: 600,
img: "imgs/7.jpg",
width: 400
}
];
//构造函数
function slider(opts) {
//构造函数需要的参数
this.wrap = opts.dom;
this.list = opts.list;
//构造三部曲
this.init();
this.renderDom();
this.bindDom();
}
//init()函数
slider.prototype.init = function() {
//this.radio=window.innerHeight/window.innerWidth;
if (window.innerWidth > 600) {
// 屏幕大于600的时候的时候,宽度设置为500px
this.width = 500
} else {
//否则全屏
this.width = window.innerWidth;
}
//当前图片的索引(在视觉范围内的图片下标)
this.idx = 0;
}
//renderDom()函数
slider.prototype.renderDom = function() {
var wrap = this.wrap;
var width = this.width;
var data = this.list;
var len = data.length;
//var radio=this.radio;
//创建ul元素
this.outer = document.createElement("ul");
for (i = 0; i < len; i++) {
//循环创建li元素
var li = document.createElement("li");
var item = data[i];
//下面的宽度可以加px也可以不加,可以直接是数值
//li.style.width=scaleW +"px";
li.style.webkitTransform = 'translate3d(' + i * width + 'px,0,0)'; //此行的px不能省略
li.innerHTML = '<img src="' + item['img'] + '" />'
this.outer.appendChild(li);
}
//wrap.style.height=window.innerHeight + "px";
wrap.appendChild(this.outer);
}
// bindDom()函数,绑定dom事件
slider.prototype.bindDom = function() {
var self = this;
var width = self.width; //
var outer = self.outer;
var len = self.list.length;
var startEvt, moveEvt, endEvt;
if ("ontouchstart" in window) {
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend"
} else {
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
//手指按下的处理事件或者pc端的mousedown
var startHander = function(evt) {
var touches = evt.touches;
if (touches && touches[0]) {
//console.log(touches)
//记录手指按下的坐标
self.startX = touches[0].pageX;
} else {
outer.addEventListener(moveEvt, moverHander);
outer.addEventListener(endEvt, endHander);
self.startX = evt.pageX;
console.log(evt.pageX);
}
//清除偏移量
self.offsetX = 0;
//记录刚刚开始按下的时间
self.startTime = new Date() + 1;
console.log("time")
};
//手指移动的处理事件
var moverHander = function(evt) {
console.log("move")
var touches = evt.touches;
if (touches && touches[0]) {
//兼容chrome android 阻止浏览器默认行为
evt.preventDefault();
//计算手指的偏移量
self.offsetX = touches[0].pageX - self.startX;
console.log(self.offsetX);
} else {
evt.preventDefault();
self.offsetX = evt.pageX - self.startX;
console.log("offsetX:" + self.offsetX)
}
var lis = outer.getElementsByTagName("li");
//起始索引
var i = self.idx - 1;
console.log(i - self.idx)
//结束索引
var m = i + 3;
//最小化改变Dom属性
for (i; i < m; i++) {
lis[i] && (lis[i].style.webkitTransition = '-webkit-transform 0s ease-out');
lis[i] && (lis[i].style.webkitTransform = 'translate3d(' + ((i - self.idx) * self.width + self.offsetX) + 'px,0,0)');
}
};
var endHander = function(evt) {
var type = evt.type;
console.log("up")
console.log(evt)
if (type !== "touchend") {
outer.removeEventListener(moveEvt, moverHander);
}
var lis = outer.getElementsByTagName('li');
var boundory = this.width / 6;
var endTime = new Date() + 1;
if (endTime - self.startTime > 800) {
if (self.offsetX >= boundory) {
//上一页进入
self.go('-1');
} else if (self.offsetX <= -boundory) {
//下一页进入
self.go('+1');
} else {
//留在本页
self.go('0');
}
} else {
//快操作
//优化
if (self.offsetX > 50) {
//上一页进入
self.go('-1');
} else if (self.offsetX < -50) {
//下一页进入
self.go('+1');
} else {
//留在本页
self.go('0');
}
}
};
if ("ontouchstart" in window) {
outer.addEventListener(startEvt, startHander);
outer.addEventListener(moveEvt, moverHander);
outer.addEventListener(endEvt, endHander);
} else {
outer.addEventListener(startEvt, startHander);
}
//outer.addEventListener(moveEvt, moverHander);
//outer.addEventListener(endEvt, endHander);
//outer.removeEventListener(moveEvt, moverHander);
}
slider.prototype.go = function(n) {
var index = this.idx;
console.log(index + " hi")
//var agentIndex;
var lis = this.outer.getElementsByTagName("li");
var width = this.width;
console.log(width)
var len = lis.length;
//接受这样的数据go(5) ,跳到lis 下标为5
if (typeof n == "number") {
//agentIndex=index
index = index
} else if (typeof n == "string") {
console.log("string")
//agentIndex=index+n*1
// 转换类型 go('+1');'+1'*1 = 1;'-1'*1 =-1
index = index + n * 1
}
//处理边界
if (index > len - 1) {
index = len - 1
} else if (index < 0) {
index = 0
}
//this.idx = agentIndex;
this.idx = index
console.log(index)
lis[index].style.webkitTransition = '-webkit-transform 0.2s ease-out'
lis[index - 1] && (lis[index - 1].style.webkitTransition = '-webkit-transform 0.2s ease-out')
lis[index + 1] && (lis[index + 1].style.webkitTransition = '-webkit-transform 0.2s ease-out')
lis[index].style.webkitTransform = 'translate3d(0,0,0)';
lis[index - 1] && (lis[index - 1].style.webkitTransform = 'translate3d(-' + width + 'px,0,0)');
lis[index + 1] && (lis[index + 1].style.webkitTransform = 'translate3d(' + width + 'px,0,0)')
}
new slider({
dom: document.getElementById("canvas"),
list: list
})
//注意'translate3d(-'+width+'px,0,0)' 一定要加px
</script>
</body>
(adsbygoogle = window.adsbygoogle || []).push({});
- ASP.NET MVC学习笔记07数据表和模型添加新字段
- 以太坊·电影院场景区块链应用探索
- 最全爬虫攻略:微博、APP、公众号一个不能少!
- 注册中心 Eureka 源码解析 —— Eureka-Client 初始化(一)之 EurekaInstanceConfig
- 无论人工智能发展到什么地步,都离不开这6段代码
- Dubbo源码解析 —— 逻辑层设计之服务降级
- 【死磕Java并发】-----J.U.C之Condition
- 数据库中间件 MyCAT 源码分析 —— 【单库单表】查询
- 数据库中间件 MyCAT源码分析:【单库单表】插入
- 数据库中间件 MyCAT 源码分析 —— 调试环境搭建
- 分布式事务 TCC-Transaction 源码解析 —— 事务存储器
- 注册中心 Eureka 源码解析 —— 调试环境搭建
- 一样的代码、不一样的写法,JavaScript必知的简写技巧|附源代码
- 【死磕Java并发】-----J.U.C之读写锁:ReentrantReadWriteLock
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法