jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>window show</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="../css/win.css" rel="stylesheet" type="text/css"/>
</head>
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript" src="../javascript/showwindow.js"></script>
<body>
<a id="link" onclick="javascript:showWindow();" href="#">showWindow</a>
<div id="win">
<div id="title">标题<span id="close" onclick="javascript:hidden()">X</span></div>
<div id="content">内容.........</div>
</div>
</body>
</html>
CSS
#win{
border:1px red solid;
width:300px;
height:200px;
position:absolute;
top:100px;
left:350px;
display:none;
}
#title{
background-color:blue;
color:yellow;
padding-left:3px;
}
#content{
padding-left:3px;
padding-top:5px;
}
#close{
margin-left:245px;
cursor:pointer;
}
JS
function showWindow(){
//获得DIV
var divWindow = $("#win");
//divWindow.css("display","block");
/**SHOW方法
divWindow.show(4000,function(){
alert("over");
});
*/
//淡入
divWindow.fadeIn("slow");
//$("#link").fadeOut("slow");
//淡出
//divWindow.fadeOut("slow");
}
function hidden(){
//可以改CSS
//也可以用$("#win").hide("slow")方法
$("#win").fadeOut("slow");
//$("#win").hide("slow");
//$("#win").css("display","none");
//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$("document").ready(
function(){
}
);
//$("ul")这个是按标签去查的，不用加#
//$(this)当前节点
//$("p").toggle()如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
//$("div > p");找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
}
分享到：
相关推荐
"JQuery淡入淡出自动切换图片特效"就是一种常见的实现方式，它利用jQuery库的动画功能，使图片在页面上以淡入淡出的方式自动切换，既美观又具有交互性。接下来，我们将深入探讨这个知识点。 首先，jQuery是一个轻量...
<title>jQuery淡入淡出窗口示例 <!-- 引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 你的内容区域 --> ``` 接下来，我们创建一个HTML元素，如一个div，作为...
本文将深入探讨如何使用jQuery实现淡入淡出对话框的效果，这一功能常用于网页中的提示、警告或者用户交互反馈。 首先，我们需要理解jQuery的核心概念。jQuery库通过选择器（如$("#id")或$(".class")）来选取DOM元素...
【jQuery淡入淡出多级下拉动画菜单】是一种常见的网页交互设计，广泛应用于网站导航栏，提升用户体验。这个特效代码基于JavaScript库jQuery实现，利用CSS样式和HTML结构，为菜单项添加动态的淡入淡出效果，同时支持...
<title>jQuery淡入淡出实例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> #fade-element { width: 200px; height: 200px; background-color: #f00; display: none; /* 初始隐藏 *...
"jquery淡入淡出"是jQuery库中的一个核心功能，主要用于实现元素的平滑过渡，比如淡入（fadeIn）和淡出（fadeOut）效果。这种效果在网页设计中广泛应用，为用户提供了更丰富的视觉体验。 jQuery的fadeIn()方法允许...
jQuery库因其简洁的API和强大的功能，常被用于实现各种复杂的交互效果，其中包括图片的淡入淡出效果。本教程将详细介绍如何使用jQuery来实现图片的无缝淡出淡入效果。 一、jQuery基础 jQuery是一个JavaScript库，...
在IT领域，淡入淡出效果是用户界面设计中一种常见的动画技巧，它主要用于图片、视图或页面之间的平滑过渡。这种效果给人一种流畅而优雅的视觉体验，使得应用程序或网站看起来更加专业和吸引人。在本教程中，我们将...
在图片淡入淡出的例子中，jQuery的`.fadeIn()`和`.fadeOut()`方法被用于控制图片的可见性，实现平滑的透明度变化，从而达到淡入淡出的效果。 `css`目录下的文件可能包含样式表，定义了图片的布局和初始状态，如初始...
在网页设计中，图片淡入淡出是一种常见的视觉效果，用于增强用户体验，使得页面的过渡更加平滑。这种效果通常是通过JavaScript脚本来实现的，它可以让一张图片在消失的同时，另一张图片逐渐显现，形成一种无缝过渡的...
在网页设计中，为了吸引用户的注意力并提供良好的用户体验，经常使用动态效果，如广告的淡入淡出。这种效果能够使网页看起来更加生动且专业，同时避免过于突兀的广告切换给用户带来不适。"css网页广告淡入淡出"是...
在本文中，我们将深入探讨如何实现图片的淡入淡出切换效果，这是一个常见的网页动态效果，可以提升用户体验。我们将基于给定的"js-picture-switch-effect"压缩包中的源代码进行讲解，该代码提供了直接运行的功能。 ...
在这个例子中，我们创建了一个包含多个公告的容器，并使用jQuery的`fadeIn()`和`fadeOut()`方法实现淡入淡出效果。通过`setInterval`函数，公告会每5秒钟自动循环到下一个。 从提供的文件列表来看，`公告Jquery....
本文将详细讲解如何利用jQuery实现淡入淡出的消息框，这是一个非常实用的功能，常用于向用户展示通知、警告或确认信息。 首先，淡入淡出效果是通过jQuery的动画功能实现的，主要涉及到`fadeIn()`和`fadeOut()`两个...
jQuery 淡入淡出（FadeIn/FadeOut）效果是网页动态展示中常见的动画技巧，主要用于元素的可见性变化，让元素以平滑的透明度过渡从不可见变为可见，或者从可见变为不可见。在 jQuery 中，这两个功能非常简单易用，...
本资源“jQuery实现的点击淡入淡出显示图片特效源码.zip”提供了一种利用jQuery实现的图片点击后淡入淡出显示的特效，这在网页设计中是一种常见的视觉效果，用于提升用户体验。 首先，我们需要了解jQuery的核心概念...
在计算机图形学和网页设计领域，图片淡入淡出是一种常见的视觉效果，它能为用户带来平滑且吸引人的过渡体验。这种效果通常用于展示一系列图片或者在页面加载时增加视觉吸引力。本教程将深入探讨如何实现图片淡入淡出...
"jQuery淡入淡出下拉菜单特效代码"就是一个典型的例子，它利用jQuery的动画效果来提升网站导航菜单的视觉吸引力。 这个特效的核心在于，当用户将鼠标悬停在主菜单项上时，下拉菜单会以淡入的方式出现，而不是突然跳...
这个例子展示了如何使用CSS和JavaScript实现`li`元素的左右淡入淡出效果。在实际项目中，可能还需要考虑更多细节，如响应式设计、兼容性问题和性能优化等。"li显示测试"可能是指对这种效果的测试，确保在不同设备和...
本文将深入探讨“jQuery图片淡入淡出切换特效”这一主题，包括其实现原理、代码结构和应用实例。 jQuery图片淡入淡出切换特效是通过控制图片的透明度变化来实现的，这种效果通常被称为FadeIn（淡入）和FadeOut...