jquery 根据后端传过来的value值,让小原点根据不同值区间去左右定位

/**
* 小圆点滑动
* @param {目标dom} barEle
* @param {最小值} min
* @param {最大值} max
* @param {dom总长度} domLang
* @param {小圆点大小} circleWidth
*/
function sliderBar(barEle, min, max, domLang, circleWidth) {
let circleLeft;
if($(barEle).data('val') > max) {
circleLeft = domLang - circleWidth / 2 + 'px'
} else if($(barEle).data('val') < min) {
circleLeft = - circleWidth / 2 + 'px'
} else {
circleLeft = ($(barEle).data('val') - min) * (domLang / (max - min)) - circleWidth / 2 + 'px';
}
return circleLeft;
}
$('.circle').css({
left: sliderBar('.circle', 40, 160, 260, 60)
})
jquery 根据后端传过来的value值,让小原点根据不同值区间去左右定位的更多相关文章
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
- jquery 根据后台传过来的值动态设置下拉框、单选框选中
更多内容推荐微信公众号,欢迎关注: jquery 根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...
- 聊一聊jquery文件上传(支持多文件上传)
谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...
- Spring MVC之中前端向后端传数据
Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
随机推荐
- 【python实现卷积神经网络】池化层实现
代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...
- 基于 HTML5 WebGL 的 CPU 监控系统
前言 科技改变生活,科技的发展带来了生活方式的巨大改变.随着通信技术的不断演进,5G 技术应运而生,随时随地万物互联的时代已经来临.5G 技术不仅带来了更快的连接速度和前所未有的用户体验,也为制造业, ...
- 常用vscode 插件第一季
VSCODE 常用插件第一季 1.chinese 此插件中文(简体)语言包为 VS Code 提供本地化界面. https://marketplace.visualstudio.com/items?i ...
- .NET Core3.1总体预览和第一个Core程序的创建
小伙伴们大家好!欢迎阅读本贴,这里是常哥说编程的专栏,.NetCore已经出来一段时间了,很多小伙伴可能也开始了学习,但是.NetCore毕竟在学习上和我们常用的.NET Framework还是有很大 ...
- BUUOJ [CISCN2019 华北赛区 Day2 Web1]Hack World
补一下这道题,顺便发篇博客 不知道今年国赛是什么时候,菜鸡还是来刷刷题好了 0X01 考点 SQL注入.盲注.数字型 0X02自己尝试 尝试输入1 赵师傅需要女朋友吗???随便都能有好吧 输入2 ?? ...
- 实例讲解Springboot以Template方式整合Redis及序列化问题
1 简介 之前讲过如何通过Docker安装Redis,也讲了Springboot以Repository方式整合Redis,建议阅读后再看本文效果更佳: (1) Docker安装Redis并介绍漂亮的可 ...
- python3如何不生成pyc文件
使用-B参数 即 python3 -B test.py 设置环境变量 export PYTHONDONTWRITEBYTECODE=1 在导入的地方增加 import sys sys.dont_wri ...
- kafka相关术语名词
Topic:标签名,一个消息队列的名称 Producer:生产者,发布消息 Consumer:消费者,订阅发布消息,进行处理的存在 Broker:kafka集群,有一个.多个Topic Partiti ...
- ES6系列-什么是ES6?新手应该怎么理解
ECMAScript 是什么 很多初学者都很困惑,ECMAScript是什么?它跟JavaScript有什么关系? 大家注意到了吗?从题目中我们就可以看出来了,ECMAScript是JavaScrip ...
- MAC地址欺骗(原理及实验)
MAC地址欺骗 MAC地址欺骗(或MAC地址盗用)通常用于突破基于MAC地址的局域网访问控制,例如在交换机上限定只转发源MAC地址修改为某个存在于访问列表中的MAC地址即可突破该访问限制,而且这种修改 ...