限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 动画效果

javascript带鼠标滑动控制的圆形进度滑块特效

所属分类： 网页特效-动画效果    2023-12-18 11:31:48

 2.3K  0  查看评论 (0)
javascript带鼠标滑动控制的圆形进度滑块特效 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

javascript带鼠标滑动控制的圆形进度滑块特效（共3个文件）

    • index.html

使用方法

  • code
  • source
  1. var sliders = document.getElementsByClassName("round-slider");

  2. console.log("Sliders:", sliders);

  3. for (let i = 0; i < sliders.length; i++) {

  4.     sliders[i].addEventListener("click", round_slider_tune, false);

  5.     sliders[i].addEventListener("mousedown", function(event) {

  6.         sliders[i].onmousemove = function(event) {

  7.             if (event.buttons == 1 || event.buttons == 3) {

  8.                 round_slider_tune(event);

  9.             }

  10.         }

  11.     });

  12. }

  13. 

  14. function round_slider_tune(event) {

  15.     let eventDoc = (event.target && event.target.ownerDocument) || document,

  16.         doc = eventDoc.documentElement,

  17.         body = eventDoc.body;

  18.     event.pageX = event.clientX +

  19.           (doc && doc.scrollLeft || body && body.scrollLeft || 0) -

  20.           (doc && doc.clientLeft || body && body.clientLeft || 0);

  21.     event.pageY = event.clientY +

  22.           (doc && doc.scrollTop  || body && body.scrollTop  || 0) -

  23.           (doc && doc.clientTop  || body && body.clientTop  || 0 );

  24.     let output = event.target.getElementsByClassName("selection")[0],

  25.         text = event.target.getElementsByClassName("holder")[0],

  26.         styleafter = document.head.appendChild(document.createElement("style")),

  27.         elpos = event.target.getBoundingClientRect(),

  28.         cX = elpos.width / 2,

  29.         cY = elpos.height / 2,

  30.         eX = event.pageX - elpos.left,

  31.         eY = event.pageY - elpos.top,

  32.         dX = 0,

  33.         dY = 0,

  34.         angle = Math.atan2(cX - eX, cY - eY) * (180 / Math.PI),

  35.         value = 100;

  36.     //console.log(cX, cY, eX, eY, angle);

  37. 

  38.     if (Math.abs(eX - cX) >= Math.abs(eY - cY)) { // 110 90

  39.         dX = 150 / 2 + Math.sign(eX - cX) * 150 / 2;

  40.         dY = 150 / 2 + (eY - cY) / Math.abs(eX - cX) * 150 / 2;

  41.     } else {

  42.         dX = 150 / 2 + (eX - cX) / Math.abs(eY - cY) * 150 / 2;

  43.         dY = 150 / 2 + Math.sign(eY - cY) * 150 / 2;

  44.     }

  45.     dX = Math.round(dX / 150 * 100)

  46.     dY = Math.round(dY / 150 * 100)

  47.     //console.log(dX + "%", dY + "%");

  48.     /*if (0 < angle && angle <= 45) {

  49.     } else if (45 < angle && angle <= 120) {

  50.     } else if ((120 < angle && angle <= 180) || (-180 < angle && angle <= -120)) {

  51.     } else if (-120 < angle && angle <= -45) {

  52.     } else if (-45 < angle && angle <= 0) {}*/

  53.     if (0 <= dX && dX < 50 && dY == 0) {

  54.         output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 50% 0%, 50% 50%);";

  55.         value = Math.round((50 - dX) / 50 * 12.5);

  56.     } else if (dX == 0 && 0 <= dY && dY <= 100) {

  57.         output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 0% 0%, 50% 0%, 50% 50%);";

  58.         value = Math.round(12.5 + dY / 100 * 25);

  59.     } else if (0 <= dX && dX <= 100 && dY == 100) {

  60.         output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);";

  61.         value = Math.round(37.5 + dX / 100 * 25);

  62.     } else if (dX == 100 && 0 <= dY && dY <= 100) {

  63.         output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);";

  64.         value = Math.round(62.5 + (100 - dY) / 100 * 25);

  65.     } else if (50 <= dX && dX <= 100 && dY == 0) {

  66.         output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);";

  67.         value = Math.round(87.5 + (100 - dX) / 50 * 12.5);

  68.     }

  69.     styleafter.innerHTML = ".round-slider .selection:after {transform: rotate(" + -angle + "deg);}";

  70.     let hue = Math.floor(value / 100 * 120),

  71.         saturation = Math.abs(value - 50);

  72.     text.innerHTML = value + "%";

  73.     text.style = "color: hsl(" + hue + ", 100%, " + saturation + "%);";

  74. }

var sliders = document.getElementsByClassName("round-slider");
console.log("Sliders:", sliders);
for (let i = 0; i < sliders.length; i++) {
    sliders[i].addEventListener("click", round_slider_tune, false);
    sliders[i].addEventListener("mousedown", function(event) {
        sliders[i].onmousemove = function(event) {
            if (event.buttons == 1 || event.buttons == 3) {
                round_slider_tune(event);
            }
        }
    });
}

function round_slider_tune(event) {
    let eventDoc = (event.target && event.target.ownerDocument) || document,
        doc = eventDoc.documentElement,
        body = eventDoc.body;
    event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
    let output = event.target.getElementsByClassName("selection")[0],
        text = event.target.getElementsByClassName("holder")[0],
        styleafter = document.head.appendChild(document.createElement("style")),
        elpos = event.target.getBoundingClientRect(),
        cX = elpos.width / 2,
        cY = elpos.height / 2,
        eX = event.pageX - elpos.left,
        eY = event.pageY - elpos.top,
        dX = 0,
        dY = 0,
        angle = Math.atan2(cX - eX, cY - eY) * (180 / Math.PI),
        value = 100;
    //console.log(cX, cY, eX, eY, angle);

    if (Math.abs(eX - cX) >= Math.abs(eY - cY)) { // 110 90
        dX = 150 / 2 + Math.sign(eX - cX) * 150 / 2;
        dY = 150 / 2 + (eY - cY) / Math.abs(eX - cX) * 150 / 2;
    } else {
        dX = 150 / 2 + (eX - cX) / Math.abs(eY - cY) * 150 / 2;
        dY = 150 / 2 + Math.sign(eY - cY) * 150 / 2;
    }
    dX = Math.round(dX / 150 * 100)
    dY = Math.round(dY / 150 * 100)
    //console.log(dX + "%", dY + "%");
    /*if (0 < angle && angle <= 45) {
    } else if (45 < angle && angle <= 120) {
    } else if ((120 < angle && angle <= 180) || (-180 < angle && angle <= -120)) {
    } else if (-120 < angle && angle <= -45) {
    } else if (-45 < angle && angle <= 0) {}*/
    if (0 <= dX && dX < 50 && dY == 0) {
        output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 50% 0%, 50% 50%);";
        value = Math.round((50 - dX) / 50 * 12.5);
    } else if (dX == 0 && 0 <= dY && dY <= 100) {
        output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 0% 0%, 50% 0%, 50% 50%);";
        value = Math.round(12.5 + dY / 100 * 25);
    } else if (0 <= dX && dX <= 100 && dY == 100) {
        output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);";
        value = Math.round(37.5 + dX / 100 * 25);
    } else if (dX == 100 && 0 <= dY && dY <= 100) {
        output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);";
        value = Math.round(62.5 + (100 - dY) / 100 * 25);
    } else if (50 <= dX && dX <= 100 && dY == 0) {
        output.style = "clip-path: polygon(" + dX + "% " + dY + "%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);";
        value = Math.round(87.5 + (100 - dX) / 50 * 12.5);
    }
    styleafter.innerHTML = ".round-slider .selection:after {transform: rotate(" + -angle + "deg);}";
    let hue = Math.floor(value / 100 * 120),
        saturation = Math.abs(value - 50);
    text.innerHTML = value + "%";
    text.style = "color: hsl(" + hue + ", 100%, " + saturation + "%);";
}

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 进度条圆形滑块进度滑块拖动
相关资源 / 动画效果
查看更多

CSS3创建的霓虹灯文本文字阴影效果

 一款CSS3字体发光动画特效，通过javascript脚本控制间隔时间，从触发字体带发光、闪烁效果。
  动画效果
 2321  0

jquery页面呈现3D卷闸门式收缩展开动画特效

 一款页面显示3D动画效果，点击右侧搜索按钮，可触发推拉门那样的水平横向动画，很有意思！
  动画效果
 2256  0

CSS3创建的3D计数器动画特效代码

 一款立体滚动的数字计时器插件，它显示在三维空间中，并且循环旋转数字，该动画模拟倒计时计时器。
  动画效果
 1654  0

jquery鼠标悬停导航菜单切换背景图片

 一款悬停切换背景图片特效，鼠标悬停导航菜单上触发页面背景图片切换。
  动画效果
 3141  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论