在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后台服务是可以工作 ...
随机推荐
- （旧）子数涵数·PS ——素描效果
一.准备素材(均为在百度上下载的) 二.打开ps,并在ps中打开第一张素材 三.复制图层(好习惯) 四.去色将图像变成黑白,图像->调整->去色,快捷键为Ctrl+Shift+U 五,复制 ...
- sql server快速删除整个数据库表和存储过程
情况:在远程数据库删除表执行太慢,表过多,数据库无权删除 结果:保留空数据库 方法:利用sql语句,查询网络文摘解决. 说明: 有些有约束,不能直接delete,需要先删除所有约束,语句: DECLA ...
- JavaScript事件---事件对象
发文不易,若转载传播,请亲注明出处,谢谢! 内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开 ...
- 小记：事务(进程 ID 56)与另一个进程被死锁在 锁 | 通信缓冲区 资源上，并且已被选作死锁牺牲品。
今天在做SQL并发UPDATE时遇到一个异常:(代码如下) //Parallel 类可产生并发操作(即多线程) Parallel.ForEach(topics, topic => { //DBH ...
- Android如何让真机显示debug log的调试信息
真机默认是不开启debug log调试功能的,以前我一直用模拟器,模拟器默认是开启debug log调试功能的,那么如何让真机开启呢? 我用华为Ascend P6为例: 1.进入拨号界面,输入*#*# ...
- 【bzoj1061】 Noi2008—志愿者招募
http://www.lydsy.com/JudgeOnline/problem.php?id=1061 (题目链接) 题意 给定n天,第i天需要ai个志愿者,有m类志愿者,每类志愿者工作时间为[l, ...
- POJ3233 Matrix Power Series
Description Given a n × n matrix A and a positive integer k, find the sum S = A + A2 + A3 + … + Ak. ...
- CruiseControl.NET开篇
在这里说明一下,我终于踏上了CruiseControl.NET这条不归路了,为什么我会觉得是一条不归路,原因很简单,就是这东西在现在这个阶段已经很久没有在园子里有活跃度了,基本上到了已经可以到了让大家 ...
- 获取IplImage 数据并打印
int main(int argc, char* argv[]){ IplImage *img=cvLoadImage("c://fruitfs.bmp",1); CvSca ...
- ubuntu设置开机启动图形应用程序，替换默认图形桌面
直接将启动程序放在rc.local即可.但是如果自动启动的程序奔溃后,会返回到ubuntu的unity桌面系统. 我遇到的问题是程序还有调用 xset 去定时关闭屏幕.在桌面启动后调用没问题.如果rc ...