/**
* 小圆点滑动
* @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值,让小原点根据不同值区间去左右定位的更多相关文章

  1. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

  2. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

  3. 聊一聊jquery文件上传(支持多文件上传)

    谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...

  4. Spring MVC之中前端向后端传数据

    Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况. 一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在 ...

  5. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  6. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  7. jQuery文件上传插件Uploadify(转)

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  8. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  9. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

随机推荐

  1. GhostNet: 使用简单的线性变换生成特征图,超越MobileNetV3的轻量级网络 | CVPR 2020

    为了减少神经网络的计算消耗,论文提出Ghost模块来构建高效的网络结果.该模块将原始的卷积层分成两部分,先使用更少的卷积核来生成少量内在特征图,然后通过简单的线性变化操作来进一步高效地生成ghost特 ...

  2. spring boot 学习(一)——在idea建立第一个spring boot项目

    1.打开idea->点击file->点击new->点击project->点击Spring Initializr->点击default 2.这是springboot的启动类 ...

  3. Python爬虫利器 cURL你用过吗?

    hello,小伙伴们,今天给大家分享的开源项目是一个python爬虫利器,感兴趣的小伙伴看完这篇文章不妨去尝试一下,这个开源项目就是curlconverter,不知道小伙伴们分析完整个网站后去code ...

  4. 使用 Python 查看局域网内存活主机

    1 安装 (如果误用了 pip insatll nmap的话,要先 pip uninstall nmap) pip install python-nmap Nmap 是一款用于网络发现和安全审计的网络 ...

  5. nghttp2 交叉编译

    touch run.sh chmod 755 run.sh mkdir build cd build ../run.sh run.sh #!/bin/bash #cd build ../configu ...

  6. JPA入门例子(采用JPA的hibernate实现版本) --- 会伴随 配置文件:persistence.xml

    JPA入门例子(采用JPA的hibernate实现版本) 分类: j2se2011-03-30 16:09 45838人阅读 评论(9) 收藏 举报 jpahibernate数据库jdbcjava框架 ...

  7. SVG 案例:动态去创建分支节点,当鼠标经过某个节点时,分支线会高亮

    css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hid ...

  8. Redisson 实现分布式锁的原理分析

    写在前面 在了解分布式锁具体实现方案之前,我们应该先思考一下使用分布式锁必须要考虑的一些问题.​ 互斥性:在任意时刻,只能有一个进程持有锁. 防死锁:即使有一个进程在持有锁的期间崩溃而未能主动释放锁, ...

  9. springboot集成JdbcTemplate+druid

    application.yml datasource: username: root password: root url: jdbc:mysql://localhost:3306/early_war ...

  10. C语言 贪吃蛇

    贪吃蛇(单人版): 本人先来介绍一个函数 -- bioskey函数: int bioskey (int cmd) 参数 (cmd) 基本功能 0 返回下一个从键盘键入的值(若不键入任何值,则将等下一个 ...