沉浸式阅读
Beta

网站顶部大图广告显示数秒后隐藏后显示小图

     订阅 网页特效     2018-09-02     602    0    0    0    2018-09-02
学习要点:这个jquery特效总共有三种效果:第一种为:顶部大图广告显示数秒后隐藏。也就说除非刷新,也就不再显示了。第二种为:顶部大图广告显示数秒后隐藏。然后会出现一个重播的按钮。第三种为:顶部大图广告显示数秒后隐藏。然后会显示一个小图。有兴趣的可以仔细研究一下,demo只是其中一个小图的预览。像的显示时间等,图片大小都是可以自定义的。!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

网站顶部大图广告显示数秒后隐藏后显示小图

这个jquery特效总共有三种效果:

第一种为:顶部大图广告显示数秒后隐藏。也就说除非刷新,也就不再显示了。

第二种为:顶部大图广告显示数秒后隐藏。然后会出现一个重播的按钮。

第三种为:顶部大图广告显示数秒后隐藏。然后会显示一个小图。

有兴趣的可以仔细研究一下,demo只是其中一个小图的预览。像的显示时间等,图片大小都是可以自定义的。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部广告显示数秒后隐藏效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!--  第一种形式原广告显示数秒后隐藏  -->
<!--<script type="text/javascript">
$(document).ready(function(){
	
	$("#banner").slideDown("slow");		
})
 function displayimg(){
	$("#banner").slideUp("slow");    
  }
 
  setTimeout("displayimg()",15000);
  
</script>-->

<!--  第二种形式原广告显示数秒后大板块隐藏,显示用来重播的标签  -->
<!--<script type="text/javascript">
$(document).ready(function(){
	
	$("#banner").slideDown("slow");		
	$("#rightOpen").hide();
	
	$("#rightOpen").click(function(){
		$("#banner").slideDown("slow"); 
		setTimeout("displayimg()",15000);
		$("#rightOpen").hide();
	})
})
 function displayimg(){
	$("#banner").slideUp("slow");   
		$("#rightOpen").show();  
  }
 
  setTimeout("displayimg()",15000);
  
</script>-->

<!--  第三种形式原广告显示数秒后隐藏,展示小图  -->
<script type="text/javascript">
$(document).ready(function(){
	
	$("#banner").slideDown("slow");	
})
 function displayimg(){
	$("#banner").slideUp(1000,function(){
		$("#top").slideDown(1000);
	})
  }
  setTimeout("displayimg()",1000);
</script>
</head>

<body>
<!--<div id="rightOpen" style="width:25px; height:275px; position:absolute; right:0px; top:0px;">重播</div>--><!--此注释的div为应用第二种js时所需要的内容,若用到第二种样式,请解除div的注释。里面的“重播”按钮可以为文字,也可以为图片。www.tonjay.com注-->
<div id="top" style="display:none;"><img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="02.jpg" width="980" height="60" /></div><!--若用到第一种样式和第二种样式,此div可以删除。www.tonjay.com注-->
<div id="banner" style="width:980px; height:291px; display:none;"><img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="01.jpg" width="980" height="291" /></div>
</body>
</html>

本文标题: 网站顶部大图广告显示数秒后隐藏后显示小图

本文链接: https://www.mbkfw.com/course/438.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈