基于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 NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
VUE实现日历组件功能
Mar 13 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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代码的53条建议
2008/03/27 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
python实现简单五子棋游戏
2019/06/18 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
运动会报道稿大全
2015/07/23 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
html5调用摄像头截图功能
2022/01/18 Javascript
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
springboot读取nacos配置文件
2022/05/20 Java/Android