手写滑动同步滚动进度条jq插件
因需要一种滑动显示内容，并且带可拖动的进度条，即下面这种效果
找了很多插件，总有地方不能满足需求。于是决定自己手写，下面为完整源码：
swiper.js
1 $.swiperCalculator = function (wrap, drag) {
2 this.wrap = wrap;
3 this.drag = drag;
4 this.dWidth = drag.width();
5 this.pWidth = drag.parent().width() - drag.width();
6 this.lWidth = wrap.children().outerWidth(true);
7 this.wWidth = wrap.parent().width();
8 this.num = wrap.children().length - 1;
9 }
10 $.extend($.swiperCalculator.prototype, {
11 setPostion: function (wrapX, dragX) {
12 this.wrap.css('transform', 'translate3d(' + wrapX + 'px, 0px, 0px)');
13 if (dragX < 0) dragX = 0;
14 if (dragX > this.pWidth) dragX = this.pWidth;
15 this.drag.css('left', dragX + 'px');
16 this.drag.parent().siblings('.pro-val').html(parseInt(dragX / this.pWidth * 100) + '%');
17 this.drag.siblings('.pro-bar').css('width', (dragX + this.dWidth) + 'px');
18 },
19 initPostion: function (i) {
20 let wrapX, dragX;
21 dragX = i * this.pWidth / this.num;
22 if (i == 0) wrapX = 0;
23 else if (i == this.num) wrapX = this.wWidth - (this.num + 1) * this.lWidth - 15;
24 else wrapX = dragX - i * this.lWidth - 5;
25 this.wrap.css('transition-duration', '0.3s').children('li').removeClass('active').eq(i).addClass('active');
26 this.drag.css('transition-duration', '0.3s');
27
28 this.setPostion(wrapX, dragX);
29 }
30 });
31
32 let $element, posX, isTouched = false;
33
34 $.fn.extend({
35 swiper: function () {
36 let $wrap = $(this).find('.wrapper ul');
37 let $li = $wrap.children('li');
38 $wrap.css('width', ($li.length + 1) * $li.outerWidth(true) + 'px').mousedown(function (e) {
39 isTouched = true;
40 if (e.preventDefault) e.preventDefault();
41 else e.returnValue = false;
42
43 posX = e.pageX;
44 $element = $(this);
45 });
46 $(this).find('.drag').mousedown(function (e) {
47 isTouched = true;
48 if (e.preventDefault) e.preventDefault();
49 else e.returnValue = false;
50
51 posX = e.pageX;
52 $element = $(this);
53 })
54 return $(this);
55 },
56 mouseMove: function (x) {
57 let $p = $(this).closest('.swiper')
58 let $wrap = $p.find('.wrapper ul');
59 let $drag = $p.find('.drag');
60
61 let sc = new $.swiperCalculator($wrap, $drag);
62 let num = sc.num + 1;
63 let dragX = $drag.position().left;
64 if (x == 0) {
65 let i = Math.round(dragX / sc.pWidth * (num - 1));
66 sc.initPostion(i);
67 } else {
68 let wrapX;
69 if ($(this).is($drag)) {
70 wrapX = -1 * x / sc.pWidth * num * sc.lWidth;
71 } else {
72 wrapX = x;
73 x = wrapX / (num * sc.lWidth) * -sc.pWidth;
74 }
75 wrapX += parseFloat($wrap.css("transform").match(/matrix\(([^)]+)\)/)[1].split(", ")[4]);
76 dragX += x;
77
78 $wrap.css('transition-duration', '0s');
79 $drag.css('transition-duration', '0s');
80 sc.setPostion(wrapX, dragX);
81 }
82 }
83 })
84
85 $(document).mousemove(function (e) {
86 if (!isTouched) return;
87 if (e.preventDefault) e.preventDefault();
88 else e.returnValue = false;
89
90 $element.mouseMove(e.pageX - posX)
91 posX = e.pageX;
92 }).mouseup(function (e) {
93 if (!isTouched) return;
94 isTouched = false;
95
96 $element.mouseMove(0);
97 });
test.html
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>XXX</title>
8 <style>
9 .wrapper{width: 885px; overflow: hidden;background: #fff; padding: 10px 0;}
10 .wrapper ul{transform: translate3d(0px, 0px, 0px);}
11 .wrapper li{float: left; width: 120px; height: 121px; margin: 5px; padding: 10px; text-align: center; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.1);;border-radius: 6px;}
12 .wrapper li.active{box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 4px 5px rgba(0,0,0,.14);}
13 .wrapper li.end{line-height: 120px;}
14 .wrapper li img{width: 100px; height: 100px;}
15 .progress{position: relative;float: left;width: 755px;height: 10px; margin: 10px 0; border-radius: 4px; background-color: #e6e7e9;}
16 .pro-bar{height: 10px;background-color: #2fb344;border-radius: 4px;}
17 .drag{position: absolute; top:-10px;left:0;}
18 .txt{float: left;font-size: 16px; color: #f76707; line-height: 30px; margin-left: 10px;}
19 .pro-txt{width: 45px;}
20 </style>
21 </head>
22
23 <body>
24 <div class="swiper">
25 <div class="wrapper">
26 <ul>
27 <li>
28 <img src="xxxx.jpg">
29 <p>第1张图</p>
30 </li>
31 <li>
32 <img src="xxxx.jpg">
33 <p>第2张图</p>
34 </li>
35 <li>
36 <img src="xxxx.jpg">
37 <p>第3张图</p>
38 </li>
39 <li>
40 <img src="xxxx.jpg">
41 <p>第4张图</p>
42 </li>
43 。
44 。
45 。
46 <li class="end">END</li>
47 </ul>
48 </div>
49 <div>
50 <div class="txt pro-txt">进度</div>
51 <div class="progress">
52 <div class="pro-bar"></div>
53 <div class="drag"><img src="yyyy.png"></div>
54 </div>
55 <div class="txt pro-val"></div>
56 </div>
57 </div>
58
59 <script type="text/javascript" src="/js/jquery18.js" charset="utf-8"></script>
60 <script type='text/javascript' src='/js/swiper.js'></script>
61 <script type="text/javascript">
62 $('.swiper').swiper();
63 //默认选中第4幅图，也可不用
64 let sc = new $.swiperCalculator($('.wrapper ul'), $('.drag'));
65 sc.initPostion(3);
66 </script>
67 </body>
68
69 </html>
手写滑动同步滚动进度条jq插件的更多相关文章
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
- 放弃antd table，基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- CSS 实现滚动进度条效果
参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用sys模块写一个软件安装进度条
import sys,time for i in range(50): sys.stdout.write('#') sys.stdout.flush() #强制刷新将内存中的文件写一条,输出一条. t ...
- [WPF]有滑动效果的进度条
先给各位看看效果,可能不太完美,不过效果还是可行的. 我觉得,可能直接放个GIF图片上去会更好. 我这个不是用图片,而是用DrawingBrush画出来的.接着重做ProgressBar控件的模板,把 ...
- 用 Python 写出这样的进度条，刷新了我对进度条的认知
❞ 1 简介 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给 ...
- js+php实现文件上传显示文件上传进度条的插件
文件上传利器SWFUpload使用指南(swfupload官网) 上传文件显示进度条效果的插件swfupload.js
随机推荐
- 在线问诊 Python、FastAPI、Neo4j — 创建症状节点
目录 症状数据 创建节点 附学习 电子病历中,患者主诉对应的相关检查,得出的诊断以及最后的用药情况.症状一般可以从主诉中提取. 症状数据 symptom_data.csv CSV 中,没有直接一行一个 ...
- ES 2023新特性速解
ES 2023新特性速解 一.新增数组方法 操作数组的方法 Array.prototype.toSorted(compareFn) //返回一个新数组,其中元素按升序排序,而不改变原始数组. Arra ...
- 大白话带你认识JVM(转)
转自微信公众号(JavaGuide) 前言 如果在文中用词或者理解方面出现问题,欢迎指出.此文旨在提及而不深究,但会尽量效率地把知识点都抛出来 一.JVM的基本介绍 JVM 是 Java Virtua ...
- 【matplotlib 实战】--柱状图
柱状图,是一种使用矩形条,对不同类别进行数值比较的统计图表.在柱状图上,分类变量的每个实体都被表示为一个矩形(通俗讲即为"柱子"),而数值则决定了柱子的高度. 1. 主要元素 柱状 ...
- Django-rest-framework框架——Web应用模式、API接口、接口测试工具（Postman）、RESTfulAPI规范、序列化、drf、环境安装与配置、CBV源码分析、 APIView
@ 目录 一 Web应用模式 1.1 前后端不分离 1.2 前后端分离 二 API接口 三 接口测试工具:Postman 四 RESTful API规范(背诵牢记) 4.1 数据的安全保障 4.2 接 ...
- .NET 8 候选版本 2 (RC2) 现已可用
.NET 8 候选版本 2 (RC2) 现已可用,并包含了许多 ASP.NET Core 的出色新改进! 这是我们计划在今年晚些时候发布的最终 .NET 8 版本之前分享的最后一个候选版本..NET ...
- Python shape+size详解
import cv2 from PIL import Image # pic.JPG 图片的路径 img = cv2.imread("pic.JPG",-1) print(&quo ...
- K8S太庞大，这款PasteSpider绝对适合你！一款轻量级容器部署管理工具
PasteSpider采用.netcore编写,运行于linux服务器的docker/podman里面,涉及的技术或者工具有podman/docker,registry,nginx,top,ssh,g ...
- Stable-diffusion WebUI API调用方法
写这篇文章的主要原因是工作中需要写一个用训练好的模型批量生图的脚本,开始是想用python直接加载模型,但后来发现webui的界面中有不少好用的插件和参数,所以最终改成调用WebUI接口的方式来批量生 ...
- .NET周刊【10月第2期 2023-10-08】
国内文章 起风了,NCC 云原生项目孵化计划 https://www.cnblogs.com/liuhaoyang/p/ncc-the-wind-rises.html 2016年,我和几位朋友发起了. ...