jQuery实现窗口的淡入淡出效果

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

               

在很多网页中都可以看到网页弹出的一个窗口,然后很多情况下面还会有淡入淡出的效果,下面我们就这个窗口的

淡入淡出效果来做一个例子,这个是使用jQuery来做的,其实非常简单。

首先看HTML代码

<html>  <head>    <title>浮动窗口title>    <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js">script<script type="text/javascript" src="/Ajax/js/win.js">script>   <link rel="stylesheet" href="/Ajax/css/win.css" type="text/css">link>     head>    <body>  <a href="#" onclick="showwin();">显示浮动窗口a<div id="myWin">   <div id="title">我是标题栏<span id="span"><a href="#" onclick="hello()">关闭a>span>div>   <div id="content">我是一个窗口哦!!!divdivbody>html>

然后再看JavaScript代码

//显示浮动窗口的方法function showwin()//alert("hah"); //显示窗口 //$("#myWin").show("slow"); $("#myWin").fadeIn(3500);}function hello(){ $("#myWin").fadeOut(2000);}

剩下的就是CSS代码了

#myWin/*希望窗口有边框*/ border: 1px red solid; width: 300pxheight: 200px/*控制窗口的位置*/ position: absolute; top: 100pxleft: 350px;  display: none;}/*控制标题栏的背景色*/#titlebackground-color: yellow; /*控制标题栏左内边距*/ padding-left: 3px; }#contentpadding-top: 5pxpadding-left: 5px;}#spanpadding-left: 180px;}a:LINKtext-decoration: none;}a:HOVERcolor: red;}

效果还是很好的,而且很简单,           

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

你可能感兴趣的:(jQuery实现窗口的淡入淡出效果)