几个非常有用的js小函数
function $(v){
if(typeof v==="function"){
window.onload=v;
}else if(typeof v==="string")
{
return document.getElementById(v);
}else if(v==="object")
{
return v;
}
}
这个小函数模拟jQuery中的$函数做了一些非常简单的事情。用来获取id,模拟window.onload等等;
function getStyle(obj,str){ return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];
}
用来获取元素的属性,有几个限制,1.不能获取未设定的属性,属性中不能有多余的空格;
function stopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
}
事件冒泡绝对是比较头疼的问题了用上面这个函数吧;把函数导入到你的页面中。然后在你不要执行某操作的的事件里面加个变量e,在底下写上一句
stopBubble(e);就好了;
function doMove(div,arr,dir,target,endfn){
dir=parseInt(getStyle(div,arr))<target?dir:-dir;
clearInterval(div.timer);
div.timer=setInterval(function(){
var speed =parseInt(getStyle(div,arr))+dir;
if(speed>target&&dir>0||speed<target&&dir<0)
{
speed=target;
}
div.style[arr]=speed+"px";
if(speed==target)
{
clearInterval(div.timer);
endfn&&endfn();
} },30) }
这个小函数需要配合上面的getStyle一起使用,作用是对某个对象进行移动。变量分别是,div是要移动的对象,arr是要移动的属性(如left,top等等(但是因为getStyle只能获取定义的属性,所以一定要在css里面定义哦))dir是速度(不用考虑正负),target是你要到达的位置
function doShake(obj,max_length,att){
function getStyle(obj,str){
return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];//获取元素属性
}
var arr=[];
var num=0;
for(var i=max_length;i>=0;i--)
{
arr.push(i,-i)
}
arr.pop();//做一个数组如果max_length=5;数组就是[5,-5,4,-4,3,-3,2,-2,1,-1,0]
clearInterval(obj.timer);//清楚定时器防止多次点击出现异常; obj.timer=setInterval(function(){obj.style[att]=parseInt(getStyle(obj,att))+arr[num]+"px";//开定时器每个100毫秒改变元素的某个属性等于arr的第num项
num++
if(num==arr.length)
{
clearInterval(obj.timer);
}//判断num等于arr.length停定时器
},100) }
抖动小函数,用来让一个对象轻轻的抖动,max_length是抖动的峰值,att是你想让那个属性抖动,统一配合getStyle使用;一点点问题,/*我不知道怎么改,就是当用户在第一次使用没结束前再次执行操作,对象就回不到原来的位置。求大神;*/
几个非常有用的js小函数的更多相关文章
- js 日期计算星座 根据生日的月份和日期,一行代码计算星座的js小函数(转)
本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座
- js小函数工具
突然想到建一片文章关于自己所学到的一些小函数,今后需要的时候可以直接当工具使用. 1.获取当前时间小程序. function showTime(){ var show_day=new Array('星 ...
- JS小函数
join()\toString(): join()函数和toString()函数都是返回字符串类型. 针对一个数组: var arr = ["I","love" ...
- 一个模拟"显示桌面.scf"程序的JS小函数
有时候我们或许有这样的一个需求,用JS模拟这样一个动作,同时按下组合快捷键:Windows旗帜键+D键,下面这个函数就可以帮到我们了. function f_ToggleDesktop() { var ...
- js 回调函数小例子
js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson25 - 实战分析:评论功能(四)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
- JS_ECMA基本语法中的几种封装的小函数-2
大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...
随机推荐
- [题解]USACO 1.3 Wormholes
Wormholes Farmer John's hobby of conducting high-energy physics experiments on weekends has backfire ...
- 实用脚本----Linux下Jdk和Tomcat自动安装shell脚本总结
系统环境为:ubuntu 14.04 一.JDK 自动安装脚本 jdk自动安装bash shell脚本,截止今天(2014/10/15)亲测可用: sudo su #切换到root权限 mkdir / ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- ORACLE 数据库需要创建索引的规则
1.表的主键.外键必须有索引: 2.数据量超过300的表应该有索引: 3.经常与其他表进行连接的表,在连接字段上应该建立索引: 4.经常出现在Where子句中的字段,特别是大表的字段,应该建立索引: ...
- 微软2016校园招聘4月在线笔试 A FontSize
题目链接:http://hihocoder.com/problemset/problem/1288 分析:题目中所求的是最大的FontSize(记为S),其应该满足P*[W/S]*[H/S] > ...
- 关于在gridview中有dorpdownlist的情况下使用自带编辑模板的方法
今天记录一下在gridview中,如果有dropdownlist的情况下使用gridview自带编辑模式的方法. 好吧,今天的这个问题有点绕,详细解释一下目的. 因为gridview中的某些列的数据是 ...
- C# 将sheet中数据转为list
public IList<T> ExportToList<T>(ISheet sheet, string[] fields) where T : class,new() { I ...
- Spring Boot + Bootstrap 出现"Failed to decode downloaded font"和"OTS parsing error: Failed to convert WOFF 2.0 font to SFNT"
准确来讲,应该是maven项目使用Bootstrap时,出现 "Failed to decode downloaded font"和"OTS parsing error: ...
- 读书笔记——body and html
在看<常见标签的默认属性值及相互作用——关于CSS reset的思考>的时候,其中说body默认的margin是8px.但是,将body的backgound-color:red:后,看到的 ...
- Orchard源码--初步(1)
1.打开解决方案Orachard.sln 2.直接启动项目调试 3.接着你会看到下图 呵呵,有点啰嗦( ̄︶ ̄)↗ 涨 4.点击上图的‘Finish Setup’后