各种Js封装

获取ClassName元素

function getClass(classname,id){
    if(document.getElementsByClassName){
        if(id){
            return $(id).getElementsByClassName(classname);
        }else{
            return document.getElementsByClassName(classname);
        }
        if(id){
            var allHtml = $(id).getElementsByTagName("*");
        }else{
            var allHtml = document.getElementsByTagName("*");
        }
        var arr = [];
        for(var i = 0; i < allHtml.length; i++){
            var allClass = allHtml[i].className.split(" ");
            for(var j = 0; j < allClass.length; j++){
                if(allClass[j] == classname){
                    arr.push(allHtml[i]);
                }
            }
        }
        return arr;
    }
}

兼容IE、火狐、chrome的可视区域封装

function client(){
	if(window.innerWidth){
		return {
			width:window.innerWidth,
			height:window.innerHeight
		}
	}else if(document.compatMode == "CSS1Compat"){
		return {
			width:document.documentElement.clientWidth;
			height:document.documentElement.clientHeight;
		}
	}else{
		return {
			width:document.body.clientWidth;
			height:document.body.clientHeight;
		}
	}
}

封装缓速运动框架(多个属性)

function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return window.getComputedStyle(obj,null)[attr];
	}
}
function animate(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var flag = true;
		for(var attr in json){
			var current = 0;
			if("opacity" == attr){
				current = parseInt(getStyle(obj,attr)*100) || 0;
			}else{
				current = parseInt(getStyle(obj,attr));
			}
			var step = (json[attr] - current) / 10;
			step = step > 0 ? Math.ceil(step) : Math.floor(step);
			if("opacity" == attr){
				if("opacity" in obj.style){
					obj.style[attr] = (current + step) / 100;
				}else{
					obj.style.filter = "alpha(opacity =" + (current + step)*10 + ")"
				}
			}else if("zindex" == attr){
				obj.style[attr] = json[attr];
			}else{
				obj.style[attr] = current + step + "px";
			}
			if(current != json[attr]){
				flag = false;
			}
		}
		if(flag){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}
	},30)
}

匀速动画框架

function animate(obj,target,speed){
    clearInterval(obj.timer);
    //判断box的距离使box是前走还是后退
    var stepSize = obj.offsetLeft < target ? speed : -speed;
    obj.timer = setInterval(function(){
    	var result = target - obj.offsetLeft;
        obj.style.left = obj.offsetLeft + stepSize + "px";
        if(Math.abs(result) <= speed){
        	clearInterval(obj.timer);
        	obj.style.left = target + "px";
        }
    },30)
}

  

  

时间: 2024-11-05 06:31:41

各种Js封装的相关文章

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

一款在论坛上看到的JS封装的随机过渡方式的图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

城市三级联动 AJAX-原生js封装

话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

js封装好的模仿qq消息弹窗代码

在我们的日常开发中,或者生活中,经常需要用到弹出窗.这里我们就用js模拟一下qq消息一样的弹出窗. 直接贴代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

原生js封装的一些jquery方法

用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }} addCla

JS封装Cookie

/* @黑眼诗人 <www.chenwei.ws> */<script> //设置cookie: cookie名,cookie值,天数 function setCookie(name, value, iDay) { var oDate = new Data(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name+ '=' +value+ '; expires = '+oDate } //获取cookie fu

js封装的方法

1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举例 1)函数方式function kk(a,b){   内部对a,b怎么处理就不需要关心了} 2)对象方式function kk(a,b){   this.x = a;   this.y = b;}var k = new kk(1,2);//通过面向对象的方式alert(k.x);3)闭包方式fun