jQuery实现首页顶部可伸缩广告特效代码

2024-04-04 19:05:11

特效介绍

麦包包首页顶部广告代码仿麦包包首页顶部伸缩广告jQuery广告代码。页面载入完成后，2.5秒后会自动放大广告显示，页面内容自动向下延伸。显示8.5秒后自动收回，放小显示。

演示图

使用方法

1、把下面的CSS样式拷贝到您的html的头部：

代码如下:

2、把以下代码拷贝到整个页面顶部，即<body>的下面。

<DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: block" id=js_ads_banner_top>
  <A href="/" target=_blank><IMG src="images/banner_s.jpg" width=960 height=70></A>
</DIV>
<DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: none" id=js_ads_banner_top_slide>
  <A href="/" target=_blank><IMG src="images/banner_b.jpg" width=960 height=400></A>
</DIV>
<SCRIPT type=text/javascript src="jquery/jquery-1.8.3.min.js"> </SCRIPT>
<SCRIPT type=text/javascript src="js/js.js"> </SCRIPT>

3、js代码分析(js.js)：

if ($("#js_ads_banner_top_slide").length){  //判断当前广告是否展开，如果没有，则执行下面代码
  var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");
  setTimeout(function(){$bannertop.slideUp(1000);$slidebannertop.slideDown(1000);},2500); //2500毫秒(2.5秒)后，小广告收回，大广告伸开，执行时间都是1秒(1000毫秒)
  setTimeout(function(){$slidebannertop.slideUp(1000,function (){$bannertop.slideDown(1000);});},8500); //8.5秒(8500毫秒)之后，大广告收回，小广告展开。
}

本站下载演示地址

以上所述就是本文的全部内容了，希望大家能够喜欢。

jquery实现对联广告的方法

本文实例讲述了jquery实现对联广告的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery.js" type="text/javas
jquery实现可关闭的倒计时广告特效代码

本文实例讲述了jquery实现可关闭的倒计时广告特效代码.分享给大家供大家参考.具体如下: 这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来.希望大家喜欢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-close-time
jQuery实现页面顶部下拉广告

本广告可以是图片也可以是Flash,可以设置自动播放的时间,可以手动停止和重播. 效果展示 http://demo.jb51.net/js/2016/jQuery_xiala/ 源码下载:http://xiazai.jb51.net/201612/yuanma/jQuery(xiala)_jb51.rar 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
jQuery网页右侧广告跟随滚动代码分享

两种方法都分享给大家,希望对大家的学习有所启发. 方法一: <script type="text/javascript">// <![CDATA[ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(func
基于jquery实现图片广告轮换效果代码

效果图:实现代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="
jquery实现滑屏大图定时收缩为小banner图片的广告代码

本文实例讲述了jquery实现滑屏大图定时收缩为小banner图片的广告代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的JS广告特效,滑屏大图广告定时收缩为小banner图片广告代码,这种广告在各大门户网站现在还能看得到,刚打开网页的时候可以看到滑下来的大图片广告,过一会,广告自动缩小变成了一个banner横幅广告,并带有关闭按钮,可以关闭广告,对于广告来说,这个代码挺实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
jquery右下角自动弹出可关闭的广告层

右下角弹出层后,会在一定时间后自动隐藏. html代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> <scrip
基于jquery实现的定时显示与隐藏div广告的实现代码

下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTimeout函数来实例,下面我给大家分享我的方法.html页面中我们随便放些东西复制代码代码如下: <div class="toolbarframe" style="display:none;"><a href="http://www.jb51.net" target="_blan
jquery实现两边飘浮可关闭的对联广告

效果展示: 代码说明: 可关闭的左右两边飘浮的对联广告代码jquery特效,宽屏分辨率大于1024px才显示.因为考虑到窄屏下显示对联广告那真是用户体验超差. 点击关闭按钮可以单独关闭自己一边的飘浮的对联广告代码. js代码中的var screen_w = screen.width; if(screen_w>1024){duilian.show();} 是jquery判断浏览器分辨率的,你可以修改这个可关闭的左右两边飘浮的对联广告代码所需要的浏览器分辨率值,如果不想做判断可以删除这两句,让后把c
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> <title>浮动广

jQuery实现首页顶部可伸缩广告特效代码

相关推荐

随机推荐