企业网站展示补充用Jquery实现简单的动态变化效果
上一篇日志发布了一个企业网站源代码，这篇日志主要补充一下Jquery的相关知识，Jquery是一种与Protype类似Js开
发框架，而且很轻量化，深受广大像CG一样的程序员的喜爱，当然了用Jquery写出动态效果也是小菜一碟以下是CG
用jquery实现的简单的动态效果，大家看到之后不要觉得JS代码很复杂哦
下面是展示地址
http://www.lidaren.com/code/Jquery/Jquery1.htm
下面是源代码
$(document).ready(function(){ $("#box").animate({opacity: "0.1", left: "+=600"}, 1200) .animate({opacity: "1", top: "+=300", height: "170", width: "300"}, "slow") .animate({opacity: "0.1", left: "0", height: "170", width: "300"}, "slow") .animate({opacity: "1", top: "0"}, "fast") .animate({opacity: "1", top: "+=150", left: "+=300", height: "170", width: "300"}, "slow") .animate({opacity: "0.1", height: "170", width: "300"}, "slow") .animate({opacity: "1" , height: "170", width: "300"}, "slow") .animate({opacity: "0.4", height: "170", width: "300"}, "slow") .animate({opacity: "1", height: "170", width: "300"}, "slow") .slideUp() .slideDown("slow") .animate({opacity: "0.1", height: "170", width: "300"}, "slow") .animate({opacity: "1" , height: "170", width: "300"}, "slow") .animate({opacity: "0.4", height: "170", width: "300"}, "slow") .animate({opacity: "1", height: "170", width: "300"}, "slow") return false; }); |
简单的解释一下，Jquery对DOM对象的动态效果是定义了对象的animate方法来实现的，animate方法的参数比较多，第一个参数是对象从A状态到B状态的基本属性变化值，通常与CSS兼容，Jquery支持表达式计算功能，比如height:”+=300″ 就是高度自增300，这种方式很方便代码的编写，第二个属性通常是控制变化的效果的，主要可用的值是 fast和slow，当然大家也可以用一个整数来表示变化的时间长度，这样控制更自由一点。下面是 .slideUp() .slideDown()这两个方法，效果是卷动效果，参数可以是fast和slow或者加时间控制，单位是毫秒，其他的还有.hidde()和.show(),看意思大家就明白，这里不详述
如果让一个说明都不了解的人使用，他会得到什么呢？
呵呵，看得出来松松做博客认真，这点我是永远比不上了，呵呵