一个简单的基于javascript的个人网页_js个人网页资源-CSDN文库

共52个文件

jpg：37个

gif：4个

png：3个

html

网页

javascript

需积分: 50 159 浏览量 2013-03-22 09:36:15 上传评论 2 收藏 13.08MB ZIP 举报

在构建一个简单的基于JavaScript的个人网页时，HTML、CSS和JavaScript是主要的技术栈。这个网页设计包含几个关键功能，如div层的切换、网页播放器和过滤镜效果，这些都是JavaScript在网页交互方面的重要应用。 HTML（HyperText Markup Language）是网页的基础结构语言，用于定义网页内容和布局。在这个个人网页中，`<div>`元素被广泛使用，它是块级元素，可以用来组织页面结构，便于管理和样式化。`<div>`层的切换通常通过JavaScript实现动态显示和隐藏，这增强了用户体验，使用户能够根据需要查看或隐藏特定内容。 JavaScript（JS）是一种客户端脚本语言，它使得网页具有交互性。在这个项目中，JavaScript被用来控制`<div>`元素的显示状态。例如，可以创建一个函数，当用户点击某个按钮时，调用这个函数来切换`div`的`display`属性，从而实现内容的切换效果。此外，JavaScript还可以处理用户的输入事件，如鼠标点击或键盘输入，以实时响应用户操作。接着，网页播放器功能可能利用了HTML5的`<audio>`标签，它可以嵌入音频文件到网页中。JavaScript可以控制音频播放、暂停、音量调整等行为。例如，可以创建一个JavaScript对象与`<audio>`元素关联，并通过该对象的API来操作播放器，如`play()`, `pause()`, `currentTime`等。过滤镜效果通常指的是图像的视觉处理，这通常通过CSS滤镜或JavaScript实现。CSS滤镜（如`filter`属性）可以应用各种效果，如模糊、灰度、饱和度调整等。而在JavaScript中，可以使用Canvas API对图像进行像素级操作，实现更复杂的过滤效果。例如，可以使用`createImageBitmap`加载图片，然后在Canvas上应用各种滤镜算法，最后将Canvas的内容显示回网页。这个基于JavaScript的个人网页项目展示了Web开发的基本要素和互动特性。通过熟练运用HTML、CSS和JavaScript，开发者能够创建一个功能丰富的个人网页，包括内容切换、多媒体播放以及视觉特效，为用户提供丰富的交互体验。这样的项目对于初学者来说是一个很好的实践，有助于提升Web开发技能，同时也能为专业开发者提供一个快速构建简单网页的模板。

资源推荐

资源详情

资源评论

收起资源包目录

竞赛.zip （52个子文件）

竞赛

images

892845_33693225.jpg 52KB

593db8c7481388e28226acaf.bmp 2.93MB

arrow-left.gif 897B

templatemo_content_bg_wrapper.jpg 77KB

B0233922507.jpg 319KB

a826cf4d6b1df3da500ffeff.bmp 2.93MB

templatemo_header_bg_wrapper.jpg 22KB

d99de99b560bff766f22ebc7.jpg 186KB

37984c63f6246b601b7105adebf81a4c500fa279.jpg 166KB

ec3e885062f42f2c853524ef.jpg 136KB

27105013.jpg 105KB

daisy_2560x1600_by_tezdesign.jpg 61KB

2010052414162660356.jpg 263KB

close.jpg 9KB

templatemo_menu_button.png 1KB

CA023_L.jpg 29KB

8ef2dcdb152862dc4c6dafced6b286af.jpg 117KB

576421fca170158fb48f3188.jpg 409KB

logo_new.gif 8KB

2009991131312.jpg 84KB

2010091800111855409_water.jpg 346KB

leftad.jpg 59KB

311386c0bc3e7f8538db49d1.jpg 280KB

arrow-right.gif 100B

twitter_icon.png 5KB

11b3550e0cf3d7ca6b8988aff21fbe096a63a979.jpg 127KB

lwatggakouyq.jpg 203KB

templatemo_footer_bg_wrapper.jpg 25KB

2315450-4846.jpg 83KB

Jiker201225164641584.jpg 25KB

106920fb964bbe34242df25c.jpg 101KB

2ef219d1afec089d572c84ef.jpg 146KB

0e0583c27d1ed21bacd3993cad6eddc450da3f66.jpg 101KB

908fa0ec08fa513d505ce2673d6d55fbb3fbd991.jpg 208KB

rightad.jpg 54KB

1546435457-9.jpg 299KB

2011628161451701.jpg 358KB

2010081706381317068_water.jpg 480KB

ajax-loader.gif 11KB

CB233921165.jpg 174KB

1-120F6141213.jpg 335KB

ibxfel00098740.jpg 175KB

advpic.jpg 34KB

templatemo_menu_button_hover.png 3KB

2011125114592131455203.jpg 239KB

1-120609142529.jpg 366KB

竞赛.html 8KB

竞赛.css 3KB

Love Is Blue.mp3 3.54MB

竞赛.js 1KB

<!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> <link href="竞赛.css" rel="stylesheet" type="text/css" /> <script src="竞赛.js"></script> </head> <body style="overflow-x:hidden;"> <div id="content"> <div id="top"> <ul class="logo"><img src="images/logo_new.gif" /></ul> <div id="adv"><img src="images/rightad.jpg"/></div> <div id="close" onclick="closeAdv()"><img src="images/close.jpg" /></div> <div id="media"><object id="player" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param NAME="AutoStart" VALUE="-1">  <param NAME="Balance" VALUE="0">  <param name="enabled" value="-1">  <param NAME="EnableContextMenu" VALUE="-1">  <param NAME="url" value="Love Is Blue.mp3">  <param NAME="PlayCount" VALUE="1">  <param name="rate" value="1">  <param name="currentPosition" value="0">  <param name="currentMarker" value="0">  <param name="defaultFrame" value="">  <param name="invokeURLs" value="0">  <param name="baseURL" value="">  <param name="stretchToFit" value="0">  <param name="volume" value="50">  <param name="mute" value="0">  <param name="uiMode" value="mini">  <param name="windowlessVideo" value="0">  <param name="fullScreen" value="0">  <param name="enableErrorDialogs" value="-1">  <param name="SAMIStyle" value>  <param name="SAMILang" value>  <param name="SAMIFilename" value>  </object> </div> <ul class="menu"> <li><a href="#">登陆</a></li> <li><a href="login.html">注册</a></li> </ul> </div> <div id="middle"> <div id="left"> <ul> <li><a href="#" onmouseover="change(0)">我的主页</a></li> <li><a href="#" onmouseover="change(1)">我的收藏</a></li> <li><a href="#" onmouseover="change(2)">我的分享</a></li> </ul> </div> <div id="right0"> <div id="dl"> <dl class="img1"> <dt><img src="images/0e0583c27d1ed21bacd3993cad6eddc450da3f66.jpg" id="img0" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);"/></dt> <dd><a href="#">那曾经美丽的瞬间</a><dd> </dl> <dl class="img2"> <dt><img src="images/1-120F6141213.jpg" id="img1" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);"/></dt> <dd><a href="#">俏，它的样子多可爱</a></dd> </dl> </div> <div id="dl"> <dl class="img1"> <dt><img src="images/1-120609142529.jpg" id="img2" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);"/></dt> <dd><a href="#">如此美丽的建筑，我记下来了</a></dd> </dl> <dl class="img2"> <dt><img src="images/2ef219d1afec089d572c84ef.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);"/></dt> <dd><a href="#">它在找什么</a></dd> </dl> </div> <div id="dl"> <dl class="img1"> <dt><img src="images/8ef2dcdb152862dc4c6dafced6b286af.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);"/></dt> <dd><a href="#">感觉赋有意义，就拍了下来</a></dd> </dl> <dl class="img2"> <dt><img src="images/11b3550e0cf3d7ca6b8988aff21fbe096a63a979.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);"/></dt> <dd><a href="#">它们在对着太阳笑呢！</a></dd> </dl> </div> </div> <div id="right1" style="display:none;"> <div id="dl"> <dl class="img1"> <dt><img src="images/908fa0ec08fa513d505ce2673d6d55fbb3fbd991.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">瞧，它多悠闲。。。。</a><dd> </dl> <dl class="img2"> <dt><img src="images/37984c63f6246b601b7105adebf81a4c500fa279.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">美丽的花海。。大家都喜欢！！</a></dd> </dl> </div>d <div id="dl"> <dl class="img1"> <dt><img src="images/106920fb964bbe34242df25c.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">看，它站的多稳当。。</a></dd> </dl> <dl class="img2"> <dt><img src="images/576421fca170158fb48f3188.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">你想到了什么？？？</a></dd> </dl> </div> <div id="dl"> <dl class="img1"> <dt><img src="images/311386c0bc3e7f8538db49d1.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">好美丽的建筑！！</a></dd> </dl> <dl class="img2"> <dt><img src="images/1546435457-9.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">灯光灿烂的城市啊！</a></dd> </dl> </div> </div> <div id="right2" style="display:none;"> <div id="dl"> <dl class="img1"> <dt><img src="images/CB233921165.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">那曾经美丽的瞬间</a><dd> </dl> <dl class="img2"> <dt><img src="images/ec3e885062f42f2c853524ef.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">好漂亮的花儿。。</a></dd> </dl> </div>d <div id="dl"> <dl class="img1"> <dt><img src="images/27105013.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">在想啥呢？？</a></dd> </dl> <dl class="img2"> <dt><img src="images/2010052414162660356.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">一群，难道在看电视吗？</a></dd> </dl> </div> <div id="dl"> <dl class="img1"> <dt><img src="images/2009991131312.jpg"onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">感觉赋有意义，就拍了下来</a></dd> </dl> <dl class="img2"> <dt><img src="images/892845_33693225.jpg" onMouseOut="hiddenPic();" onMouseMove="showPic(this.src);" /></dt> <dd><a href="#">它们在对着太阳笑呢！</a></dd> </dl>

评论收藏

内容反馈