Home > 语言编程 > 企业网站展示补充用Jquery实现简单的动态变化效果

企业网站展示补充用Jquery实现简单的动态变化效果

上一篇日志发布了一个企业网站源代码,这篇日志主要补充一下Jquery的相关知识,Jquery是一种与Protype类似Js开
发框架,而且很轻量化,深受广大像CG一样的程序员的喜爱,当然了用Jquery写出动态效果也是小菜一碟以下是CG
用jquery实现的简单的动态效果,大家看到之后不要觉得JS代码很复杂哦

下面是展示地址
http://www.lidaren.com/code/Jquery/Jquery1.htm


下面是源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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(),看意思大家就明白,这里不详述

Categories: 语言编程 Tags: , ,
  1. July 20th, 2009 at 14:36 | #1

    如果让一个说明都不了解的人使用,他会得到什么呢?

  2. July 21st, 2009 at 22:45 | #2

    呵呵,看得出来松松做博客认真,这点我是永远比不上了,呵呵

  1. No trackbacks yet.