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无刷新上传,多个文件同 ...
随机推荐
- Vue-CLI 3.x 部署项目至生产服务器
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程主要讲解的是 Vue ...
- python3(二十一) pip
先确保安装了windows的Python的pip 出现上图说明安装了,命令未找到则没有安装 安装一个图形处理的第三方库 Anaconda安装第三方库 我们经常需要用到很多第三方库,如MySQL驱动程序 ...
- 【翻译】Java Array的排名前十方法(Top 10 Methods for Java Arrays)
这里列举了Java Array 的前十的方法.他们在stackoverflow最大投票的问题. The following are top 10 methods for Java Array. The ...
- Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(十四)之Type Information
Runtime type information (RTTI) allow you to discover and use type information while a program is ru ...
- 运输层--------运输层与网络层的关系、UDP、TCP
一.运输层与网络的区别: 网络层提供了主机之间的逻辑通信,而运输层为运行在不同主机上的进程之间提供了逻辑通信 二.实例证明: 考虑有两个家庭,一家位于美国东岸,一家位于美国西海岸,每家有12孩子.东海 ...
- Cobalt Strike系列教程第六章:安装扩展
Cobalt Strike系列教程分享如约而至,新关注的小伙伴可以先回顾一下前面的内容: Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...
- ubuntu允许root远程登录
之前说了,怎么设置root用户登录,但是使用Xshell等工具操作Ubuntu,用户登录不进去,原因很简单,没有开启root登录的权限. 1.检查ssh服务是否开启 使用以下命令,查看是否开启 ps ...
- 原创Pig0.16.0安装搭建
tar -zxvf pig-0.16.0.tar.gz -C ~ vi ~/.bash_profile export PIG_HOME=/home/hadoop/pig-0.16.0 export ...
- STL入门大全(待编辑)
前言:这个暑假才接触STL,仿佛开启了新世界的大门(如同学完结构体排序一般的快乐\(≧▽≦)/),终于彻底领悟了大佬们说的“STL大法好”(虽然我真的很菜www现在只学会了一点点...)这篇blog主 ...
- Python 代码编辑器怎么选?PyCharm、VS Code、Jupyter Notebook 都各有特色
Python 代码编辑器怎么选?PyCharm.VS Code.Jupyter Notebook 都各有特色,Jupyter 适合做数据分析这些需要可视化的操作,PyCharm 更适合做完整的 Pyt ...