仿网易的新年效果（自己用Jquery仿的）

最新推荐文章于 2021-02-18 20:03:39 发布

aw3423zsddf

最新推荐文章于 2021-02-18 20:03:39 发布

阅读量129

点赞数

分类专栏： jquery 相关文章标签： jQuery CSS JavaScript Cache HTML ViewUI

本文链接：https://blog.csdn.net/aw3423zsddf/article/details/83555844

版权

jquery 相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<TITLE>网易新年效果</TITLE>
<STYLE type=text/css>
BODY {
 TEXT-ALIGN: center; FONT-FAMILY: 宋体,Arial Narrow,arial,serif; BACKGROUND: #ffffff; FONT-SIZE: 12px
}
BODY {
 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.ntes_wrapper {
 BACKGROUND: url(http://img1.cache.netease.com/cnews/img09/2010cj/ntesbg5.jpg) no-repeat center top; HEIGHT: 180px
}
.ntes_wrapper .main {
 Z-INDEX: 1; POSITION: relative; MARGIN: 0px auto; WIDTH: 960px; HEIGHT: 62px
}
.ntes_wrapper .pic {
 POSITION: absolute; WIDTH: 120px; BACKGROUND: url(http://img1.cache.netease.com/cnews/img09/2010cj/pic1.jpg) no-repeat left top; HEIGHT: 10px; TOP: 62px; LEFT: 0px
}
.ntes_wrapper_link {
 POSITION: absolute; TEXT-INDENT: -1000px; WIDTH: 299px; HEIGHT: 45px; OVERFLOW: hidden; TOP: 4px; LEFT: 335px
}
.ntes_wrapper_close {
 POSITION: absolute; TEXT-INDENT: -1000px; WIDTH: 50px; DISPLAY: block; HEIGHT: 21px; OVERFLOW: hidden; TOP: 35px; CURSOR: pointer; RIGHT: 10px
}
.wrapper {
 MARGIN: -118px auto 0px; WIDTH: 960px; BACKGROUND: #fff
}
</STYLE>

<SCRIPT language=javascript type=text/javascript charset=gb2312 
src="jquery.js"></SCRIPT>
<script>
$(function(){//以下为关闭的点击事件，主要用于移除body的背景与顶部的背景图片并使原有内容正常显示。
     $('#ntesWrapperClose').click(function(){
             $('#warpperBody').css({background: "#fff" }); 
             $('#ntesWrapper').css({display:"none"});
             $('#wrapper').css({"margin-top":"0px"});
             });
     })
</script>
<META name=GENERATOR content="MSHTML 8.00.7600.16419"></HEAD>
<BODY 
style="BACKGROUND: url(http://img1.cache.netease.com/cnews/img09/2010cj/bodybgrepeat.jpg) #f8801f repeat-x left 29px" 
id=warpperBody>

<DIV id=ntesWrapper class=ntes_wrapper>
<DIV class=main>
<SPAN class=pic></SPAN>
<SPAN id=ntesWrapperClose class=ntes_wrapper_close>关闭</SPAN>
</DIV>
</DIV>
  
  
  <font color=blue>
<DIV id=wrapper class=wrapper><!-- ntes nav -->


测试信息


</DIV>
</font>
</BODY></HTML>

aw3423zsddf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿网易的新年效果（自己用Jquery仿的）

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"&gt;&lt;HTML xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;HEAD&gt;&amp
复制链接

扫一扫