重慶分公司
重慶分公司
基于sui卡尺組件-創(chuàng)新互聯(lián)
calliphers.js
富源ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為
成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
define(function(){
var callipers = {};
var spaceWidth = 7; // 間隔
var height = 50; // 默認(rèn)高度
var callipersHtml = " "+
" "+
" "+
" "+
"
"+
"
"+
" "+
" ";
// 獲取數(shù)字長度
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
}
// 初始化 標(biāo)尺
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
test.js
define(["callipers"], function(callipers) {
$(document).on("pageInit", "#test", function(e, pageId, $page) {
callipers.init({
container:$page.find(".callipers"),
min:20,
max:220,
initValue:90,
progressCallback:function(value){
console.log("value");
},
transitionEndCallback:function(value){
console.log("value");
}
});
});
$.init();
});
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章名稱：基于sui卡尺組件-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://weahome.cn/article/ccjhih.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
