Home > Article > Web Front-end > Banner ad shrink effect code implemented by jquery_jquery

Banner ad shrink effect code implemented by jquery_jquery

WBOYOriginal: 2016-05-16 15:40:521574browse

The example in this article describes the Banner ad shrinking effect code implemented by jquery. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the shrinking effect of a Banner ad. After clicking it, the webpage will display a large ad. After clicking "Close" with the mouse, the ad will shrink. This effect has been seen on major websites. You are welcome to learn from it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-banner-show-close-style-codes/

The specific code is as follows:

<!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(images/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="jquery-1.6.2.min.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>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS implements horizontal stretching dynamic telescopic menu effect code_javascript skillsNext article：JS implements horizontal stretching dynamic telescopic menu effect code_javascript skills

See more

Banner ad shrink effect code implemented by jquery_jquery

Related articles