在pc游览器端模拟移动端幻灯片
用简单的思路写了下pc端模拟web端的图片滑动效果。。。
效果卡，bug多，完毕，继续学习c3方法写这个，iscroll就是可以模拟这种效果，还在学习中，难点《触点判断》
代码一份
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="idangerous.swiper.css">
<style>body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
} .device {
width: 640px;
height: 300px;
padding: 30px 40px;
border-radius: 20px;
background: #111;
border: 3px solid white;
margin: 5px auto;
position: relative;
box-shadow: 0px 0px 5px #000;
} .device .arrow-left {
background: url(img/arrows.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
} .device .arrow-right {
background: url(img/arrows.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
} .swiper-container {
height: 300px;
width: 640px;
} .content-slide {
padding: 20px;
color: #fff;
} .title {
font-size: 25px;
margin-bottom: 10px;
} .pagination {
position: absolute;
left: 0;
text-align: center;
bottom: 5px;
width: 100%;
} .swiper-pagination-switch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #999;
box-shadow: 0px 1px 2px #555 inset;
margin: 0 3px;
cursor: pointer;
} .swiper-active-switch {
background: #fff;
} .swiper-wrapper{
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 305px;
z-index: 0;
}
.swiper-slide{
float: left; }
.swiper-slide img{
-webkit-uers-select:none;
-webkit-user-drag: none;
}
</style>
</head>
<body>
<div class="device">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide now"> <img src="slider1-1.png"> </div>
<div class="swiper-slide"> <img src="slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script src="jquery-1.10.2.js"></script>
<script src="idangerous.swiper.js"></script>
<script>
var drop = false;
var $wrap = $('.swiper-wrapper');
var $slide = $('.swiper-slide');
var x = 363 , y = 38, X = 0,moveX = 0, D,tergetTouchIndex,beuffer;
var arrPos = [],mx = 0;
$slide.mousedown(function(e){
var $this = $(this);
// $this.removeClass('now').addClass('now');
tergetTouchIndex = $this.index() + 1;
drop = true;
console.log('index:' + tergetTouchIndex);
$wrap.css({"cursor":"move"});
}); $slide.on('mousemove',function(e){
if(drop){
moveX = e.pageX;
//console.log('弹起坐标：-》鼠标的X坐标：' + e.pageX+' 鼠标的Y坐标：' + e.pageY);
var x = e.clientX, y = e.clientY;
//判断鼠标运行方向
var direction = '';
if (arrPos.length > 0) {
if (x > arrPos[0][0]) {
if (y == arrPos[0][1]) direction = '右';
else {
if (y > arrPos[0][1]) direction = '右下';
else direction = '右上';
}
}
else {
if (x == arrPos[0][0]) {
if (y < arrPos[0][1]) direction = '上';
else {
if (y > arrPos[0][1]) direction = '下';
}
}
else {
if (y == arrPos[0][1]) direction = '左';
else {
if (y > arrPos[0][1]) direction = '左上';
else direction = '左下';
}
}
}
} if (arrPos.length < 1) arrPos.push(Array(x,y));
else {
arrPos[0][0] = x;
arrPos[0][1] = y;
//console.log(direction);
if (direction == '左' || direction == '左上' || direction == '左下') {
mx = getLeft();
mx = mx - 2.5;
$wrap.css({"left": mx + "px"});
D = 'left';
} else if (direction == '右' || direction == '右上' || direction == '右下') {
mx = getLeft();
mx = mx + 2.5;
$wrap.css({"left": mx + "px"});
D = 'right';
}
}
} return false;
}); $slide.mouseup(function(e){
drop = false;
// console.log('弹起坐标：-》鼠标的X坐标：' + e.pageX+' 鼠标的Y坐标：' + e.pageY);
getWrapXY();
if (D == 'left') {
if (tergetTouchIndex != 3) {
beuffer = 640 * tergetTouchIndex;
toMove(-beuffer);
} else {
tergetTouchIndex--;
beuffer = 640 * tergetTouchIndex;
toMove(-beuffer);
} } else if (D == 'right') {
if (tergetTouchIndex != 1) {
if(tergetTouchIndex == 3){
tergetTouchIndex = tergetTouchIndex - 2 ;
beuffer = 640 * tergetTouchIndex;
toMove(-beuffer);
}else{
tergetTouchIndex = tergetTouchIndex - 2 ;
beuffer = 640 * tergetTouchIndex;
toMove(beuffer);
} } else if(tergetTouchIndex == 1){
toMove(0)
} }
$wrap.css({"cursor":"Default"});
}); /*
* 取框架的左顶点坐标
* */ function getWrapXY(){
var $w = $(".swiper-container").offset();
console.log('X:' + $w.left +' Y:' + $w.top);
} /*
* 算出鼠标在容器中的实际xy坐标
* */
function getInBoxXY(x,y){ } /*
* 移动前，外框的left值
*
* */
function getLeft(){
return parseInt($wrap.css('left'),10);
} function getch(index){
return $wrap.children().eq(index);
} /*
* 滑动动画
* */
function toMove(px){
$wrap.animate({"left":px+'px'});
}
</script>
</body>
</html>
在pc游览器端模拟移动端幻灯片的更多相关文章
- PC端模拟移动端访问 字体大小限制
审查元素(F12),调整为移动端,如下图所示: 在字体大小小于12px时,font-size就不起作用了. 在真实移动端设备上是起作用的.
- js判断游览器是移动端还是PC端
js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- 基于fiddler的APP抓包及服务端模拟
在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- 利用在线HTTP接口测试工具ApiPost，模拟移动端请求API接口
我们做开发一般都是在PC端,然而我们很多时候需要模拟移动端进行接口请求. 比如,当一个API需要根据用户不同的终端来返回不同的数据时,就需要一个工具来模拟不同的终端了. 利用接口测试工具ApiPost ...
- 【JMeter4.0学习（三）】之SoapUI创建WebService接口模拟服务端以及JMeter对SOAP协议性能测试脚本开发
目录: 创建WebService接口模拟服务端 下载SoapUI 新建MathUtil.wsdl文件 创建一个SOAP项目 接口模拟服务端配置以及启动 JMeter对SOAP协议性能测试脚本开发 [阐 ...
- [转]基于fiddler的APP抓包及服务端模拟
在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...
随机推荐
- [USACO2005][POJ3169]Layout（差分约束）
题目:http://poj.org/problem?id=3169 题意:给你一组不等式了,求满足的最小解 分析: 裸裸的差分约束. 总结一下差分约束: 1.“求最大值”:写成"<=& ...
- eclipse中安装svn插件
Eclipse安装SVN 1.help->Install New Software2.Work With,点击add name:subclipse url:http://su ...
- python 参数
摘自:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00137473844933 ...
- 自动化测试UI Test, Performance Test, Load Test 总结整理
MSDN: 测试应用程序,Test apps early and often ,Improve Code Quality 推荐书: <Visual Studio 2015高级编程> < ...
- hdu5012 bfs
比较简单的题 搜索4个方向,维护位子的值. #include<stdio.h> #include<string.h> #include<queue> using n ...
- poj1308 并查集
比较恶心 1: 0 0 空树是一棵树 2: 1 1 0 0 不是树 3: 1 2 1 2 0 0 不是树... 4: 1 2 2 3 4 5 不是树 森林不算是树 5: 1 2 2 3 3 4 4 5 ...
- 你也可以当面霸-Servlet与JSP的原理及特点
既然是面试系列,就是面试官和应聘者之间的对话.本文是采用一问一答的形式呈现给读者的,这样能有一个明确的考察点,不像理论知识那么枯燥. 01.什么是Servlet技术 Servlet是和平台无关的服务器 ...
- python 学习5--matplotlib画图实践
### Python的强大很大一部分原因在于,它提供有很多已经写好的,可以现成用的对象 学习参考: http://www.cnblogs.com/vamei/archive/2013/01/30/28 ...
- opencv笔记2：图像ROI
time:2015年 10月 03日 星期六 12:03:45 CST # opencv笔记2:图像ROI ROI ROI意思是Region Of Interests,感兴趣区域,是一个图中的一个子区 ...
- 【BZOJ-1984】月下“毛景树” 树链剖分
1984: 月下“毛景树” Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 1314 Solved: 416[Submit][Status][Discu ...