在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后台服务是可以工作 ...
随机推荐
- Koala Framework是什么？我为什么要写这个框架？
当时的监管组,技术力量累积的很少,还在直连DB,使用着DataTable.DataSet作为数据的承载,监管是公司最近几年主推的项目,所以领导们决定进行重要调整. 初来乍到 由于之前没有任何的技术积累 ...
- IE10访问apache 2.4会奇慢的解决办法
Windows版的apache 2.4. IE10访问apache 2.4会特别慢.有时Apache挂起了.只好重新开apache,但是重开后,也会好景不长,刚处理几个请求,就又变得奇慢了.Firef ...
- 年前辞职-WCF入门（6）
前言 昨天早上去医院做入职体检,被告知要预约,本以为是要排队,我连视频都准备好了...结果就回来了.下午去了新公司那边找房子,2了,因为公司提供了班车列表,我既然就只在班车所经过的几个地方找,却遗漏了 ...
- 第二章：Javascript词法结构
编程语言的词法结构是一套基础性的规则,用来描述你如何编写这门语言.作为语法的基础,它规定了变量名是怎么样的,如何写注释,以及语句之间是如何区分的.本节用很短的篇幅来介绍javascript的词法结构. ...
- eclipse中安装svn插件
Eclipse安装SVN 1.help->Install New Software2.Work With,点击add name:subclipse url:http://su ...
- git使用问题汇总
2015.11.29 一.git clone 出现如下问题: 解决方案:添加一个ssh keys.步骤如下: 1.生成一个ssh-key(图片来自网络) 2.找到“Your identificatio ...
- Android开发环境的调研
在大二下,由于课程需要,就去自学Java,当时就借了一本java面向对象的书来看,根据书上的说明搭建环境,下载了JDK1.6和eclipse.但从来没有用过eclipse,java也就只是刚入门而已. ...
- qt添加最小化和关闭按钮
int width = this->width();//获取界面的宽度 //构建最小化.最大化.关闭按钮 QToolButton *minButton = new QToolButton(thi ...
- SQLHelper初实现---杨中科版（易懂，代码多点）
public class SQLHelper { //获取连接字符串,,引用Configurationl类库,并引用命名空间using System.Configuration; private st ...
- html5_canvas-记忆力卡片游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...