js设置div的位置

一、js设置div的位置

JS语言是不能够直接修改DIV的位置的，因为位置属于该控件的样式，若想用JS这种脚本语言调整DIV的位置，需要调用DIV的style属性进行设置，也就是需要调整DIV的CSS样式表。修改分步骤：

2、设置调整。修改的示例代码如下： var div1= document.getElementById('baiduSearch')； div1.style.marginTop='225px';通常position的属性没有设置或设了默认值absolute，所以使用的都是静态属性，这样就可以直接通过给位置属性数值来更改元素位置。在js调用时，含‘-’的样式属性调用时需要先去掉‘-’并将下一个字母大写，下面列一下css样式表中常用到的位置属性：top right left bottom margin paddingmargin-top margin-right margin-left margin-bottompadding-top padding-right padding-left padding-bottom

二、js实现picker选择器示例详解

*{ margin: 0; padding: 0;}.btn{ height: 32px; padding: 0 15px; text-align: center; font-size: 14px; line-height: 32px; color:#FFF; border: none; background:#1890ff; border-radius: 2px; cursor: pointer;}.mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0,.6); animation: fadeIn.3s forwards;}.slide-box{ position: fixed; left: 0; right: 0; bottom: 0; padding: 15px; border-radius: 10px 10px 0 0; background:#FFF; user-select: none;}.fade-in{ animation: fadeIn.3s forwards;}@keyframes fadeIn{ from{ opacity: 0;} to{ opacity: 1;}}.fade-out{ animation: fadeOut.3s forwards;}@keyframes fadeOut{ from{ opacity: 10;} to{ opacity: 0;}}.slide-up{ animation: slideUp.3s forwards;}@keyframes slideUp{ from{ transform: translate3d(0, 100%, 0);} to{ transform: translate3d(0, 0, 0);}}.slide-down{ animation: slideDown.3s forwards;}@keyframes slideDown{ from{ transform: translate3d(0, 0, 0);} to{ transform: translate3d(0, 100%, 0);}}h4{ height: 24px; margin-bottom: 16px; font-size: 16px; line-height: 24px; text-align: center;}.picker-group{ display: flex;}.picker-column{ position: relative; flex: 1; height: 200px; margin: 0 auto; overflow: hidden; touch-action: none;}.picker-column::before{ content:''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 79px; border-bottom: 1px solid#ebebeb; background: linear-gradient(to bottom, rgba(255, 255, 255,.9), rgba(255, 255, 255,.6));}.picker-column::after{ content:''; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; height: 79px; border-top: 1px solid#ebebeb; background: linear-gradient(to bottom, rgba(255, 255, 255,.6), rgba(255, 255, 255,.9));}li{ list-style: none; font-size: 14px; line-height: 40px; text-align: center;}.btn-sure{ display: block; margin: 15px auto 0;}HTML

button class="btn btn-open" type="button"时间选择器/button

div hidden class="mask" div class="slide-box" h4时间选择器/h4 div class="picker-group"div class="picker-column" ul class="picker-content"/ul/divdiv class="picker-column" ul class="picker-content"/ul/div/div button class="btn btn-sure" type="button"确定/button/div/div

class Picker{ constructor(options){ this.options= Object.assign({}, options); this.isPointerdown= false; this.itemHeight= 40; this.maxY= this.itemHeight* 2; this.minY= this.itemHeight*(3- this.options.list.length); this.lastY= 0; this.diffY= 0; this.translateY= 0; this.friction= 0.95; this.distanceY= 0; this.result= this.options.list[0]; this.render(); this.bindEventListener();} render(){ let html=''; for(const item of this.options.list){ html+='li'+ item+'/li';} this.options.pickerContent.innerHTML= html; this.options.pickerContent.style.transform='translate3d(0px,'+ this.maxY+'px, 0px)';} handlePointerdown(e){ if(e.pointerType==='mouse' e.button!== 0){return;} this.options.pickerColumn.setPointerCapture(e.pointerId); this.isPointerdown= true; this.lastY= e.clientY; this.diffY= 0; this.distanceY= 0; this.getTransform(); this.options.pickerContent.style.transform='translate3d(0px,'+ this.translateY+'px, 0px)'; this.options.pickerContent.style.transition='none';} handlePointermove(e){ if(this.isPointerdown){ this.diffY= e.clientY- this.lastY; this.translateY+= this.diffY; this.lastY= e.clientY; this.options.pickerContent.style.transform='translate3d(0px,'+ this.translateY+'px, 0px)';}} handlePointerup(e){ if(this.isPointerdown){ this.isPointerdown= false; this.getTranslateY(); const duration= Math.max(Math.abs(this.distanceY)* 1.5, 300); this.options.pickerContent.style.transition='transform'+ duration+'ms ease'; this.options.pickerContent.style.transform='translate3d(0px,'+ this.translateY+'px, 0px)';}} handlePointercancel(e){ if(this.isPointerdown){ this.isPointerdown= false;}} bindEventListener(){ this.handlePointerdown= this.handlePointerdown.bind(this); this.handlePointermove= this.handlePointermove.bind(this); this.handlePointerup= this.handlePointerup.bind(this); this.handlePointercancel= this.handlePointercancel.bind(this); this.options.pickerColumn.addEventListener('pointerdown', this.handlePointerdown); this.options.pickerColumn.addEventListener('pointermove', this.handlePointermove); this.options.pickerColumn.addEventListener('pointerup', this.handlePointerup); this.options.pickerColumn.addEventListener('pointercancel', this.handlePointercancel);} getTransform(){ const transform= window.getComputedStyle(this.options.pickerContent).getPropertyValue('transform'); this.translateY= parseFloat(transform.split(',')[5]);} getTranslateY(){ let speed= this.diffY; while(Math.abs(speed) 1){ speed*= this.friction; this.distanceY+= speed;} let y= this.translateY+ this.distanceY; if(y this.maxY){ this.translateY= this.maxY; this.distanceY= this.maxY- this.translateY;} else if(y this.minY){ this.translateY= this.minY; this.distanceY= this.minY- this.translateY;} else{ this.translateY= y;} let i= Math.round(this.translateY/ this.itemHeight); this.translateY= i* this.itemHeight; this.result= this.options.list[2- this.translateY/ this.itemHeight];}}

调用方式function createList(start, end){ const list= []; for(i= start; i end; i++){ list[i]= i 10?'0'+ i:''+ i;} return list;}const hours= createList(0, 24), minutes= createList(0, 60);const pickerColumns= document.querySelectorAll('.picker-column');const pickerContents= document.querySelectorAll('.picker-content');const hourPicker= new Picker({ pickerColumn: pickerColumns[0], pickerContent: pickerContents[0], list: hours});const minutePicker= new Picker({ pickerColumn: pickerColumns[1], pickerContent: pickerContents[1], list: minutes});Demo：jsdemo.codeman.top/html/picker

至此，一个简单的picker选择器就实现了。如果小伙伴们想实现根据前一列选中项动态加载后一列数据的功能（例如省市区选择器）还需在此代码基础上自行实现。以上就是js实现picker选择器示例详解的详细内容，更多关于js实现picker选择器的资料请关注自由互联其它相关文章！

三、js实现图片左右滚动

根据楼上做了点修改，这是用jquery，所以一定要链接jquery库。

<html>

body,ul,li{list-style:noneoutsidenone;padding:0;margin:0;}

#picScroll{width:350px;overflow:hidden;}

liimg{width:100px;height:100px;}

<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>

<a><imgsrc="../pic/1.jpg"/></a>

<a><imgsrc="../pic/2.jpg"/></a>

<a><imgsrc="../pic/3.jpg"/></a>

<a><imgsrc="../pic/4.jpg"/></a>

<a><imgsrc="../pic/5.jpg"/></a>

<scripttype="text/javascript">

vartarget=$('#picScroll');//其实标准的写法是var$target=$('#picScroll');

varli=$('#picScrollulli');

li.eq(1).html(li.eq(0).html());//复制第一个li节点内容，赋值给第二个li目的是为了实现无限循环滚动

if(li[0].offsetWidth<=left){

varmarQueen=window.setInterval(Marqeen,speed);

marQueen=window.setInterval(Marqeen,speed);

</html>

下面是用 js写的，不用连接jquery库了，可以对比一下上面的jquery代码

下面是用 js写的，不用连接jquery库了，可以对比一下上面的jquery代码

<scripttype="text/javascript">

vartarget=document.getElementById('picScroll');

varLI=target.getElementsByTagName('li');

LI[1].innerHTML=LI[0].innerHTML;

if(LI[0].offsetWidth<=left){

varmarQueen=window.setInterval(Marqeen,speed);

marQueen=window.setInterval(Marqeen,speed);};