vue 兼容PC端和移动设备的滚动动画库

2024-08-29

scrollMenu，一款可滚动的菜单插件兼容pc和移动端

这个菜单有两种样式 , 也可以通过animate.css加不同的动画效果!滚动的方式也有两种一种为通用的overflow,另外一种是better-scroll的滚动效果在线链接地址 http://www.daiwei.org/works/UI/scrollMenu/github下载地址 https://github.com/IFmiss/scrollMenu 感觉不错的话给个star哦!!! 原博客地址: http://www.daiwei.org/blog/

一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. [English documents] 特性原生js移动端选择控件,不依赖任何库可传入普通数组或者json数组可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选

移动端—— 兼容PC端，移动端的点击事件

移动设备上不支持鼠标事件,好在webkit内核的移动浏览器支持 touch 事件,所以触摸事件是移动应用中所必须的.touchstart.touchmove.touchend事件可以类比于mousedown.mouseover.mouseup的触发. 一.touch 相应事件 touchstart : 当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发.touchmove : 当手指在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动.touch

vue实现PC端分辨率适配

lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖首先需要安装 vue-cli 脚手架,这里我安装的是 cli3. 项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader. npm install lib-flexible --save-dev npm i postcss-px2rem --save 接着在项目入口文件 main.js 中引入 lib-fle

js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div>  <img @click="callCamera" :src="headImgSrc" alt="摄像头">  <canvas "><

vue实现pc端上拉加载功能，不兼容移动端

所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的数据可以不必理会. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <l

vue实现pc端无限加载功能

主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事件, <template> <div class="index" v-scroll="loadMore">  <my-item :l

[js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器

js dialog组件,包含alert和confirm的实现本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js dialog弹窗用法这是内容 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="di

黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const wx = new WxAudio({ ele: '.wx-audio', title: '河山大好', disc: '许嵩', src: '....', width: '320px', loop: true, ende

兼容pc端和移动端的轮播图插件 swiper.js

swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/index.html#file1 swiper.js提供给我们很多种不同的demo效果,我们可以根据自己的需求来选择自己需要.所有demo的HTML部分,CSS几乎是一样的,不一样的是调用的js方法,或配置的参数不同来达到不同的效果. 使用方法首先我们引入 swiper.min.css和 swip

手把手教你做一个原生js拖动滑块【兼容PC和移动端】

废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代PC端的"mouse"事件. 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 tou

网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下面就为大家详细讲解: PC端: PC端相应简单些,浏览器对<video>标签的兼容还是很好的,但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现: <video // 设置后,音频会初始化为静音,注意浏览器只有设置静音,才能自动播放 muted // 视频会马上自动

PC端的鼠标拖拽滑动

1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=function () { oDiv=document.getElementById('div1'); oDiv.onmousedown=fnDown; }; function fnDown(ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLef

一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

介绍我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal.侧边栏等等. 深入研究-webkit-overflow-scrolling:touch及ios滚动详细文档 & 例子 Document & Demo vue-scroll-lock 一个 VUE 组件:子元素 scroll 父元素容器不跟随滚

JS判断当前使用设备是pc端还是web端（转MirageFireFox）

js判断当前设备最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url web端url 百度 www.baidu.com m.baidu.com 淘宝 www.taobao.com m.taobao.com 京东 www.jd.com m.jd.com 网易 www.163.com 3g.163.com /*判断当前设备跳转到指定地址.PCurl:PC端地址:WebUel:

PC端、移动端的页面适配及兼容处理

转自一.关于移动端兼容性目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有终端. 这两种思路我们并不能斩钉截铁的说哪一个更优选,正所谓”合适的才是最好的”. 思路一:通过响应式或页面终端判断去实现一套资源适配所有终端优势:只需维护一套资源,维护成本较低. 劣势:需加载适配各个终端的各个资源,在不同终端通过响应式布局实现不同展现,部分交互效果需要在页面中做终端判断,代价较

vue 项目切换手机端和pc端。同一个项目，配置不同的路由

1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { Vue.prototype.$pc = false hostConfig.vconsole && new VConsole() } else { Vue.prototype.$pc = true let winWidth = document.documentEle

使用vue实现简单键盘，支持移动端和pc端

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘兼容性优化实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList&

如何直接在 PC 端获取其它端设备的 UserAgent 信息呢？

如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序希望收集一批移动端(手机.平板.Kindle 以及不同的产商,如苹果.三星.谷歌和诺基亚等)或者桌面端(谷歌.火狐.Oprea 和 IE 等)的 UA 信息. 这里主要通过 Chrome 自带的开发工具介绍用法,并且以 FireFox 作为补充说明. 目录通过 Chrome 的 Emulation 选项

探讨兼容IE低版本的PC端响应式布局

http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了,但这次也很有必要拿出来探讨下.为什么呢?往下看呗... 最近在折腾公司首页的改版,设计师设计了三个版本,宽度分别为1600px,1200px,960px.看到这三个尺寸的设计,很明显需要做PC端的响应式,我们都知道针对IE9+和其他高富帅浏览器的响应式,使用Media Query轻松搞定.至于I

vue 兼容PC端和移动设备的滚动动画库

热门专题