javascript - CSS方法如何实现这种效果

问题描述

问 题

还是昨天的问题
橘黄色的数字的id 是 title
灰色的长条 id = bar

想要实现点击加号或者减号 橘黄色滑块跟橘黄色的数字一起向前或者后退移动

     var b = $$("#bar").width(); 获取灰色长条的长度
     var c = b / (9-1); 确定每次移动的距离
               
     $$("#title").css("left",  c + "px");  

用css的 这种方法 只能移动一次

开始用的获取offset().left的属性 但是那个距离太大了

应该怎么实现

JQ的其他方法用不了 就只能用这几个方法 用了一个封装在angular里面的框架 整合了JQ的部分功能 很多用不了的 所以比较纠结

解决方案

var i = 1;

$("#title").css("left",  (c*i) + "px"); 

定义一个i，每次点击加或者减 i 就加一或者减一

补充

    var b = $("#bar").width(); 获取灰色长条的长度
    var c = b / (9-1); 确定每次移动的距离
    var i = 0;
    $('#inc').click(function(){
        i++;
        i = i>9?9:i;
        $("#title").css("left",  ( c * i ) + "px"); 
    })
    $('#dec').click(function(){
        i--;
        i = i<1?1:i;
        $("#title").css("left",  ( c * i ) + "px"); 
    })

这篇关于javascript - CSS方法如何实现这种效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！