基于框架的淡入淡出的特效基础练习

今天练习了个框架淡入淡出的特性代码如下：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title无标题文档/title脚本类型=' text/JAVAScript ' src=' jquery-1。2 .6 .量滴js /脚本样式类型=' text/CSS ' # gallery 1 { width :100%；飞越：隐藏；} #图库1 a {位置：相对；float : leftmargin :5 px } # gallery 1a span { display : none；背景-图像： URL(缩放。巴布亚新几内亚)；背景-重复：不重复；宽度：48 px高度：48 px位置：绝对；left :15 xtop :15 px } #图库1 img {边框3360实心1px # 999padd :5 px } # gallery 1a :悬停跨度{ display : block} #图库2 {宽度：100%；飞越：隐藏；} #图库2 a {位置：相对；float : leftmargin :5 px } # gallery 2a span { display : none；背景-图像： URL(缩放。巴布亚新几内亚)；背景-重复：不重复；宽度：48 px高度：48 px位置：绝对；left :15 xtop :15 px } #图库2 img {边框3360实心1px # 999padd :5 px }/style脚本$(文档)。ready(function(){ $('#gallery2 a ')).追加(“跨度/跨度”)；$('#gallery2 a ').悬停(function(){ $(this)).儿童(' span ').法丁(600);}，function(){ $(this).儿童(' span ').淡出(200)；});});/script/head body div id=' gallery 1 ' h2CSS解决方案/H2。jpg ' span/span img src=' http :1。jpg ' alt=' '//a href=' 2。jpg ' span/span img src=' http :2。jpg ' alt=' '//a/div id=' gallery 2 ' h2jQuery解决方案/H2。jpg ' img src=' http 3366 '用到的图片

一个淡入淡出小例子：复制代码代码如下：正文表单操作='方法='发布id='myform '按钮值='单击我'单击我/按钮p style=' background : redcontextbrcontextbrcontextbrcontext/p/form/body/html Jquery代码复制代码代码如下：美元（文件)。就绪（函数(){ /*淡入淡出*/$("按钮")。切换(函数(){ $('p ')).fadeOut('fast '，function(){ } ) }，function (){ $('p ').fadeIn('fast '，function(){ })})；});演示代码http://demo.jb51.net/js/zoom_icon到_图像/索引。html文件的后缀