运动
- 运动原理：使用计时器，持续改变元素的属性
- 运动速度：取决于每次所走距离的多少
- 运动停止：判断什么时候到达目标位置，并清除计时器匀速运动
- 运动频率和运动速度保持不变!
- 运动频率：计时器时间
- 运动速度：每次改变的量
function move(dom,target) {
clearInterval(timer);
timer = setInterval(function () {
if (target > dom.offsetLeft) {//判断运动方向
var speed = 5;//右走
} else {
var speed = -5;//左走
}
// 剩余的运动量 < 每次所走的运动量
if (Math.abs(dom.offsetLeft - target) <= Math.abs(speed)) {
clearInterval(timer);//运动结束
dom.style.left = target + 'px';//手动设置终点
} else {
dom.style.left = dom.offsetLeft + speed + 'px';//每次的运动
}
},20);
}缓冲运动
- 运动速度发生变化，由快到慢
缓冲运动的关键：
1.频率不变，速度逐渐变慢
var speed = (target - obj.offsetLeft) / 10;
2.对速度取整，避免数据丢失
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
function move(dom,target) {
clearInterval(timer);
timer = setInterval(function () {
var speed = (target - dom.offsetLeft) / 10;//持续变化的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//对速度取整，避免数据丢失
// 剩余的运动量 < 每次所走的运动量
if (Math.abs(dom.offsetLeft - target) <= Math.abs(speed)) {
clearInterval(timer);//运动结束
dom.style.left = target + 'px';//手动设置终点
} else {
dom.style.left = dom.offsetLeft + speed + 'px';//每次的运动
}
},20);
}透明度运动
- 透明度变量：var opa=30;
- IE浏览器：box.style.filter = 'alpha(opacity:' + opa + ')';
- 其他浏览器：box.style.opacity = opa/100;
function move(dom,target) {
clearInterval(timer);
timer = setInterval(function () {
if (target > opa) {//运动方向
var speed = 2;//透明度增加
} else {
var speed = -2;//透明度减少
}
// 剩余的运动量 < 每次所走的运动量
if (Math.abs(opa - target) <= Math.abs(speed)) {
clearInterval(timer);//运动结束
dom.style.opacity = target / 100;//手动设置终点
} else {
opa += speed;
dom.style.opacity = opa / 100;//每次的运动
}
},30);
}多元素进行相同的运动，属性都不能共用！
var box = document.querySelectorAll('.box');
for(var i = 0; i < box.length; i++){
box[i].opa = 30;
box[i].timer = null;
box[i].onmouseover = function () {
move(this,100);
}
box[i].onmouseout = function () {
move(this,30);
}
}
function move(dom,target) {
clearInterval(dom.timer);
dom.timer = setInterval(function () {
if (target > dom.opa) {//运动方向
var speed = 2;//透明度增加
} else {
var speed = -2;//透明度减少
}
// 剩余的运动量 < 每次所走的运动量
if (Math.abs(dom.opa - target) <= Math.abs(speed)) {
clearInterval(dom.timer);//运动结束
dom.style.opacity = target / 100;//手动设置终点
} else {
dom.opa += speed;
dom.style.opacity = dom.opa / 100;//每次的运动
}
},30);
}swiper插件制作轮播图：https://www.swiper.com.cn/
HTML DOM
HTML文档中的每个节点都是DOM对象，每类对象都有1套属性、方法。
最常用的是
DOM访问表单控件的常用属性和方法如下：
- action ：返回该表单的提交地址
- elements：返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
- length ：返回表单内表单域的个数
- method ：返回表单内的method属性，主要有get和post两个值
- target ：确定提交表单时的结果窗口，主要有_selt、_blank、_top等
- reset()、submit() ：重置表单和确定表单
在elements返回的数组中访问具体的表单控件语法如下：
- .elements[index] ：返回该表单中第index个表单控件
- .elements[elementName] ：返回表单内id或name为elementName的表单控件。
- .elementName ：返回表单中id或name为elementName的表单控件
<script>
function operForm(){
var myform=document.forms[0]
//alert(myform.action)
//alert(myform.target)
//myform.submit()
}
</script>
</head>
<body>
<form id="myform" action="##" method="get" target="_black">
<input name="username" type="text" value="lisi"><br/>
<input name="pwd" type="text" value="123"><br/>
<select name="city" id="qq">
<option value="shanghai">上海</option>
<option value="shenzhen" selected>深圳</option>
</select><br/>
<input type="button" value="获取第一个表单控件" onclick="alert(document.getElementById('myform').elements[0].value)">
<input type="button" value="获取第二个表单控件" onclick="alert(document.getElementById('myform').elements['pwd'].value)">
<input type="button" value="获取第三个表单控件" onclick="alert(document.getElementById('myform').city.value)">
<input type="button" value="操作表单" onclick="operForm()">
</form>
</body>DOM访问下拉菜单的常用属性如下：
- form ：返回下拉菜单框所在的表单对象
- length ：返回下拉菜单的选项个数
- options ：返回下拉菜单里所有选项组成的数组
- selectedIndex ：返回下拉列表中选中选项的索引
- type ：返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one<form action="##">
<select id="city" name="city" size="5">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
<option value="nanjing">南京</option>
<option value="shenzhen" selected>深圳</option>
<option value="chengdu">成都</option>
</select><br/>
<input type="button" value="第一个城市" onclick="change(s_city.options[0])">
<input type="button" value="上一个城市" onclick="change(s_city.options[s_city.selectedIndex-1])">
<input type="button" value="下一个城市" onclick="change(s_city.options[s_city.selectedIndex+1])">
<input type="button" value="最后一个城市" onclick="change(s_city.options[s_city.length-1])">
</form>
<script>
var s_city=document.getElementById('city')
var change= function (city) {
alert(city.value)
}
</script>使用Options[index]返回具体选项所对应的常用属性：
- defaultSelected ：返回该选项默认是否被选中
- index ：返回该选项在下拉菜单中的索引
- selected ：返回该选项是否被选中
- text ：返回该选项呈现的文本
- value ：返回该选项的value属性值
DOM为下拉菜单添加选项的方式：
创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。 语法如下：new Option(text，value，defaultSelected，selected)
该构造器有4个参数，说明如下：-
text ：该选项的文本、即该选项所呈现的内容
-
value ：该选项的value值
-
defaultSelect ：设置默认是否显示该选项，值为true或false
-
selected ：设置该选项当前是否被选中，值为true或false
注：并不是每次构造都需要指明4个参数，可以指明一个或者两个都可以，只有一个参数的话指明的是text，假如两个的话，第一个参数是text，第二个参数是value
添加创建好的选项至列表框或下拉菜单的方式：
-
直接为<select ..../>的指定选项赋值
列表框或下拉菜单对象.options[i]=创建好的option对象
-
add( )：向下拉列表中添加一个选项
下拉列表框对象.add(new,old)
var province=document.getElementById("selProvince").value; var city=document.getElementById("selCity"); city.options.length=0; switch(province){ case "河南省": city.add(new Option("郑州市","郑州市"),null); city.add(new Option("洛阳市","洛阳市"),null); break; …… }删除下拉菜单的选项的方法：
-
直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
-
直接将指定选项赋值为null
语法：下拉框对象.options[index]=null
<body id="test"> <input type="button" value="创建下拉框" onclick="createSelect()"> <input type="button" value="删除选项" onclick="delOne()"> <input type="button" value="清空选项" onclick="clearAll()"> <script> function createSelect(){ var element=document.createElement('select') for(var i=0;i<10;i++){ var op=new Option("新增"+i,i) element.options[i]=op } element.size=5 element.id='city' document.getElementById('test').appendChild(element) } function delOne(){ var city=document.getElementById('city') if(city.options.length>0){ //city.remove(city.options.length-1) city.options[city.options.length-1]=null } } function clearAll(){ var city=document.getElementById('city') if(city.options.length>0){ city.options.length=0 } } </script>
Q.E.D.
输入后按回车搜索 ...
切换主题 | SCHEME TOOL
扫一扫
679
到【灌水乐园】发言
