在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后台服务是可以工作 ...
随机推荐
- IDL简介与corba入门案例
IDL接口定义语言简介 IDL用中立语言的方式进行描述,能使软件组建(不同语言编写的)间相互通信. IDL提供了一个桥来连接不同的系统. Corba 上的服务用IDL描述,将被映射为某种程序设计语 ...
- JavaScript基础---语言基础（1）
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
- redmine慢---提速方法
最近readmine速度越来越慢.网上查了一下,把其自带的服务器webrick 换成为mongrel,可以解决这个问题,具体操作方法如下,方法: gem install mongrel 如果提示类似“ ...
- Xcode的版本功能特点简要回顾
在开始学IOS的开发时,本来是打算在windows环境下安装黑苹果的.也进行了百度和尝试,几番折腾之后,终于进入了系统界面,然而,就是然而,只有一个界面什么也动不了,后来就放弃了,咬咬牙入手了一台ma ...
- 传智168期JavaEE就业班 day02-css
* 课程回顾: * HTML语言 * HTML的简介 超文本标记语言. * 是网页最基础的语言. * 都是由标签所组成的. * HTML的基本格式 <html> <head> ...
- 【转】Oracle集合操作函数:union、intersect、minus
集合操作符专门用于合并多条select 语句的结果,包括:UNION, UNION ALL, INTERSECT, MINUS.当使用集合操作符时,必须确保不同查询的列个数和数据类型匹配. 集合操作符 ...
- Java-httpClient警告: Going to buffer response body of large or unknown size. Using getResponseBodyAsStream instead is recommended.
使用HttpClient,总是报出“Going to buffer response body of large or unknown size. Using getResponseBodyAsStr ...
- sphinx在c#.net平台下使用（一）
Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个可以结合MySQL,PostgreSQL全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.是做站内全文搜 ...
- KTHREAD 线程调度 SDT TEB SEH shellcode中DLL模块机制动态获取 《寒江独钓》内核学习笔记（5）
目录 . 相关阅读材料 . <加密与解密3> . [经典文章翻译]A_Crash_Course_on_the_Depths_of_Win32_Structured_Exception_Ha ...
- python运行报错：urllib2.URLError: <urlopen error [Errno 10061] >
Traceback (most recent call last): File "F:\adt-bundle-windows-x86_64-20140702\eclipse\workspac ...