20171020
1.运动函数封装
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);
}2.获取样式函数封装
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];
}
}3.dom2级事件 添加函数及移除事件封装
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;
}
}4.阻止事件冒泡函数封装
eg：
function preventBubble(ev){
var e = ev?ev:window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
//ie下阻止冒泡的方法
e.cancelBubble = true;
}
}5.阻止浏览器默认行为
eg：
function preventDefault(ev){
alert("woshishui");
var e = ev || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}6.利用阻止事件冒泡和事件委托实现类似select功能
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
7.select数据渲染及onchange事件
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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录