<!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>
<title>一个Banner广告收缩效果</title>
<style type="text/css">
*{margin:0; padding:0;}/*为了方便 直接这样重置了*/
#main{margin:0 auto; width:960px;}
#banner{display:none; margin:0 auto; width:960px; height:160px; background:url(http://www.codefans.net/jscss/demoimg/201107/banner.png) no-repeat; position:relative;}
#close{display:block; width:50px; height:22px; text-align:center; line-height:22px; border:1px #ddd solid; background:#000; color:#fff; font-size:12px; float:right; cursor:pointer;}
</style>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$
(
function()
{
$("#banner").slideDown();
var Up=function(){$("#banner").slideUp(1500)}
setTimeout(Up,3000);
$("#close").click
(
function()
{
$("#banner").slideToggle
(
600,function()
{
if($("#banner").css("display") == "none")
{
$("#close").text("打开");
}
else
{
$("#close").text("关闭");
}
}
);
}
);
}
);
</script>
</head>
<body>
<div id="main">
<div id="banner"></div>
<span id="close">关闭</span>
</div>
</body>
</html>

一个Banner广告收缩效果的更多相关文章

  1. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

  2. 如何在RCP程序中添加一个banner栏

    前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个bann ...

  3. Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View

    最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...

  4. Android 原生listview item伸展收缩效果 （续）

    接上一个原生的listview item的伸展收缩效果. 上一个可能做的有些粗糙,效果也没有这个好,上代码. package com.example.listviewdemo; import java ...

  5. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  6. [Swift通天遁地]八、媒体与动画-(3)实现视频播放的水印、Overlay、暂停时插入广告等效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. 广告投放效果难判断？集成华为DTM为您轻松实现！

    在进行广告投放时,你是否遇到这样的困扰: 花了一大笔预算去投放推广,不知道实际效果如何? 用户看到投放的广告,产生了哪些有价值的行为? 当前广告投放的渠道和类型等投放策略,是否需要调整? 此时我们就需 ...

  8. 一个不错的loading效果--IT蓝豹

    一个不错的loading效果 介绍:一个不错的loading加载效果,弹性收缩,效果不错,学习android动画的朋友可以下载来研究研究本例子其实由SeekBar实现,由MetaballView,Me ...

  9. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. <httpProtocol/>配置http协议头

    Web.Config中的位置 <configuration> <system.webServer> <httpProtocol> <!--http协议内容-- ...

  2. java下DataInputStream与DataOutputStream写入数据的同时写入数据类型

    package cn.stat.p2.demo; import java.io.DataInputStream; import java.io.DataOutputStream; import jav ...

  3. MySql用statement实现DDL,DML,DQL的操作Demo

    Demo1 Connection connection=null; Statement stmt=null; int result=-1; try { Class.forName("com. ...

  4. 总结：spring 的ioc 知识点

    1. spring ioc的优点    解耦,对象的创建不直接在代码里生成(不方便修改) ,交由容器创建.... 2.IOC 和 DI 的区别        依赖关系:A类 里 要调用B类  如 se ...

  5. POJ2976 Dropping tests(二分+精度问题）

    ---恢复内容开始--- POJ2976 Dropping tests 这个题就是大白P144页的一个变形,二分枚举x,对a[i]-x*b[i]从大到小进行排序,选取前n-k个判断和是否大于等于0,若 ...

  6. uva 10260 - Soundex

    题目:编码翻译,有些字母有对应的数字,有的没有,如果连续对应的数字相同只输出一个. #include <iostream> #include <cstdlib> #includ ...

  7. Ftp连接错误

    FTP连接上传 文件报错  windows无法访问此文件夹.请确保输入的文件名是否正确,并且您有权访问此文件.. 解决办法 : IE设置为脱机使用,文件浏览器登录ftp时调用IE浏览器,所以无法连接, ...

  8. 使用PyQt4写界面后台程序方法总结

    使用PyQt4编写界面后台程序的方法总结 一.怎么建立多线程 界面程序如果有稍微耗时一点的任务如果不使用多线程就会界面卡死,所以大多数情况会使用到多线程.PyQt4自己有多线程的机制,可以派生多线程类 ...

  9. Codeblocks 添加库（undefined reference 错误的处理）

    静态库  (扩展名为 .a 或 .lib) 是包含函数的文件,用于在link阶段整合执行程序,动态链接库(扩展名  .dll)是不在link阶段整合进执行程序中的. DLL文件在执行阶段动态调用 下面 ...

  10. STL 查找vector容器中的指定对象：find(）与find_if()算法

    1 从vector容器中查找指定对象:find()算法 STL的通用算法find()和find_if()可以查找指定对象,参数1,即首iterator指着开始的位置,参数2,即次iterator指着停 ...