网站顶部滑动显示的DIV层提示效果，一般用于网站公告或广告，采用滑出的方式.

最新推荐文章于 2021-12-20 20:45:12 发布
最新推荐文章于 2021-12-20 20:45:12 发布
阅读量3.7k 收藏
点赞数
文章标签： div 公告 float 编程 工具 url
  1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>阿里妈妈网站顶部banner代码</title>  
  5. <style>  
  6. body{margin:0px;padding:0px}  
  7. .home_tx {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.veryhuo.com/uploads/allimg/1011/hometx_03.gif); PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px}  
  8. .home_tx IMG {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px}  
  9. .home_tx DL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 0px 0px; WIDTH: 61px; PADDING-TOP: 0px; HEIGHT: 37px}  
  10. .home_tx SPAN {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 830px; COLOR: #333333; LINE-HEIGHT: 34px; PADDING-TOP: 0px; HEIGHT: 37px; TEXT-ALIGN: left}  
  11. .home_tx SPAN B {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px}  
  12. .home_tx A {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 35px; PADDING-TOP: 0px; HEIGHT: 37px}  
  13. </style>  
  14. </head>  
  15. <body>  
  16. <DIV id=home_tx style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 1px">  
  17. <DIV class=home_tx id=home_tx_in style="POSITION: absolute; TOP: -37px; HEIGHT: 37px" align=center>  
  18. <DL><IMG src="http://www.veryhuo.com/uploads/allimg/1011/hometx_01.gif"></DL><SPAN><B>烈火网提供计算机、网站、设计教程、编程等教程，同时有源码下载、站长工具、免费资源等内容，是国内快捷易懂、内容丰富的网上学习网站。</B>  
  19. 　　<A style="FLOAT: none" href="http://www.veryhuo.com" target=_blank>详情>></A></SPAN> <A style="CURSOR: pointer" οnfοcus=this.blur() onClick="home_tx_hide();return false;" href="#"><IMG src="http://www.veryhuo.com/uploads/allimg/1011/hometx_04.gif"></A> </DIV></DIV>  
  20. <script>  
  21. var is_home_tx_show = false;  
  22. var div_home_tx = document.getElementById("home_tx");  
  23. var div_home_tx_in = document.getElementById("home_tx_in");  
  24. var stepms = 10;  
  25. function home_tx_show(){  
  26. home_tx_stepshow();  
  27. }  
  28. function home_tx_stepshow(){  
  29. var curHeight = parseInt(div_home_tx.offsetHeight);  
  30. if(curHeight>=37){  
  31. is_home_tx_show = true;  
  32. }else{  
  33. div_home_tx.style.height = (curHeight + 4) + "px";  
  34. div_home_tx_in.style.top = (parseInt(div_home_tx_in.style.top)+4)+"px";  
  35. window.setTimeout(home_tx_stepshow,30);  
  36. }  
  37. }  
  38. function home_tx_hide(){  
  39. if(is_home_tx_show){  
  40. home_tx_stephide()  
  41. }else{  
  42. window.setTimeout(home_tx_stephide,1200);  
  43. }  
  44. }  
  45. function home_tx_stephide(){  
  46. var curHeight = parseInt(div_home_tx.style.height);  
  47. if(curHeight<=0){  
  48. is_home_tx_show = false;  
  49. }else{  
  50. try{  
  51. div_home_tx.style.height = (curHeight - 4) + "px";  
  52. div_home_tx_in.style.top = (parseInt(div_home_tx_in.style.top)-4)+"px";  
  53. window.setTimeout(home_tx_stephide,30);  
  54. } catch(e) {}  
  55. }  
  56. }  
  57. if(window.addEventListener){  
  58. window.addEventListener("load",home_tx_show,false);  
  59. }else{  
  60. window.attachEvent("onload",home_tx_show);  
  61. }  
  62. </script>  
  63. </body>  
  64. </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>  
xiaopeng__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页设计之页面滑动
Belive_youself的博客
09-27 2335
如何实现网页上的滑动呢？首先就是需要一个按钮，使用者一旦点击该按钮就会发生隐藏页面划出的效果 代码及效果图如下： 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1
css3 div跳动动画_div层滑出效果css3动画代码
weixin_39633054的博客
12-29 678
一款使用jQuery和css3制作的滑动显示面板特效插件。当点击了滑动显示按钮，面板从左侧滑出，点击改变按钮或面板外任意位置，面板又滑动收缩回去。HTML结构Title Goes HereClose CSS样式首先解释一下为什么要将header从panel容器中分离出来。我们为panel使用了一个CSS3 transformation(准确的说是 translateX )来使它滑动显示。使用CSS...
网站顶部滑动显示的DIV层提示效果，一般用于网站公告或广告，采用滑出的方式....
bosschen
11-08 329
淘宝联盟（原阿里妈妈）网站顶部滑动显示的DIV层提示效果，一般用于网站公告或广告，采用滑出的方式，一个经典的工具条代码，可以当作菜单来用，同时还有完善的功能，可以适时关闭工具条，整体效果设计美观，简洁漂亮。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
网页动态滚动公告栏代码
03-31
网页中的动态滚动栏代码大全，有滚动文字，也有滚动图片。
js页面顶端显示信息
03-03
js页面顶端显示信息，可关闭的js在页面顶端显示信息的特效
11 个创新的网站滑动效果设计案例展示
weixin_33868027的博客
04-03 180
图片的滑动展示在网站设计中使用非常普遍，可用于解决方案、产品和服务的各种展示，而借助 JavaScript 和 CSS3 可让这些效果实现起来更加简单。 本文介绍 11 个网站滑动效果设计非常帮的案例供你参考： Superlover Cool combination of scroll and left with easing animation. Green Campus Guide...
网站通知栏信息滚动
jc_h
09-03 5323
没有加入事件。实现了广告栏的基本功能。这个功能主要是要设置overflow:hidden；否则很有可能不成功欢迎访问我的个人博客何俊才个人博客，这是基于NodeJS独立搭建的博客，代码基本上都是自己一行一行的码出来的。有很多不完善的地方希望访问这篇博文的阅读者给出建议。以便我更好的改进。（因为是学习所以有些框架就没用，在自己能力范围之内能实现的就自己手动实现）&lt;!DOCTYPE html&g...
公告
lrj124的博客
05-03 217
此博客以不再更新，欢迎大家访问我的博客园博客：点击打开
Jquery 生成页面顶端的滑动弹出式提示框效果
SS
04-28 2619
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./test.css"> </head><body> <div id="container"> <div id="notification"> <span id="msg
顶部导航--向上滚动的时候出现，向下滚动的时候隐藏
weixin_30699955的博客
07-23 358
顶部固定导航，，向上滚动的时候显示，，向下滚动的时候隐藏。类似新浪详细页效果... <script type="text/javascript"> var Top = 92; $(window).scroll(function(){ var t = $(window).scrollTop(); if(!($.browser.msie ...
如何在网页打开时弹出通知,JS代码
Lanson的博客
07-18 6756
以下为常用的一些弹出窗口的代码，有兴趣的大家可以自己试试哟： 【1、最基本的弹出窗口代码】   其实代码非常简单：           因为着是一段javascripts代码，所以它们应该放在 器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。           window.open   ( 'page.html ')   用于控制弹出新的窗口page.html，如果page.
DIV块左右滑动
Sometimes_Ymc的博客
08-27 8204
点击链接来查看滑动效果（从右向左滑动到下一页）     滑动到页面二           点击链接来查看滑动效果（从右向左滑动到下一页）     滑动到页面3 滑动到页面1           点击链接来查看反向的滑动效果（从左向右滑动到前一页）     滑动到页面一（反向）
页面向下滑动实现div显示和隐藏
viser123的博客
04-19 9411
Title heheh $(document).ready(function(){ var min_height = 100; $(window).scroll(function(){ var s =$(window).scrollTop(); if(s > min_height){ $("#div").show() }else{ $("#div").hi
jQuery 实现顶部大幅滚动下拉广告效果
前端－走在WEB页面最前端的前端交互师
12-17 2254
jQuery Code： $(document).ready(function() {     // 广告收回     var upAdBanner = function() {         $("#ad_banner").slideUp(1000);     };     // 广告下拉     $("#ad_banner").slideDown(500);     //
一行CSS实现滚动时藏在信息流后面的广告效果
qq_39871330的博客
08-07 991
1、首先看一看是什么效果？ 2、一行background-attachment:fixed搞定镂空信息流广告 这个方法理论上是最简单效果也最好的方法。 CSS中有个background-attachment属性，当我们设置属性值为fixed的时候，背景图片相对于窗体定位，不受滚动影响。 于是，我们的实现就很简单：信息流列表HTML中插入个广告&lt;a&gt;链接，然后广告图作为背景图...
android 顶部消息通知和Toast顶部弹窗消息提醒
zhaohan___的博客
09-10 9990
1.顶部通知栏的消息通知 Intent intent = new Intent(mContext, 跳转到哪个Activity.class); //点击了之后进入的一个Actity PendingIntent pendingIntent = PendingIntent.getActivity(mContext, 0, intent, PendingIntent.FLAG_ONE...
用DIV布局制作公告板
weixin_33922672的博客
03-06 190
一、图片素材： 1、公告板顶部（top.gif） 2、公告板中部（center.gif） 3、公告板底部（bottom.gif） 三张图片的宽度是一样的。 二、DIV布局制作公告板： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...
网页标准的随滚动条滚动的广告特效
chy2z的专栏
04-25 1208
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   符合网页标准的随滚动条滚动的广告特效代码webjx.comfunction scrollImg(){     var posX,posY;     if (window.innerHeight) {         posX = window.pageXOffset;     
div层滑出效果css3动画代码
ICode联盟
12-20 530
下载地址 一款使用jQuery和css3制作的滑动显示面板特效插件。当点击了滑动显示按钮，面板从左侧滑出，点击改变按钮或面板外任意位置，面板又滑动收缩回去。HTML结构 Title Goes Here Close CSS样式首先解释一下为什么要将header从panel容器中分离出来。我们为panel使用了一个CSS3 transformation（准确的说是 translateX ）来使它滑动显示。使用CSS3 transformation要比改变position的左右位置的效果要好（参考
div滑动显示隐藏div
最新发布
04-23
可以使用JavaScript来实现这个效果。首先，在html中添加两个div，一个是需要显示的div，一个是用来触发显示和隐藏的div。然后，在JavaScript中监听触发div的click事件，通过改变需要显示div的样式属性来实现显示和隐藏的效果。具体代码如下： HTML代码： ``` <div id="trigger">点击显示或隐藏div</div> <div id="target">这是需要显示和隐藏的div</div> ``` JavaScript代码： ``` var trigger = document.getElementById("trigger"); var target = document.getElementById("target"); trigger.onclick = function() { if (target.style.display === "none") { target.style.display = "block"; } else { target.style.display = "none"; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值