运动
- 运动原理:使用计时器,持续改变元素的属性
- 运动速度:取决于每次所走距离的多少
- 运动停止:判断什么时候到达目标位置,并清除计时器
匀速运动
- 运动频率和运动速度保持不变!
- 运动频率:计时器时间
- 运动速度:每次改变的量
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