js对象上下移动怎么搞？js移动div怎么做出滑动的效果

本文目录

• js对象上下移动怎么搞
• js移动div怎么做出滑动的效果
• 怎么通过JS移动字符在字符串中的位置
• js如何将一个div移动到另一个div后面
• js怎么移动向右移动格子
• js怎样添加、移除、移动、复制、创建和查找节点
• 使用JS移动DIV块的问题
• JS控制窗口移动
• JS移动端获取触控位置

js对象上下移动怎么搞

视图的改变都应该是因为数据的改变而引起的，而不是直接通过一些api去更改视图，像你这种对应的数据应该类似

[    {        name: ’开始’，        value: 1    },    {        name: ’结束’，        value: 2    }]

交换就是交换这个数据，然后根据新的数据去渲染你上面的视图，这样就不用担心数据和视图不同步了。

js移动div怎么做出滑动的效果

1：使用js的插件 目前主流的js库 比如jq 也有手势的插件，2：还有移动端的zepto库 也有手势插件，3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，4：早期的应该是用wml语言支持的WMLScript实现。5：举例：使用iscroll.js实现1）下载iScroll.js，百度搜索iScroll.js下载即可2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件 3）编写规范的html格式只有如下格式才能实现滑动效果《div id=“wrapper“》《div class=“scroll“》这个区域可以滑动《/div》《/div》如下格式不能滑动《div id=“wrapper“》《div class=“other“》这个区域可以滑动《/div》 《div class=“scroll“》这个区域不可以滑动了《/div》《/div》只有wrapper的第一个子元素才能实现滑动效果。4）编写js调用代码var Scroll = new iScroll(’wrapper’,{hScrollbar:false, vScrollbar:false});第一参数必需是滑动元素的父元素的id。主要参数一览：hScroll: true, 左右滑动，默认为truevScroll: true,上下滑动hScrollbar: true, 是否显示y轴滚动条，默认为显示vScrollbar: true,是否显示X轴滚动条，默认为显示

怎么通过JS移动字符在字符串中的位置

var str = “asodn，f啊吊/l丝激发12323；“; var temp = { str: “asodn，f啊吊/l丝激发12323；“, startIndex: 0, offset: 2, toIndex: 5 }; function moveCharPosition(opt) { var s = opt.str.split(’’), st = s.splice(opt.startIndex, opt.offset); s.splice.apply(s, .concat(opt.toIndex - opt.offset, 0).concat(st)); return s.join(’’); }alert(moveCharPosition(temp));没有进行容错处理（比如没有对opt及其属性、值的合法性判断 等），你要自己完善，功能实现了。这个代码片段只负责移动字符位置，不负责替换，交叉移动等扩充性功能，如果需要可以自己修改。opt中，str表示预处理字符串，startIndex表示要移动字符在字符串中的开始索引，offset表示移动几个字符，toIndex表示移动到基于预处理字符串中的位置索引

js如何将一个div移动到另一个div后面

可以，用创建和插入元素 《!DOCTYPE html》《html》 《head》 《title》 New Document 《/title》 《meta charset=“utf-8“ /》 《style》 div {border: 1px solid #666;padding: 5px; margin: 5px;} #divs {width: 200px;} #div5 {background: #ccc;} 《/style》 《/head》 《body》 《div id=“divs“》 《div id=“div1“》div1《/div》 《div id=“div2“》div2《/div》 《div id=“div3“》div3《/div》 《div id=“div4“》div4《/div》 《/div》 《script》 var oDivs=document.getElementById(’divs’); var oDiv3=document.getElementById(’div3’); //获取到div3，因为等下要把创建的div插入到div3前面。 var oDiv5=document.createElement(’div’); //创建一个div元素。 oDiv5.id=’div5’; //id样式可以先在样式表中写好，然后赋值一个id给创建出来的div元素。 oDiv5.innerHTML=’《span》这是被创建出来的div5《/span》’; //给创建出来的div添加内容，内容中可以有html标签嵌套。 oDivs.insertBefore(oDiv5,oDiv3); //在大的div元素下插入创建出来的元素，第一个参数是创建的div，第二个参数是要插入到哪个div前面。 《/script》 《/body》《/html》

js怎么移动向右移动格子

《script type=“text/javascript“》function createDIV(){var div=document.createElement(“div“);//创建一个DIVdiv.setAttribute(“id“, “div“);document.body.appendChild(div); //主要加上这句，把新建的DIV加到页面上。var left = div.offsetLeft;setInterval(function () {left -= 10;div.style.left = left+“px“;},50);}《/script》这样就可以了

js怎样添加、移除、移动、复制、创建和查找节点

添加节点append；移除节点removeChild；移动节点：var sdds=document.getElementById；创建节点createTextNode()；查找节点：document.getElementsByTagName。

其他方法：

使用JS移动DIV块的问题

运动是要定时器的。用setInterval这个函数，还有，用js改变css中的left的值的时候，一定要记得带单位，你上面的代码没有带单位！

js代码如下：（已设置超过屏幕宽度时会停止运动，如果不加以阻止，关闭浏览器之前就不会停止滑动）

《script type=“text/javascript“》function func(){var btn = document.getElementById(“demo“);var odiv = document.getElementsByTagName(“div“);var timer=’’;var oWidth=document.body.clientWidth-odiv.offsetLeft;timer=setInterval(function(){if(odiv.offsetLeft》=oWidth){clearInterval(timer);}else{odiv.style.left = odiv.offsetLeft+10+’px’;}},30);}《/script》

JS控制窗口移动

我的效果帅得很啊《html》《head》《title》_xWin《/title》《style type=’text/css’》《!--a:visited{text-decoration:none;color:slategray;}a:hover{text-decoration:underline;color:slategray;}a:link{text-decoration:none;color:slategray;}--》《/style》《script language=JScript》《!--//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=’orange’,normal=’slategray’;//color;var index=10000;//z-index;//开始拖动;function startDrag(obj){if(event.button==1){ //锁定标题栏; obj.setCapture(); //定义对象; var win = obj.parentNode; var sha = win.nextSibling; //记录鼠标和层位置; x0 = event.clientX; y0 = event.clientY; x1 = parseInt(win.style.left); y1 = parseInt(win.style.top); //记录颜色; normal = obj.style.backgroundColor; //改变风格; obj.style.backgroundColor = hover; win.style.borderColor = hover; obj.nextSibling.style.color = hover; sha.style.left = x1 + offx; sha.style.top = y1 + offy; moveable = true;}}//拖动;function drag(obj){if(moveable){ var win = obj.parentNode; var sha = win.nextSibling; win.style.left = x1 + event.clientX - x0; win.style.top = y1 + event.clientY - y0; sha.style.left = parseInt(win.style.left) + offx; sha.style.top = parseInt(win.style.top) + offy;}}//停止拖动;function stopDrag(obj){if(moveable){ var win = obj.parentNode; var sha = win.nextSibling; var msg = obj.nextSibling; win.style.borderColor = normal; obj.style.backgroundColor = normal; msg.style.color = normal; sha.style.left = obj.parentNode.style.left; sha.style.top = obj.parentNode.style.top; obj.releaseCapture(); moveable = false;}}//获得焦点;function getFocus(obj){if(obj.style.zIndex!=index){ index = index + 2; var idx = index; obj.style.zIndex=idx; obj.nextSibling.style.zIndex=idx-1;}}//最小化;function min(obj){var win = obj.parentNode.parentNode;var sha = win.nextSibling;var tit = obj.parentNode;var msg = tit.nextSibling;var flg = msg.style.display==“none“;if(flg){ win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height; msg.style.display = “block“; obj.innerHTML = “0“;}else{ win.style.height = parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height; obj.innerHTML = “2“; msg.style.display = “none“;}}//关闭;function cls(obj){var win = obj.parentNode.parentNode;var sha = win.nextSibling;win.style.visibility = “hidden“;sha.style.visibility = “hidden“;}//创建一个对象;function xWin(id,w,h,l,t,tit,msg){index = index+2;this.id = id;this.width = w;this.height = h;this.left = l;this.top = t;this.zIndex = index;this.title = tit;this.message = msg;this.obj = null;this.bulid = bulid;this.bulid();}//初始化;function bulid(){var str = ““ + “《div id=xMsg“ + this.id + “ “ + “style=’“ + “z-index:“ + this.zIndex + “;“ + “width:“ + this.width + “;“ + “height:“ + this.height + “;“ + “left:“ + this.left + “;“ + “top:“ + this.top + “;“ + “background-color:“ + normal + “;“ + “color:“ + normal + “;“ + “font-size:10px;“ + “font-family:Verdana;“ + “position:absolute;“ + “cursor:default;“ + “border:2px solid “ + normal + “;“ + “’ “ + “onmousedown=’getFocus(this)’》“ + “《div “ + “style=’“ + “background-color:“ + normal + “;“ + “width:“ + (this.width-2*2) + “;“ + “height:20;“ + “color:white;“ + “’ “ + “onmousedown=’startDrag(this)’ “ + “onmouseup=’stopDrag(this)’ “ + “onmousemove=’drag(this)’ “ + “ondblclick=’min(this.childNodes)’“ + “》“ + “《span style=’width:“ + (this.width-2*12-4) + “;padding-left:3px;’》“ + this.title + “《/span》“ + “《span style=’width:12;border-width:0px;color:white;font-family:webdings;’ onclick=’min(this)’》0《/span》“ + “《span style=’width:12;border-width:0px;color:white;font-family:webdings;’ onclick=’cls(this)’》r《/span》“ + “《/div》“ + “《div style=’“ + “width:100%;“ + “height:“ + (this.height-20-4) + “;“ + “background-color:white;“ + “line-height:14px;“ + “word-break:break-all;“ + “padding:3px;“ + “’》“ + this.message + “《/div》“ + “《/div》“ + “《div style=’“ + “width:“ + this.width + “;“ + “height:“ + this.height + “;“ + “top:“ + this.top + “;“ + “left:“ + this.left + “;“ + “z-index:“ + (this.zIndex-1) + “;“ + “position:absolute;“ + “background-color:black;“ + “filter:alpha(opacity=40);“ + “’》by wildwind《/div》“;document.body.insertAdjacentHTML(“beforeEnd“,str);}//--》《/script》《script language=’JScript’》《!--function initialize(){var a = new xWin(“1“,160,200,200,200,“Message“,“xWin 《br》 A Cool Pop Div Window《br》Version:1.0《br》2005-7-12“);var b = new xWin(“2“,240,200,100,100,“Wildwind’s Msgbox“,“Welcome to visited my personal website:《br》《a href=http://www.webjx.com/ target=_blank》http://www.webjx.com《/a》《br》and u can also sign my guestbook at:《br》《a href=http://www.webjx.com/ target=_blank》http://www.webjx.com《/a》《br》《br》thx!!! =)...“);var c = new xWin(“3“,200,160,250,50,“Copyright“,“Copyright by 《a href=’mailto:web@webjx.com’》Wildwind《/a》!“);}window.onload = initialize;//--》《/script》《/head》《body onselectstart=’return false’ oncontextmenu=’return false’ scroll=’no’》《/body》《/html》微软风格的按钮《html》 《head》 《style》 .button2 { border-right:1px solid buttonhighlight; border-left:1px solid buttonshadow; border-bottom:1px solid buttonhighlight; border-top:1px solid buttonshadow } TD { cursor: hand; font-size: 9pt; font-family: 宋体; text-align: center; text-valign: middle } .handin { height:18px; width:2px; border-left:1px solid buttonshadow; border-right:1px solid buttonhighlight } .handout { height:18px; width:2px; border-left:1px solid buttonhighlight; border-right:1px solid buttonshadow; } .into { width:100%; border-right:1px solid buttonhighlight; border-left:1px solid buttonshadow; border-bottom:1px solid buttonhighlight; border-top:1px solid buttonshadow } .outto,.button1 { background-color: buttonface; background-repeat: repeat; background-attachment: scroll; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-top: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; background-position: 0%“ } .button0 { } 《/style》 《/head》 《body topmargin=“0“ leftmargin=“0“ bgcolor=“#E0E0E0“》 《script》 function change_button(num) { if(event.srcElement.tagName==“TD“&&event.srcElement.value==“button“) event.srcElement.className = “button“+num; } 《/script》 《div class=“into“ style=“width: 100%; height: 25“》 《table class=“outto“ border=“0“ width=“100%“ height=“25“ cellspacing=“1“ onm ouseover=“change_button(1)“ onm ouseup=“change_button(0)“ onm ousedown=“change_button(2)“ onm ouseout=“change_button(0)“》 《tr》 《td width=“1%“ height=“19“》《span class=“handout“》《/span》《/td》 《td width=“9%“ height=“19“ value=“button“》按钮TD《/td》 《td width=“1%“ height=“19“》《span class=“handin“》《/span》《/td》 《td width=“9%“ height=“19“ value=“button“》按钮TD《/td》 《td width=“1%“ height=“19“》《span class=“handin“》《/span》《/td》 《td width=“9%“ height=“19“ value=“button“》按钮TD《/td》 《td width=“1%“ height=“19“》《span class=“handin“》《/span》《/td》 《td width=“69%“ height=“19“》《/td》 《/tr》 《/table》 《/div》 《/body》 《/html》

JS移动端获取触控位置

1、如图位置是一个html中的可编辑内容的div标签，在里边输入文字，会有一个光标。

2、通过getSelection可以获得一个Selection对象，如图。因为是一个光标，anchor和focus（选择的起点和终点）一样，偏移也一样。

3、如图，则进行文字选择，而且是跨行选择，以第一行为起点，第二行为终点，选择文字。

4、再次getSelection，可以看到anchorNode是起始节点，anchorOffset是起始偏移，focus是结束的。

5、如果从第二行倒着选到第一行，使用getSelection获取选择区域，可以看到anchorNode和focusNode和刚才相比，互换了。

6、使用一个node的textContent属性可以获得文字。结合focusOffset和anchorOffset，实际上可以获取光标/选中区域前后的文字。

7、将起始和结束位置设置为相同，而且都在结束节点的末尾。即变成闪烁光标。