common-ui-asdiver v1.0.11
common-ui-asdiver
a simple UI Library for study。
Installing
Using npm:
$ npm install common-ui-asdiverExample
At present, there are only rotation charts
Suppose you need one rotation at a dom just set size and give it to package
<body>
<div class="total">
</div>
</body>
<style>
/* The recommended size is the same as the reserved image */
.total{
width: 600px;
height: 400px;
background-color: pink;
}
</style>use->
const UI = require("common-ui-asdiver")
const retation = new UI.Rotation(".total",
//source imgs
[{
src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665314220&t=dc9d86b9b54d484143dd424bf5447b01",
clickFunction:(e)=>{
console.log(e);
}
},{
src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665452390&t=60a46609e614183e2d972f32f4ad50b0",
clickFunction:(e)=>{
console.log(e);
}
},{
src:"https://imgcps.jd.com/ling4/100037199897/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa1b/ec752cb5/cr/s/q.jpg",
clickFunction:(e)=>{
console.log(e);
}
}],{
//about move set up（required）
move:{
//speed
moveTime:"0.5s",
// is auto move
autoMoveOpen:true,
//the direction of auto move ,negative to left, positive number to right
autoMoveDirection:1,
//movement interval
autoMoveTime:2000,
//slide move in mobile terminal (warning : user active movement only be one mode,it means touchMove and buttonStyle just choose one)
touchMove:true
},
//buttonType (is optional. Without this attribute, it means that it is not used)
// buttonStyle:{
// //whether to display when the mouse is not on the box
// mouseOutDisplay:true,
// //button size
// height:"30px",
// width:"21px",
// //button color
// buttonColor:"yellow",
// LeftButtonDomFunc(buttonDom){
// const img = document.createElement("img")
// buttonDom.appendChild(img)
// //...
// },
// RightButtonDomFunc(buttonDom){
// const img = document.createElement("img")
// buttonDom.appendChild(img)
// //...
// }
// },
//The button list at the bottom (is optional. Without this attribute, it means that it is not used)
dotStyle:{
//color when not selected
unSelectColor:"black",
//color when selected
selectColor:"yellow",
//button transparency
opacity:0.5,
//size of button
size:"20px",
//style of button
borderRadius:"50px",
//spacing
margin:"0px 5px",
//provide dom to height customization, you can even change the default style
dotDomFunc(dotDomTotal){
dotDomTotal.style.bottom = "5px"
dotDomTotal.childNodes.forEach(element => {
element.style.transition = `width 0.5s ease-in-out`;
});
},
//if you want have a prettier transition when dot been checked , I suggest add transition in dotDomFunc,this provide a case
//Called when select
selectFunc(dotDom){
dotDom.style.width = "60px"
},
//Called when unSelect
unSelectFunc(dotDom){
dotDom.style.width = "20px"
},
}
})than work.
If you want to abandon this rotation,especially when vue switch router onBeforeUnmount. (in fact, I need release package for vue,this is the last word)
//it will clear dom element and automove interval
retation.abandon()let me know if you have any questions.
heistory
1.0.10
add abandon function to clear itself
1.0.6 - 1.0.9
fix bug
1.0.5
buttonStyle change to not required
add move.touchMove (mobile terminal)
rich dotStyle
1.0.4
add dotStyle.dotDomFunc and buttonStyle.LeftButtonDomFunc / RightButtonDomFunc to provide height customization, you can even change the default style
1.0.3
Info property
ButtonType change to buttonStyle, dots change to dotStyle.
Source code notes user jsdoc （chinese）
other patch...