基于Jquery的淡入淡出的特效基础练习


Posted in Javascript onDecember 13, 2010

今天练习了个Jquery淡入淡出的特性代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type='text/javascript' src='jquery-1.2.6.min.js'></script> 
<style type="text/css"> 
#gallery1 {width:100%; overflow:hidden;} 
#gallery1 a {position:relative; float:left; margin:5px;} 
#gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;} 
#gallery1 img { border: solid 1px #999; padding:5px;} 
#gallery1 a:hover span { display:block;} 
#gallery2 {width:100%; overflow:hidden;} 
#gallery2 a {position:relative; float:left; margin:5px;} 
#gallery2 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;} 
#gallery2 img { border: solid 1px #999; padding:5px;} 
</style> 
<script> 
$(document).ready(function(){ 
$("#gallery2 a").append("<span></span>"); 
$("#gallery2 a").hover(function(){ 
$(this).children("span").fadeIn(600); 
},function(){ 
$(this).children("span").fadeOut(200); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="gallery1"> 
<h2>CSS solution</h2> 
<a href="1.jpg"> 
<span></span> 
<img src="1.jpg" alt="" /> 
</a> 
<a href="2.jpg"> 
<span></span> 
<img src="2.jpg" alt="" /> 
</a> 
</div> 
<div id="gallery2"> 
<h2>jQuery solution</h2> 
<a href="1.jpg"> 
<img src="1.jpg" alt="" /> 
</a> 
<a href="2.jpg"> 
<img src="2.jpg" alt="" /> 
</a> 
</div> 
</body> 
</html>

用到的图片:基于Jquery的淡入淡出的特效基础练习基于Jquery的淡入淡出的特效基础练习基于Jquery的淡入淡出的特效基础练习
一个淡入淡出小例子:
<body> 
<form action="" method="post" id ="myform"> 
<button value="Click Me">Click Me</button> 
<p style="background:red;" >context<br>context<br>context<br>context</p> 
</form> 
</body> 
</html>

Jquery代码
$(document).ready( 
function() { 
/*淡入淡出*/ 
$("button").toggle( 
function (){ 
$("p").fadeOut("fast",function(){ 
} 
) 
}, 
function (){ 
$("p").fadeIn("fast",function(){ 
} 
) 
} 
); 
});

演示代码 http://demo.3water.com/js/zoom_icon%20to_images/index.htm
Javascript 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 #Javascript
JQuery中getJSON的使用方法
Dec 13 #Javascript
JavaScript 学习历程和心得分享
Dec 12 #Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 #Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 #Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 #Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 #Javascript
You might like
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
使图片旋转的3种解决方案
2013/11/21 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
详解webpack babel的配置
2018/01/09 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python随机读取文件实现实例
2017/05/25 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python+opencv实现动态物体追踪
2018/01/09 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Django中FilePathField字段的用法
2020/05/21 Python
pytorch简介
2020/11/11 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
2014年公司迎新年活动方案
2014/02/24 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
学校重阳节活动总结
2015/03/24 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
Nginx的gzip相关介绍
2022/05/11 Servers
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技