1.一级
备注:接受两个参数,一个是被操作对象,另一个是目标位置,
缺陷:只能实现单一方向的运动
var one = document.getElementById("one");
调用:animate(one,500);
eg:
function animate(obj,target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target -obj.offsetLeft )/10;//实现速度递减
//对速度取值,修复不能到达指定参数的缺陷
if(speed>0){
speed = Math.ceil(speed);
}else if(speed<0){
speed = Math.floor(speed)
}
if(obj.offsetLeft == 500){
clearInterval(timer)
}
obj.style.left = obj.offsetLeft + speed +"px";
},30)
}
2.二级
备注:接受三个参数,一个是被操作对象,一个是被改变得属性,一个被改变属性的目标值
eg:
var box = document.getElementById("box");
var timer= null;
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
function move(obj,attr,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = parseFloat(getStyle(obj,attr));
var speed =( target-current)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed)
console.log(speed);
if(target==current){
clearInterval(timer)
}else{
obj.style[attr] = current +speed+"px";
}
},30)
}
for(var i=0;i<box.children.length;i++){
box.children[i].index = i;
box.children[i].onmouseover = function(){
move(box.children[this.index],"left",500)
}
box.children[i].onmouseout = function(){
move(box.children[this.index],"left",0)
}
}
3.三级
备注:可以接受两个参数,第一个是被操作对象,另一个是json,将移动的属性和值存在json里,可以实现多参数传递,例如left值,top值,width值等
缺陷:不可传透明度,z-index值
eg:
var one = document.getElementById("one");
var btn = document.getElementsByTagName("button")[0];
var timer= null;
btn.onclick = function(){
animate(one,{"top":"500","left":"300"});
};
function animate(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json ) {
var current = parseInt(getstyle(one, attr));
var speed = (json[attr] - current ) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.style[attr] == json[attr]) {
clearInterval(obj.timer)
}
obj.style[attr] = current + speed + "px";
}
},30)
}
4.四级
备注:可以传透明度,z-index,
eg:
//运动函数
function move(obj,attrobj,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var prop in attrobj){//遍历对象,得到对应属性和属性值
var current;
//当属性为透明度时,current的值的算法
if(prop == "opacity"){
current = Math.round(parseInt(getStyle(obj,prop)*100)) || 0
}else{
//是其他属性时,current的算法
current = parseFloat(getStyle(obj,prop));
}
var speed =( attrobj[prop]-current)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(prop == "opacity"){
obj.style.opacity = (current + speed) / 100;
}
else if(prop == "zIndex") {
obj.style.zIndex = attrobj[prop];
}
else {
obj.style[prop] = current + speed + "px" ;
}
//当遍历属性值没有到达目标位置就改变flag的值
if(attrobj[prop] != current){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fn){//如果有回调函数,则调用
fn();
}
}
},30);
}
eg:var one = document.getElementById("one");
console.log(getstyle(one,"left"));
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//ie浏览器的实现方法
}else{
//非IE,
return window.getComputedStyle(obj,null)[attr];
}
}
1.添加事件
eg:
function addEvent(obj,evt,fn){
if(obj.addEventListener){
//在非IE指向的是对象
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
//在IE中this指向window,其中this的指向不一样,下边通过call方法改变其指向,使其统一
obj.attachEvent("on"+evt,function(){
fn.call(obj)
});
}else{
obj["on"+evt]=fn;
}
}
2.移除事件
eg:
function removeEvent(obj,evt,fn){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);
}else if(obj.detachEvent){
obj.detachEvent("on"+evt,function(){
fn.call(obj)
});
}else{
obj["on"+evt]=null;
}
}
eg:
function preventBubble(ev){
var e = ev?ev:window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
//ie下阻止冒泡的方法
e.cancelBubble = true;
}
}
eg:
function preventDefault(ev){
alert("woshishui");
var e = ev || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
1.样式
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
margin: 100px auto;
}
#list{
list-style: none;
display: none;
}
#list>li{
padding: 5px 0;
cursor: pointer;
}
#page{
cursor: pointer;
}
i{
display: inline-block;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color:#ccc ;
}
</style>
2.结构
<div>
<p id = "page"><span>菜单</span><i></i></p>
<ul id="list">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</div>
3.js
<script src = "js/cancelBubble.js"></script>
<script>
var ptage = document.getElementById("page");
var list = document.getElementById("list");
var spantage = ptage.getElementsByTagName("span")[0];
ptage.onclick = function(ev){
list.style.display = "block";
preventBubble(ev);//阻止冒泡,否则无法实现后边document.onclick功能
};
document.onclick = function(){
list.style.display = "none";
};
list.onclick = function(ev){
var e =ev?ev:window.event;
var target = e.srcElement || e.target;
// console.log(e)
if(target.tagName === "LI"){
// console.log(spantage);
spantage.innerHTML = target.innerHTML;
list.style.display = "none"
}
}
</script>
image.png
image.png
eg:
<body>
<select>
<option value="1">中国</option>
<option value="2">美国</option>
</select>
<script>
var selecttags = document.getElementsByTagName("select");
selecttags[0].options.add(new Option("日本","3"))
//此方法第一个参数为新加option的值,第二个参数为新加option的value;
selecttags[0].onchange = function(){
console.log(this.value)
}
</script>
image.png
image.png