软件开发培训班 >> 编程开发 >> JavaScript

jquery div提示框渐隐弹出与隐藏效果

　　本文标签：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=gb2312" /> 
<title>jquery div提示框渐隐弹出与隐藏</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<style> 
*{margin:0;padding:0;font-size:12px;} 
input{width:120px;height:30px;cursor:pointer;} 
#note{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;} 
</style> 
<script> 
$(function(){ 
$(input).click(function(){ 
if(!$(#note).is(:visible)){ 
$(#note).css({display:block, top:-100px}).animate({top: +100}, 500, function(){ 
setTimeout(out, 3000); 
}); 
} 
}); 
}); 
function out(){ 
$(#note).animate({top:0}, 500, function(){ 
$(this).css({display:none, top:-100px}); 
}); 
} 
</script> 
</head> 
<body> 
<div id="note">脚本之家</div> 
<input type="button" value="点我，30s后消失" /> 
</body> 
</html>

技术文章快速查找

用js取得鼠标所在位置的对象

JQuery+JS实现仿百度搜索结果中关键字变色效果

javaScript checkbox 全选/反选及批量删除

JS复制内容到剪切板的实例代码(兼容IE与火狐)

Javascript生成json的函数代码(可以用php的json_decode解码)

使用jQuery模板来展现json数据的代码

jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

js的hasownproperty使用示例

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建