【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)}); … Continue reading “【JQuery】动画与效果”

【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%", … Continue reading “【JQuery】animate的使用方法”

【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 … Continue reading “【Javascript】漂亮的JS日期选择器”

【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 … Continue reading “【Javascript】字符串转换函数总览”

【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地址了