手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效
特效描述:html5 手机触屏 滑动图片 下一张查看特效。html5图片下一张查看
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
Hungry cat 6
Whatever
Hungry cat 5
Whatever
Hungry cat 4
Whatever
Hungry cat 3
Whatever
Hungry cat 2
Whatever
Hungry cat
Whatever
Swipe left or right
$(document).ready(function () {
var animating = false;
var cardsCounter = 0;
var numOfCards = 6;
var decisionVal = 80;
var pullDeltaX = 0;
var deg = 0;
var $card, $cardReject, $cardLike;
function pullChange() {
animating = true;
deg = pullDeltaX / 10;
$card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
var opacity = pullDeltaX / 100;
var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);
var likeOpacity = opacity <= 0 ? 0 : opacity;
$cardReject.css('opacity', rejectOpacity);
$cardLike.css('opacity', likeOpacity);
}
;
function release() {
if (pullDeltaX >= decisionVal) {
$card.addClass('to-right');
} else if (pullDeltaX <= -decisionVal) {
$card.addClass('to-left');
}
if (Math.abs(pullDeltaX) >= decisionVal) {
$card.addClass('inactive');
setTimeout(function () {
$card.addClass('below').removeClass('inactive to-left to-right');
cardsCounter++;
if (cardsCounter === numOfCards) {
cardsCounter = 0;
$('.demo__card').removeClass('below');
}
}, 300);
}
if (Math.abs(pullDeltaX) < decisionVal) {
$card.addClass('reset');
}
setTimeout(function () {
$card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
pullDeltaX = 0;
animating = false;
}, 300);
};
$(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {
if (animating)
return;
$card = $(this);
$cardReject = $('.demo__card__choice.m--reject', $card);
$cardLike = $('.demo__card__choice.m--like', $card);
var startX = e.pageX || e.originalEvent.touches[0].pageX;
$(document).on('mousemove touchmove', function (e) {
var x = e.pageX || e.originalEvent.touches[0].pageX;
pullDeltaX = x - startX;
if (!pullDeltaX)
return;
pullChange();
});
$(document).on('mouseup touchend', function () {
$(document).off('mousemove touchmove mouseup touchend');
if (!pullDeltaX)
return;
release();
});
});
});
手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效相关推荐
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果
插件描述:jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码. 响应式触摸滑块 Javascript/css3 滑块 HTML This is a title This ...
- html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
- c语言触屏滑动图片,微信小程序左右滑动切换图片酷炫效果(附效果)(示例代码)...
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 2 ...
- 手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端 叠加图片 触屏滑动查看特效.html5手机叠加图片手指滑动查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
- 自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
- python手机触屏代码_JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
特效描述:html5电子杂志 支持手机端 触屏滑动 翻书效果.html5手机电子杂志,触屏滑动电子杂志翻书动画特效 代码结构 1. 引入JS 2. HTML代码 function loadApp() ...
- [html] HTML5的触屏事件有哪些?
[html] HTML5的触屏事件有哪些? touchstart 触摸开始 touchmove 接触点移动(手指不离开屏幕) touchend 触摸结束 touchcancel 触摸被取消 个人简介 ...
最新文章
- (转)C语言位运算详解
- 英特尔全新CPU和Xe独立显卡亮相,这次它把牙膏“挤爆了”
- 一个星期+4轮面试终拿下offer,进阶学习
- python右对齐格式化输出_python笔记-格式化输出(%和format的用法)
- 群晖ffmpeg_群晖Video station支持DTS和EAC3
- 重磅 | 《中国移动云网一体产品白皮书(2021)》发布!
- 2018年3月计算机二级考试题,2018年3月计算机二级考试Access综合试题十
- JAVA 使用Jacob调用windows的Sapi实现文本转语音文件
- git新手配置(ios环境)
- 前端文档汇总(觉得对您有用的话,别忘了给点个赞哦 ^_^ !)
- mysql win7 zip_win7 下zip版mysql安装
- 芯片烧录软件Android版,HiTool官方版
- SDL Trados外部审阅无法正常导入并显示修订的问题
- python网络测速_Linux下3种常用的网络测速工具
- Linux7 下Hadoop集群用户管理方案之五 安装Hadoop集群遇到的坑
- unity5.6.5_5.6现在可用并完成了Unity 5周期
- 用笔记本创建wifi热点
- vue项目打包出错:Unexpected token arrow «=>», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:626,2
- 债务纠纷案被录入终本库了怎么办?
- lsdyna如何设置set中的node_list_如何监视 DOM 树的变动?
热门文章
- 新来的00后实习生太牛了,已经被取代了.....
- 计算杨辉三角的第n行,第m项数字
- iOS人机界面指南(界面设计基础部分)ISUX原创翻译
- 经验分享:iOS平台UI设计规范
- Java开发环境实验报告,太香了
- 美国的高等教育对美国中产阶级及富豪形成产生的影响
- 短消息发送7Bit AscII编码符号的问题
- 析因设计方差分析(单独效应,主效应,交互效应)
- 爬虫有道云翻译中的js加密(2021年8月3日)-python3爬虫
- python安装pandas错误怎么解决,在Python中我安装了pandas,但它无法正常工作