`
dcdc723
  • 浏览: 187379 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仿网易的新年 效果(自己用Jquery仿的)

阅读更多
<!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>


 

 

16
7
分享到:
评论
7 楼 風一樣的男子 2010-02-11  
效果挺不错的
6 楼 wucc1986 2010-02-11  
咋不弄个下载呢
5 楼 dayone 2010-02-10  
tipnet 写道
很不错的效果。你写得比网易还简单得多了。

dedemao 写道
非常不错。征用了哈。

挺喜庆的~~~
4 楼 马的脸猛鹿 2010-02-09  
怕瓦落地 写道
tipnet 写道
很不错的效果。你写得比网易还简单得多了。


3 楼 怕瓦落地 2010-02-09  
tipnet 写道
很不错的效果。你写得比网易还简单得多了。

2 楼 dedemao 2010-02-09  
非常不错。征用了哈。
1 楼 tipnet 2010-02-09  
很不错的效果。你写得比网易还简单得多了。

相关推荐

    仿网易云音乐网站.zip(纯HTML+CSS布局)

    在本项目"仿网易云音乐网站.zip"中,我们看到一个使用纯HTML和CSS构建的网页布局示例,这是Web前端开发中的基础实践。HTML(HyperText Markup Language)负责页面结构,而CSS(Cascading Style Sheets)则用于定义...

    仿淘宝商城焦点图的jQuery效果

    总的来说,仿淘宝商城焦点图的jQuery效果是通过结合DOM操作、事件处理、动画效果和数据管理等多种技术实现的,它为用户提供了一种动态且交互性强的图片展示体验。如果你想要在自己的网站上实现类似的效果,理解并...

    仿win7桌面效果的jQuery代码

    【标题】"仿win7桌面效果的jQuery代码"所涉及的知识点主要集中在使用JavaScript的库jQuery来实现一种类似于Windows 7操作系统桌面的交互效果。在Web开发中,这种仿生设计能够提供用户熟悉且直观的界面体验。以下是...

    jQuery仿抖音视频功能.rar

    jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar jQuery仿抖音视频功能.rar ...

    jQuery仿网易新闻头部导航栏代码.zip

    本资源"jQuery仿网易新闻头部导航栏代码"提供了一个实现鼠标点击菜单时下划线跟随特效的实例,适用于网页开发中的导航栏设计,提升用户体验。 首先,我们来深入理解jQuery库的核心特性。jQuery通过封装JavaScript的...

    仿百度图片放大效果(jQuery)

    【标题】:“仿百度图片放大效果(jQuery)” 在网页设计中,为了提供更好的用户体验,经常需要对图片进行一些特殊处理,例如实现图片的放大功能。"仿百度图片放大效果(jQuery)"就是一个这样的功能实现,它借鉴了...

    jquery仿盖章效果

    《jQuery实现仿盖章效果详解》 在网页设计与开发中,有时候我们需要为用户提供一种模拟实体印章的功能,比如在线签署文档或确认某些操作。这里我们将深入探讨如何利用jQuery实现一个仿盖章效果,让用户能够在页面上...

    网页设计期末作业,使用HTML、CSS、Jquery模仿网易云网页

    在模仿过程中,学生可以使用JQuery来实现网页的交互功能,如音乐播放、暂停、前进、后退,以及滚动监听、下拉菜单的展开与关闭等动态效果。 Bootstrap则是一个前端开发框架,集成了HTML、CSS和JavaScript,提供了...

    jquery仿163网易图片新闻幻灯片切换鼠标点击缩略图片文字内容和图片切换

    标题中的“jquery仿163网易图片新闻幻灯片切换鼠标点击缩略图片文字内容和图片切换”描述了一个使用jQuery库实现的交互式图片展示功能,这种功能常见于新闻网站和博客,为用户提供动态浏览多张图片的方式。...

    jquery仿mac效果插件

    在使用jQuery仿Mac效果插件时,我们首先需要理解其内部结构,以便于正确地调用和配置。 二、Mac效果的元素与交互 Mac界面以其简洁、直观的设计和流畅的动画效果著称。常见的Mac效果包括:光晕效果、反射效果、放大...

    jQuery放大镜效果仿淘宝放大效果

    5. **过渡效果与平滑动画**:为了提升用户体验,可以添加CSS3的过渡效果或使用jQuery的动画方法,使得放大镜的出现、移动和消失过程更加平滑。 6. **响应式设计**:考虑到不同设备和屏幕尺寸,放大镜效果应具备响应...

    jquery插件库大全(200个).zip

    jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery分类导航 jquery加载动画插件 jquery华丽的css3滚动 jquery商品分类选择 jquery图像剪辑 ...

    仿时钟效果表盘式JQuery时间选取插件

    本文将详细讨论一种特殊的UI组件——"仿时钟效果表盘式JQuery时间选取插件",它能够为用户提供直观且有趣的时间选择方式,极大地提升了用户在网页上设置时间的体验。 首先,我们需要理解jQuery这一库的重要性。...

    仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip

    仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿淘宝商品列表js展示效果 jquery效果 ajax效果.zip 仿...

    Jquery仿手机滑屏效果

    在本文中,我们将深入探讨如何使用jQuery实现手机滑屏效果,这一技术对于现代网页设计尤其重要,因为它可以为触屏设备提供流畅的用户体验。在电脑上也同样实用,它增加了交互性和动态感。我们将讨论核心概念、相关...

    jquery ui仿腾讯web qq界面desktop酷炫特效

    在【jQuery UI仿腾讯Web QQ界面】的设计中,开发者可能利用了jQuery UI的灵活性和强大的功能来创建与腾讯Web QQ类似的桌面风格界面。Web QQ是腾讯公司推出的一款基于网页的即时通讯服务,它的界面设计简洁、直观,...

    DIVCSS仿FLASH导航效果(jQuery)

    本文将深入探讨如何使用DIVCSS技术结合jQuery来实现仿FLASH的导航效果,从而为网站提供丰富的交互体验。 首先,让我们理解标题“DIVCSS仿FLASH导航效果(jQuery)”。在Web开发中,FLASH曾经是创建动态内容和动画的...

    jQuery实现仿Google首页拖动效果的方法

    jQuery实现仿Google首页拖动效果涉及的主要知识点包括: 1. jQuery基础: jQuery是一个快速、简洁的JavaScript库,它通过简化HTML文档遍历、事件处理、动画和Ajax交互,使Web开发变得更加方便。实现拖动效果,重点...

    jquery+html5仿制立体炫酷网页(仿网易)

    《使用HTML5与jQuery构建立体炫酷网页:仿网易邮箱页面》 在当前的Web开发领域,HTML5和jQuery已经成为创建交互式、动态网站的重要工具。本项目“jquery+html5仿制立体炫酷网页(仿网易)”充分利用了这两项技术的...

    jquery 仿制苹果系统导航菜单

    基于jquery做的网页版仿苹果系统导航菜单,效果非常流畅 华丽 不解释。。。 用法: 在页面头部标签&lt;head&gt;&lt;/head&gt;中加入下面的代码 &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; ...

Global site tag (gtag.js) - Google Analytics