基于sui卡尺组件-创新互联
calliphers.js
富源ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为
成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
define(function(){
var callipers = {};
var spaceWidth = 7; // 间隔
var height = 50; // 默认高度
var callipersHtml = " "+
" "+
" "+
" "+
"
"+
"
"+
"
"+
"
";
// 获取数字长度
function getNumberLength(number){
var str = ""+number;
return str.length;
}
function createImage(container,width,height,minValue,maxValue){
var containerWidth = $(container).width();
var c=$(container).find("canvas")[0];
var ctx=c.getContext("2d");
var multiplyingPower=2;
c.width=width*multiplyingPower;
c.height=height*multiplyingPower;
ctx.strokeStyle="#36384d";
ctx.lineWidth=1*multiplyingPower;
// 绘制底部线条
ctx.beginPath();
ctx.moveTo(containerWidth/2*multiplyingPower,height*multiplyingPower);
ctx.lineTo(width*multiplyingPower-containerWidth/2*multiplyingPower,height*multiplyingPower);
ctx.stroke();
// 绘制
for(var i=minValue;i<=maxValue;i++){
var newIndex = spaceWidth*(i-minValue)+containerWidth/2;
ctx.moveTo(newIndex*multiplyingPower,50*multiplyingPower);
if(i==minValue){
ctx.fillStyle="#959AB9";
ctx.font="24px Arial ";
ctx.fillText(i,(newIndex-3)*multiplyingPower,28*multiplyingPower);
ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);
}else if(i%10==0){// 绘制长线
ctx.font="24px Arial";
ctx.fillText(i,(newIndex-6*(getNumberLength(i)-1))*multiplyingPower,28*multiplyingPower);
ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);
}else{//绘制短线
ctx.lineTo(newIndex*multiplyingPower,43*multiplyingPower);
}
ctx.stroke();
}
var p_w_picpathDataUrl = c.toDataURL();
$(container).find("canvas").remove(); // 删除canvas
return p_w_picpathDataUrl;
}
function resetSwiperTransition(swiper){
var translate = swiper.getWrapperTranslate();
var offset = translate%spaceWidth;
offset = offset*-1;
if(offset>spaceWidth/2){
translate = (parseInt(translate/spaceWidth)-1)*spaceWidth;
}else{
translate = (parseInt(translate/spaceWidth))*spaceWidth;
}
swiper.setWrapperTranslate(translate);
var offsetValue = translate/spaceWidth*-1;
return offsetValue;
}
function render(container,settings){
settings = settings||{};
var minValue = settings.min||0;
var maxValue = settings.max||200;
var progressCallback = settings.progressCallback||function(){};
var transitionEndCallback = settings.transitionEndCallback||function(){};
var initValue = settings.initValue||parseInt((maxValue-minValue)/2+minValue);
var containerWidth= $(container).width();
var width = spaceWidth*(maxValue-minValue)+containerWidth;
$(container).html(callipersHtml);
container.attr("data-min",minValue);
container.attr("data-max",maxValue);
var dataURL = createImage(container,width,height,minValue,maxValue);
$(container).find(".callipers-content").css({
"background-p_w_picpath":"url("+ dataURL+")",
"width":width+"px"
});
setTimeout(function(){
$(container).find(".swiper-container").swiper({
runCallbacksOnInit:false,
freeModeMomentumRatio:0.2,
touchRatio:0.5,
slidesPerView: "auto",
resistanceRatio: 0,
freeMode: true,
onInit:function(swiper){
var value = resetSwiperTransition(swiper)+minValue;
var offset = (initValue-minValue)*spaceWidth*-1;
swiper.setWrapperTranslate(offset);
container.attr("data-value",initValue);
swiper.updateProgress();
container.addClass("initialized");
},
onTouchEnd:function(swiper){
var value = resetSwiperTransition(swiper)+minValue;
transitionEndCallback(value);
container.attr("data-value",value);
},
onTransitionEnd:function(swiper){
var value = resetSwiperTransition(swiper)+minValue;
transitionEndCallback(value);
container.attr("data-value",value);
},
onProgress:function(swiper,progress){
var value = parseInt(swiper.getWrapperTranslate()/spaceWidth)*-1+minValue;
progressCallback(value);
container.attr("data-value",value);
}
});
},100);
// init swiper
}
// 初始化 标尺
function init(settings){
var container = settings.container;
$(container).each(function(){
render($(this),settings);
});
}
callipers.init = init;
return callipers;
});
calliphers.css
.callipers{position:relative;opacity:0;}
.callipers.initialized{
opacity:1;
}
.callipers canvas{display:none;}
.callipers:before{
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
width:1px;
height:47px;
background-color:#b540a8;
margin:auto;
z-index: 99;
}
.callipers .callipers-content{
height:50px;
background:no-repeat center center;
background-size:contain;
}
.callipers .swiper-container{padding:0;}
.callipers .swiper-container .swiper-wrapper{height:auto;}
.callipers .swiper-container .swiper-slide{width:auto;height:auto;}test.html
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
