【JQuery】动画与效果

1.基本效果

匹配元素从左上角开始变浓变大或缩小到左上角变淡变小

①隐藏元素

除了可以设置匹配元素的display:none外,可以用以下函数

hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次

slow=600毫秒  normal=400毫秒  fast=200毫秒

以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。

②显示元素

show(speed,[callback])    以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。

③交替显示隐藏

toggle(speed,[callback])  以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。

<input type="button" id="hide1" value="hide()" />
<input type="button" id="show1" value="show()" />
<input type="button" id="toggle1" value="toggle()" />
<div  id="1" style="width:100px; height:100px; background-color:Green;"></div>
$(function(){
$("#hide1").click(function(){$("#1").hide(700)});
$("#show1").click(function(){$("#1").show(700)});
$("#toggle1").click(function(){$("#1").toggle(700)});
})

2.滑动效果

①向上收缩效果

slideUp(speed,[callback])  通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。

②向下展开效果

slideDown(speed,[callback])  通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。

③交替伸缩效果

slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。

$("#slideup1").click(function(){$("#1").slideUp(700)});
$("#slidedown2").click(function(){$("#1").slideDown(700)});
$("#slidetoggle").click(function(){$("#1").slideToggle(700)});

3.淡入淡出效果

通过控制匹配元素的不透明度来实现元素的显示与隐藏

①淡入效果

fadeIn(speed,[callback])  通过不透明度的变化逐渐将匹配元素显现出来

$(“#fadein”).click(function(){$(“#1”).fadeIn(“slow”)});

②淡出效果

fadeOut(speed,[callback])  通过不透明度的变化逐渐将匹配元素隐藏起来

③自定义不透明度

淡入或淡出的最终结果为自定义的透明度

fadeTo(speed,opacity,[callback])  opacity的值域是0~1之间

4.自定义动画效果

①自定义动画

animate(params,duration,[easing],[callback])  返回值:jQuery  参数-params:一个包含类似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,如:{height:”100%”,width:”70%”,fontSize:”4em”,color:”white”}但这些样式属性的名字与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是font-size   duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到最终结束变化的时长,其值的设置也一样String,Number  easing:这个不太明白,要使用的擦除效果的名称(需要插件支持),默认jQuery提供linear和swing|String   callback:和前面一样

这个函数可不像看上去那么简单,有几点需注意1.既然该函数是将匹配元素从原来样子变化成函数中params参数中设置的样子,那么就必须有原来的样子,即params中设置的样式属性必须在原来的样子中有设置过,不能本来没有设置border,却在params中这样设置{borderStyle:”solid”,borderWidth:”1px”}     2.就是前面提到过的样式属性的骆驼命名法      3.有些样式属性animate是不支持的,即便你在原来的样子里有设置过,比如background-color,在params中不能想当然的就设置了backgroundColor样式属性。

<div id="3" style="width:200px; height:300px; border:solid 1px; position:absolute; left:-180px;">
 用户名:<input type="text" /><br />
 密码:<input type="password" /></div>
$(function(){
$("#3").mouseover(function(){$(this).stop().animate({left:"0px"})
}).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)})
})

②jQuery动画队列

把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这样队列中的动画会按先后顺序一个一个执行

如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象来表示

$(“#id”).animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})

以上俩动画会同时执行,总耗时1秒,而

$(“#id”).animate(parmas,{duration:1000}).animate(parmas,{duration:1000})

这俩动画会一个一个执行,总耗时2秒

【JQuery】animate的使用方法

 

animate(params, [duration][easing][callback])

概述

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

参数

paramsOptions

一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing (可选)String

要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)Function

在动画完成时执行的函数

示例

描述:

点击按钮后div元素的几个不同属性一同变化

HTML 代码:
<button id="go"> Run</button>
<div id="block">Hello!</div>
jQuery 代码:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

描述:

让指定元素左右移动

HTML 代码:
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
jQuery 代码:
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-50px'}, "slow");
});

描述:

在600毫秒内切换段落的高度和透明度

jQuery 代码:
$("p").animate({
   height: 'toggle', opacity: 'toggle'
 }, "slow");

描述:

用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

jQuery 代码:
$("p").animate({
   left: 50, opacity: 'show'
 }, 500);

描述:

一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。

jQuery 代码:
$("p").animate({
   opacity: 'show'
 }, "slow", "easein");

 

【Javascript】漂亮的JS日期选择器

效果图:

 js代码:

<script>
function HS_DateAdd(interval,number,date){
	number = parseInt(number);
	if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}
	if (typeof(date)=="object"){var date = date}
	switch(interval){
	case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;
	case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;
	case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;
	case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;
	}
}
function checkDate(year,month,date){
	var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];
	var returnDate = "";
	if (year%4==0){enddate[1]="29"}
	if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}
	return returnDate;
}

function WeekDay(date){
	var theDate;
	if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);}
	if (typeof(date)=="object"){theDate = date}
	return theDate.getDay();
}
function HS_calender(){
	var lis = "";
	var style = "";
	style +="<style type='text/css'>";
	style +=".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";
	style +=".calender ul {list-style-type:none; margin:0; padding:0;}";
	style +=".calender .day { background-color:#EDF5FF; height:20px;}";
	style +=".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";
	style +=".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
	style +=".calender li a:hover { color:#f30; text-decoration:underline}";
	style +=".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";
	style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
	style +=".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";
	style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
	style +=".calender .LastMonth { float:left;}";
	style +=".calender .NextMonth { float:right;}";
	style +=".calenderBody {clear:both}";
	style +=".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";
	style +=".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";
	style +=".today a { color:#f30; }";
	style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";
	style +=".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";
	style +=".calenderBottom a.closeCalender{float:right}";
	style +=".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";
	style +="</style>";

	var now;
	if (typeof(arguments[0])=="string"){
		selectDate = arguments[0].split("-");
		var year = selectDate[0];
		var month = parseInt(selectDate[1])-1+"";
		var date = selectDate[2];
		now = new Date(year,month,date);
	}else if (typeof(arguments[0])=="object"){
		now = arguments[0];
	}
	var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();
	var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");
	var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");
	var thisMonthEndDate = thisMonthLastDate.getDate();
	var thisMonthEndDay = thisMonthLastDate.getDay();
	var todayObj = new Date();
	today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();

	for (i=0; i<lastMonthDate; i++){  // Last Month's Date
		lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;
		lastMonthEndDate--;
	}
	for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date

		if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){
			var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;
			lis += "<li><a href=javascript:void(0) class='today' onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
		}else{
			lis += "<li><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
		}

	}
	var j=1;
	for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date
		lis += "<li class='nextMonthDate'>"+j+"</li>";
		j++;
	}
	lis += style;

	var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' onclick=HS_calender(HS_DateAdd('m',1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Next Month'>&raquo;</a>";
	CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' onclick=HS_calender(HS_DateAdd('m',-1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Previous Month'>&laquo;</a>";
	CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' onclick='CalenderselectYear(this)' title='Click here to select other year' >"+now.getFullYear()+"</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' onclick='CalenderselectMonth(this)' title='Click here to select other month'>"+(parseInt(now.getMonth())+1).toString()+"</a></span>月"; 

	if (arguments.length>1){
		arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
		arguments[1].parentNode.innerHTML = CalenderTitle;

	}else{
		var CalenderBox = style+"<div class='calender'><div class='calenderTitle'>"+CalenderTitle+"</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"+lis+"</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' onclick='closeCalender(this)'>×</a><span><span><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+todayString+"'>Today</a></span></span></div></div>";
		return CalenderBox;
	}
}
function _selectThisDay(d){
	var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
		boxObj.targetObj.value = d.title;
		boxObj.parentNode.removeChild(boxObj);
}
function closeCalender(d){
	var boxObj = d.parentNode.parentNode.parentNode;
		boxObj.parentNode.removeChild(boxObj);
}

function CalenderselectYear(obj){
		var opt = "";
		var thisYear = obj.innerHTML;
		for (i=1970; i<=2020; i++){
			if (i==thisYear){
				opt += "<option value="+i+" selected>"+i+"</option>";
			}else{
				opt += "<option value="+i+">"+i+"</option>";
			}
		}
		opt = "<select onblur='selectThisYear(this)' onchange='selectThisYear(this)' style='font-size:11px'>"+opt+"</select>";
		obj.parentNode.innerHTML = opt;
}

function selectThisYear(obj){
	HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);
}

function CalenderselectMonth(obj){
		var opt = "";
		var thisMonth = obj.innerHTML;
		for (i=1; i<=12; i++){
			if (i==thisMonth){
				opt += "<option value="+i+" selected>"+i+"</option>";
			}else{
				opt += "<option value="+i+">"+i+"</option>";
			}
		}
		opt = "<select onblur='selectThisMonth(this)' onchange='selectThisMonth(this)' style='font-size:11px'>"+opt+"</select>";
		obj.parentNode.innerHTML = opt;
}
function selectThisMonth(obj){
	HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML+"-"+obj.value+"-1",obj.parentNode);
}
function HS_setDate(inputObj){
	var calenderObj = document.createElement("span");
	calenderObj.innerHTML = HS_calender(new Date());
	calenderObj.style.position = "absolute";
	calenderObj.targetObj = inputObj;
	inputObj.parentNode.insertBefore(calenderObj,inputObj.nextSibling);
}
</script>

html代码:

<input type="text" onfocus="HS_setDate(this)"/>

 

【Javascript】字符串转换函数总览

字符串转数字,下面为大家介绍主要的三种方法
转换函数、强制类型转换、利用js变量弱类型转换


1. 转换函数:
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后

者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的

都是NaN(Not a Number)。
在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析

该字符串。parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字;如果不是,该方法将

返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样

的 测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换

成数字。
例如,如果要把字符串 “1234blue “转换成整数,那么parseInt()将返回1234,因为当它

检测到字符b时,就会停止检测过程。字符串中包含的数字字面量会被正确转换为数字,因此 字符串

“0xA “会被正确转换为数字10。不过,字符串 “22.5 “将被转换成22,因为对于整数来说,小数点是无

效字符。一些示例如下:

parseInt(“1234blue”); //returns 1234
parseInt(“0xA”);

//returns 10
parseInt(“22.5”); //returns 22
parseInt(“blue”); //returns

NaN
parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成

整数。基是由parseInt()方法的第二个参数指定的,所以要解析十六进制的值,需如下调用parseInt()

方法:
parseInt(“AF”, 16); //returns 175
当然,对二进制、八进制,甚至十进制(默

认模式),都可以这样调用parseInt()方法:
parseInt(“10”, 2); //returns 2

parseInt(“10”, 8); //returns 8
parseInt(“10”, 10); //returns 10
如果

十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如:
parseInt

(“010”); //returns 8
parseInt(“010”, 8); //returns 8
parseInt(“010”, 10);

//returns 10
在这段代码中,两行代码都把字符串 “010 “解析成了一个数字。第一行代码把这

个字符串看作八进制的值,解析它的方式与第二行代码(声明基数为8)相同。最后一行代码声明基数为

10,所以iNum3最后等于10。
parseFloat()方法与parseInt()方法的处理方式相似,从位置0开始查

看每个字符,直到找到第一个非有效的字符为止,然后把该字 符之前的字符串转换成数字。不过,对于

这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点,第二个小数点将被看作无效的,

parseFloat()方法会把这个小数点之前的字符串转换成数字。这意味着字符串 “22.34.5 “将被解析成

22.34。
使用parseFloat()方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,而不能

用八进制形式或十六进制形式。该
方法会忽略前导0,所以八进制数0908将被解析为908。对于十六

进制数0xA,该方法将返回NaN,因为在浮点数中,x不是有效字符。此外,parseFloat()也没有基模式。

下面是使用parseFloat()方法的示例:
parseFloat(“1234blue”); //returns 1234.0

parseFloat(“0xA”); //returns NaN
parseFloat(“22.5”); //returns 22.5

parseFloat(“22.34.5”); //returns 22.34
parseFloat(“0908”); //returns 908

parseFloat(“blue”); //returns NaN
2. 强制类型转换

还可使用强制类

型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类

型的。
ECMAScript中可用的3种强制类型转换如下:
Boolean(value)——把给定的值转换成

Boolean型;
Number(value)——把给定的值转换成数字(可以是整数或浮点数);
String

(value)——把给定的值转换成字符串。
用这三个函数之一转换值,将创建一个新值,存放由原始值

直接转换成的值。这会造成意想不到的后果。
当要转换的值是至少有一个字符的字符串、非0数字或

对象(下一节将讨论这一点)时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined

或null,它将返回false。
可以用下面的代码段测试Boolean型的强制类型转换。
Boolean(“”);

//false – empty string
Boolean(“hi”); //true – non-empty

string
Boolean(100); //true – non-zero number
Boolean(null); //false –

null
Boolean(0); //false – zero
Boolean(new Object()); //true –

object
Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的

是整个值,而不是部分值。还记 得吗,parseInt()和parseFloat()方法只转换第一个无效字符之前的字

符串,因此 “4.5.6 “将被转换为 “4.5 “。用Number()进行强制类型转换, “4.5.6 “将返回NaN,因为

整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number()将判断是调用parseInt()方法

还是调用 parseFloat()方法。下表说明了对不同的值调用Number()方法会发生的情况:
用  法

结  果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number

(null) 0
Number( “5.5 “) 5.5
Number( “56 “) 56
Number( “5.6.7 “)

NaN
Number(new Object()) NaN
Number(100) 100
最后一种强制类型转换方法String

()是最简单的,因为它可把任何值转换成字符串。要执行这种强制类型转换,只需要调用作为参数传递

进来的值的 toString()方法,即把1转换成 “1 “,把true转换成 “true “,把false转换成 “false ”

,依此类推。强制转换成字符串和调用toString()方法的唯一不同之处在于,对null或undefined值强制

类型转换可以生成字符串而不引 发错误:
var s1 = String(null); //”null”
var

oNull = null;
var s2 = oNull.toString(); //won’t work, causes an

error
3. 利用js变量弱类型转换

举个小例子,一看,就会明白了。


上例利用了js的弱类型的特点,只进行了算术运算,实现了字符串

到数字的类型转换,不过这个方法还是不推荐的。

【JQuery】关于JQuery获取$(this)子节点对象的方法

相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?

       首先来看看JQuery中的  $()  这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($(‘#id’));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。

       那么,我们再回过头来说$(this),这个this是什么呢?假设我们有如下的代码:

$(“#desktop a img”).each(function(index){

          alert($(this));

          alert(this);

}

那么,这时候可以看出来:

 alert($(this));  弹出的结果是[object Object ]

alert(this);        弹出来的是[object HTMLImageElement]

也就是说,后者返回的是一个html对象(本例中是遍历HTML的img对象,所以为 HTMLImageElement)。很多人在使用jquery的时候,经常this.attr(‘src’);   这时会报错“对象不支持此属性或方法”,这又是为什么呢?其实看明白上面的例子,就知道错在哪里了:

很简单,this操作的是HTML对象,那么,HTML对象中怎么会有val()方法了,所以,在使用中,我们不能直接用this来直接调用jquery的方法或者属性。

明白了$(this)和this的区别,再来看看这个例子:(假设,我的页面中a标签包含img,并含有src属性),当我在遍历的时候,想取到$(this)下img中src的地址

$(“#desktop a “).each(function(index){

         var imgurl=$(this).find(‘img’).attr(‘src’);

         alert(imgurl);

        }

其中 .find(element) 是返回一个用于匹配元素的DOM元素,这样就可以取到想要的src地址了