swipe js bug

【swipe js bug】的更多相关文章

最近因为要写新的mobile site页面,有好几个页面上面必须用到photo slider. 使用插件: /* * Swipe 2.0 * * Brad Birdsall * Copyright 2013, MIT License **/ Github:https://github.com/thebird/Swipe 在使用的时候,发现只要是在两张照片的情况下,你会在chrome的F12调试中的Elements选项中发现swipe js使用js动态创建出来了4个div,这里是使用如下的代码:…

swipe.js 2.0 轻量级框架实现mobile web 左右滑动

属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当事件触发后,元素可见) position: relative; //表示相对于浏览器的定位,应用中是相当于前面的容器来定位的 } </style><script type="html/javascript"> $("#bannerControl li:fi…

Swipe JS – 移动WEB页面内容触摸滑动类库

想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触摸操作也是移动设备的中一个特性,我们必须专业化的处理,哈哈.其实实现原理很简单,但平常中自己开发不是很方便. 今天就为大家带来这样子的一个轻量级js触摸滑动类库 – Swipe JS.这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触…

swipe js dynamic content

swipe js dynamic content swipe 动态改变内容时,需要用 update 一下. swiper.update(true); 实例: HTML Code 页面用的FreeMarker渲染 <div class="swiper-container swiper-container-horizontal"> <ul class="swiper-wrapper"> <#if goods.productImages?h…

swipe.js文档及用法

最近的一个项目中使用到了swipe.js这个插件感觉非常的好用的官方网站 http://swipejs.com/ https://github.com/bradbirdsall/Swipe 简介 swipe.js是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 下面是从GitHub上翻译的用法和文档用法 Swipe只需添加很简单的一段代码即可,如下 <div id='slider' class='swipe'> <div class='swipe-wrap'> &l…

Swipe JS滑动插件

Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www.swipejs.comgithub:https://github.com/bradbirdsall/Swipe 要实现Swipe的滑动和手势非常简单,仅需要遵循一个简单的规则.下面是一个例子: <div id='slider' class='swipe'> <div class='swipe…

swipe.js实现支持手拔与自动切换的图片轮播

一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div class='swipe-wrap'> <li style="no-repeat center center; list-style-type: none;"><img src="/1.jpg" /></li> <li styl…

【转载】移动开发中的上下左右滑动插件jquery.swipe.js

原文地址http://blog.csdn.net/pvfhv/article/details/3449803/# 源码: (function($) { var old = $.fn.swipe; $.fn.swipe = function(option) { var opt = { 'left': $.noop, 'right': $.noop, 'up': $.noop, 'down': $.noop }; if ($.type(option) == 'string') { switch (o…

基于zepto使用swipe.js制作轮播图demo

在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址如下 https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'…

Swipe-移动端触摸滑动插件swipe.js

原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动前端开发中.原文来自:http://caibaojian.com/swipe.html 使用方法下面是一个比较简单的使用例子,添加适当的html代码和js代码即可. <div id='slider' class='swipe'> <div clas…

前端插件--swipe.js

swipe.js的作用: 这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .swipe { overflow: h…

jquery.pjax.js bug问题解决集锦

jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的ajax加载局部内容的,默认cache=true,这会导致ie下get数据从缓存中获取,解决办法是设置pjax options的cache=false,这样请求会自动变成如下方式: /XXXX?_pjax=%23pjax-container&_=1455092848927 2.pjax 与 jquery…

swipe.js 使用方法

1.插件要求的css样式: <style> .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > li { float:left; width:100%; position: relative; } </style> 2.JS代码: <script>…

JS BUG 传递数字过大，数据值会变化

如果要在js函数中传递大整型数值,一定要用字符串,否则会出现精度不准确 function testfun('2345234523452141234123412341234523452345123') {} 要使用单引号包裹,转为字符串,否则会按照整型数据处理,精度会丢失.…

【仅支持移动设备】Swipe.JS轻量级移动幻灯效果

在线演示本地下载请使用手机直接访问地址: 单独页面展示效果…

js bug

1 加载模块脚本失败:服务器以非JavaScript MIME类型“text/html”响应. 描述:ES6 import Class时路径出错,少一个 / ,添上即可…

unslider.js 实现移动web轮播

unslider.js可以实现轮播,但是在移动端还需要另两个插件. jquery.event.move和jQuery.event.swipe : 下面就是简单的实例: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, ma…

深入理解unslider.js源码

最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程可以在他 github 库和 unslider官网中找到大纲 unslider.js使用 unslider.js库的代码结构 unslider.js库的实现总结unslider.js源码中值得我们学习的点代码下载:github库,对应此文章的目录是DeepIntoUnslider , 点击…

Swiper.js 中文API手册

本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线---------------------------------- 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sl…

JS中跨域和沙箱的解析

先来直接分析源码,如下: <!DOCTYPE HTML><html><head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0"/> <meta http-equiv=&q…

webpack.config.js

var webpack = require('webpack'); module.exports = { //插件项 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurrenceOrderPlugin() ], //…

swipejs的bug

Github:https://github.com/thebird/Swipe 以下bug的修复方式皆来自于网上. 现在最新的版本是2.0,bug如下: 1.触摸后不会自动播放修复方式, function stop() { //delay = 0; delay = options.auto > 0 ? options.auto : 0; clearTimeout(interval ); } 2.小于三个轮播元素,会多生成轮播元素修复方式, //Source codes: if (browse…

你需要了解的JS框架

excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquery.tagcanvas.js 用途:构建tag云下载地址:http://www.goat1000.com/tagcanvas.php jquery.fullPage.js 用途:网站整屏轮番下载地址:http://www.jq22.com/jquery-info…

前端开发需要了解的JS插件

excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquery.tagcanvas.js 用途:构建tag云下载地址:http://www.goat1000.com/tagcanvas.php jquery.fullPage.js 用途:网站整屏轮番下载地址:http://www.jq22.com/jquery-info1124 案…

swipe和swiper的区别

swipe.js--移动WEB页面内容触摸滑动类库参考http://www.jiawin.com/swipe-mobile-touch-slider 1.swipe只提供简单轮播切换,底部的圆点颜色切换需要重新写html,自定义方便. 2.当你用点击或者手势控制了之后,轮播图就不会自动滚动了,需要将swipe.js插件源代码进行修改: function stop() { //delay = 0; delay = options.auto > 0 ? options.auto : 0; clea…

移动端图片轮播—swipe滑动插件

swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>1</div> <div>2</div> <div>3</div> </div> </div> 1.最外层的div的id…

node --experimental-modules & node.js ES Modules

node --experimental-modules & node.js ES Modules how to run esm modules in node.js cli $ node -v # v12.18.0 $ uname -a # Darwin xgqfrms-mbp.local 19.5.0 Darwin Kernel Version 19.5.0: Tue May 26 20:41:44 PDT 2020; root:xnu-6153.121.2~2/RELEASE_X86_64…

Swipe2.1更新——移动Web内容滑块

Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动). 但是我使用一段时间后发现两个bug,所以在官方2.0(官网http://swipejs.com/)的基础上我做了一下优化,在这里定义为swipe2.1吧. 两点优化: 1.解决触摸滑动结束后停止自动播放的bug(代码分析,这里只提下修复bug的地方): handleEvent: function(event) { switch (event.type) { cas…

移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结一句话总结: 添加viewport标签:meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 添加viewport标签 <meta name="viewport" content=&quo…

Website's Game source code

A Darkroom by doublespeakgames <!DOCTYPE html> <html itemscope itemtype="https://schema.org/CreativeWork"> <head> <meta charset="UTF-8"/> <!-- A Dark Room (v1.4) ================== A minimalist text adventure…