您的位置：首页技术文章
文章详情页

jquery - 移动端如何写弹性效果

浏览：133日期：2024-06-11 09:35:00

问题描述

在这个网页的第2个例子【自适应 / 全屏 + 分页】中http://www.swiper.com.cn/demo/index.html如果按住鼠标向右拖动，会发现可以拖动，然后放开鼠标，就会'弹'回去，观察代码发现，是用了下面这个css3代码transition-duration: 0ms; transform: translate3d(86.6443px, 0px, 0px);那么问题来了，这个拖拉后弹回去的js效果要怎么写呢？哪位大神有思路？提供一下啦。谢谢!jquery - 移动端如何写弹性效果

问题解答

回答1：

给元素加上css3过渡动画，过渡动画的值为transform3d的x轴，手指拖动的距离即为这个x轴的值，当手指放开，把x轴的值还原，也就是0px

回答2：

看api 有滑动效果的 或者自己写个动画，无非就是调节贝塞尔曲线出现缓存

上一条：前端 - 怎样让scale缩小的元素不占据原来的空间？下一条：前端 - 提问关于background-image不显示的问题
相关文章：
1. python - 两千万条结构化数据怎么进行数据分析2. javascript - angularJS module之间可以通信吗？3. 微信小程序可以用gulp,webpack吗？4. javascript - 小米浏览器中，图片导致fixed定位的元素无法显示5. javascript - 为什么!function foo(){}返回false，!function foo(){}()返回true？6. java-web - Java WEB：什么样的jar包必须放到WEB-INF下？有些包放外面tomcat就起不来7. 用tp5框架写sql语句8. thinkphp5.1学习时遇到session问题9. java - yuicompressor-maven-plugin 合并可用却不压缩, 哪配置不对？10. java - intellij idea 无法启动spring-boot
排行榜
angular.js - ng-grid 和tabset一起用时，grid width默认特别小
angular.js - ng-grid 和tabset一起用时，grid width默认特别小
1. 微信小程序可以用gulp,webpack吗？
2. python - 两千万条结构化数据怎么进行数据分析
3. Android-studio导入.so库问题？
4. javascript - angularJS module之间可以通信吗？
5. Android 关于图片压缩的问题。
6. thinkphp5.1学习时遇到session问题
7. java - yuicompressor-maven-plugin 合并可用却不压缩, 哪配置不对？
8. java-web - Java WEB：什么样的jar包必须放到WEB-INF下？有些包放外面tomcat就起不来
9. 用tp5框架写sql语句
10. javascript - 小米浏览器中，图片导致fixed定位的元素无法显示
热门标签