网页制作练习（JS制作浮动窗口和循环滑动窗口）

导语：
作为一个刚学习一个月的新手，希望可以将自己的练习分享给和我一样的小伙伴，互相借鉴，可以在实践中提高自己。将自己学习制作的案例分享给大家，并记录自己的进步，希望可以在学习之后找到心仪的工作。

一.案例制作的主要内容

1. 网页的排版。
2. 中间照片的切换以及点击按钮时切换到对应的图片。
3. 右边的循环滚动窗口
4. 右下角层的切换
5. 窗口浮动的制作

二.制作效果
三.代码如下

CSS内部样式表

			/*上面标题图片的样式*/.fddiv{position: fixed;top: 0px;left: 200px;z-index: 99;}/*下方主体嵌入在一个div中*/.div1{text-align: center;margin: 0px auto;width: 1024px;}/*右上角超链接添加在一个div中设置定位*/.div2{position: absolute;right: 285px;top: 18px;font-size: 15px;}.btn{border-radius: 3px;border: 1px solid cornflowerblue;background-color: #6495ED;}/*背景上的首页等超链接在div中的定位*/#cljdiv{position: absolute;top: 105px;left: 270px;width: 670px;}/*加入一个移入事件，增加美观*/.td{background: '';height: 30px;}.td:hover{background: url(img/images/guimei_nav_bg.gif);background-size: 100%;}.imgzt{margin-top: 0px auto;position: relative;top: -20px;}/*中间滚动图片的div样式*/.gdimg{position: absolute;top: 150px;left: 480px;}.cljimg{position: absolute;top: 300px;left: 700px;}/*底部疯狂抢购的div样式*/.dbimg{position: absolute;top: 380px;left: 486px;width: 520px;height: 400px;}#table1{text-align: center;font-size: 10px;height: 100%;}/*家用电器div样式*/.jydqdiv{position: absolute;top: 180px;left: 270px;width: 200px;}.jydqdiv1{position: absolute;top: 325px;left: 270px;width: 200px;}.jydqdiv2{position: absolute;top: 470px;left: 270px;width: 200px;}.jydqdiv3{position: absolute;top: 615px;left: 270px;width: 200px;}.table2{font-size: 14px;width: 100%;text-align: left;}/*最底部的额外链接的div*/#dbdiv{position: relative;top: -20px;width: 1024px;font-size: 10px;letter-spacing: 2px;line-height: 20px;}a{text-decoration: none;}.btn1{border: #6495ED 1px solid;background-color: aquamarine;width: 15px;height: 20px;text-align: center;font-size: 15px;padding: 0px;}/*右边滚动条div的样式*/.gddiv{position: absolute;left: 1020px;top: 316px;width: 226px;height: 258px;overflow: hidden;}.gddiv1{position: relative;top: 0px;height: 516px;width: 100%;}/*显示时间div的样式*/#sj{position: absolute;top: 70px;left: 750px;}/*右下角换层功能的div样式*/#bjbdiv{position: absolute;left: 1017px;top: 584px;z-index: 50;}

body主体部分
`

	<!--右下角笔记本的换层功能，这里利用实参来传入切换载入的图片--><div id="bjbdiv"><img src="img/images/guimei_left1.jpg" onmouseover="huanceng(1)" id="hc1"/><img src="img/images/guimei_right1.jpg" onmouseover="huanceng(2)" id="hc2" /><br /><img src="img/images/guimei_end1.jpg" id="hc3"/></div><!--时间div--><div id="sj"><span>你好！欢迎访问贵美商城</span> <span id="sjxr"></span></div><div class="fddiv"><img src="img/images/guimei_float.jpg" /></div><div class="div1"><!--网页标头--><img src="img/images/guimei_h_bg.jpg" /><div class="div2"><img src="img/images/guimei_copy_02.gif" width="20px" height="15px" /> <a href="">购物车</a> <img src="img/images/guimei_copy_02.gif" width="20px" height="15px" /> <a href="">帮助中心</a> <img src="img/images/guimei_copy_02.gif" width="20px" height="15px" /> <a href="">加入收藏</a> <img src="img/images/guimei_copy_02.gif" width="20px" height="15px" /> <a href="">设为首页</a><button class="btn">登陆</button> <button class="btn">注册</button></div><!--主题背景照片--><img src="img/images/guimei_bg.gif" class="imgzt" /><div id="cljdiv"><table width="100%" style="text-align: center; font-weight: 600;"><tr><td class="td" width="50px"><a href="">首页</a></td><td class="td" width="50px"><a href="">家用电器</a></td><td class="td" width="50px"><a href="">手机数码</a></td><td class="td" width="50px"><a href="">日用百货</a></td><td class="td" width="50px"><a href="">书籍</a></td><td class="td" width="50px"><a href="">帮助中心</a></td><td class="td" width="50px"><a href="">免费开店</a></td><td class="td" width="50px"><a href="">全球资讯</a></td></tr></table></div><!--中间的照片--><div class="gdimg"><img src="img/images/1.jpg" id="img1" /></div><!--超链接图片--><div class="cljimg"><button class="btn1" onclick="demo(1)">1</button><button class="btn1" onclick="demo(2)">2</button><button class="btn1" onclick="demo(3)">3</button><button class="btn1" onclick="demo(4)">4</button></div><!--底部疯狂抢购--><div class="dbimg"><table id="table1" width="100%"><tr><td><img src="img/images/guimei_shopping_01.jpg" class="img1" /></td><td><img src="img/images/guimei_shopping_02.jpg" class="img1" /></td><td><img src="img/images/guimei_shopping_03.jpg" class="img1" /></td></tr><tr><td>惠普商务移动应用笔记本</td><td>夏新N6 GPS真人语音导航手机 超低价疯抢 数量有限</td><td>三星家庭影院HT-TZ325 购机送好礼（超值性价比）</td></tr><tr><td><img src="img/images/guimei_shopping_04.jpg" class="img1" /></td><td><img src="img/images/guimei_shopping_05.jpg" class="img1" /></td><td><img src="img/images/guimei_shopping_06.jpg" class="img1" /></td></tr><tr><td>明基MP512投影机 2899元 送100元京卷 SVGA 2200流明</td><td>罗技数据1TB移动鼠标729开抢了</td><td>海森那儿尔极品耳机绝对不容错过</td></tr><tr><td><img src="img/images/guimei_shopping_07.jpg" class="img1" /></td><td><img src="img/images/guimei_shopping_08.jpg" class="img1" /></td><td><img src="img/images/guimei_shopping_09.jpg" class="img1" /></td></tr><tr><td>亚马逊随时阅读，随时记录，时尚最佳选择</td><td>优雅相框</td><td>IBM 2009最新上网本，特色尽显</td></tr></table></div><!--家用电器div--><div class="jydqdiv"><table class="table2"><tr style="line-height: 30px;"><th colspan="3">家用电器</th></tr><tr><td>大家电</td><td>洗衣机</td><td>平板电脑</td></tr><tr><td>电热水器</td><td>家庭音响</td><td>热水器</td></tr><tr><td>空调冰箱</td><td>冷柜</td><td>DVD</td></tr><tr><td>电视附件</td><td>电燃气</td><td>家电下乡</td></tr><tr><td>家电服务</td><td>电饭煲</td><td>摄像机</td></tr></table></div><div class="jydqdiv1"><table class="table2"><tr style="line-height: 30px;"><th colspan="3">家用电器</th></tr><tr><td>大家电</td><td>洗衣机</td><td>平板电脑</td></tr><tr><td>电热水器</td><td>家庭音响</td><td>热水器</td></tr><tr><td>空调冰箱</td><td>冷柜</td><td>DVD</td></tr><tr><td>电视附件</td><td>电燃气</td><td>家电下乡</td></tr><tr><td>家电服务</td><td>电饭煲</td><td>摄像机</td></tr></table></div><div class="jydqdiv2"><table class="table2"><tr style="line-height: 30px;"><th colspan="3">家用电器</th></tr><tr><td>大家电</td><td>洗衣机</td><td>平板电脑</td></tr><tr><td>电热水器</td><td>家庭音响</td><td>热水器</td></tr><tr><td>空调冰箱</td><td>冷柜</td><td>DVD</td></tr><tr><td>电视附件</td><td>电燃气</td><td>家电下乡</td></tr><tr><td>家电服务</td><td>电饭煲</td><td>摄像机</td></tr></table></div><div class="jydqdiv3"><table class="table2"><tr style="line-height: 30px;"><th colspan="3">家用电器</th></tr><tr><td>大家电</td><td>洗衣机</td><td>平板电脑</td></tr><tr><td>电热水器</td><td>家庭音响</td><td>热水器</td></tr><tr><td>空调冰箱</td><td>冷柜</td><td>DVD</td></tr><tr><td>电视附件</td><td>电燃气</td><td>家电下乡</td></tr><tr><td>家电服务</td><td>电饭煲</td><td>摄像机</td></tr></table></div><div id="dbdiv">友情链接：百度|Google|雅虎|淘宝|拍拍|易趣|当当|京东商城|迅雷|新浪|网易|搜狐|天猫网|凤凰网<hr width="100%" />COPYRIGHT 2003-2010 北京市贵美商城有限公司 ALL RIGHT RESERVED<br />热线:400-66-13060 Email:service@prd.com<br />ICP:沪ICP备05021104号<br /><img src="img/images/guimei_copy_01.gif" /><img src="img/images/guimei_copy_02.gif" /><img src="img/images/guimei_copy_03.gif" /><img src="img/images/guimei_copy_04.gif" /></div><!--滚动条div--><div class="gddiv" onmouseover="gundongdiv1()" onmouseout="gundongdiv2()"><div class="gddiv1"><table height="100%" width="100%"><tr><td class="td1"><img src="img/images/guimei_scroll_01.jpg"/></td><td class="td2">大牌狂降价，三折直送</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_02.jpg"/></td><td>大学老师开网店</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_03.jpg"/></td><td>黑眼圈推荐，美白不停</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_04.jpg"/></td><td>这是一个神奇的电脑</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_01.jpg"/></td><td>大牌狂降价，三折直送</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_02.jpg"/></td><td>大学老师开网店</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_03.jpg"/></td><td>黑眼圈推荐，美白不停</td></tr><tr><td class="td1"><img src="img/images/guimei_scroll_04.jpg"/></td><td>这是一个神奇的电脑</td></tr></table></div></div></div>`

JS部分

		//浮动图标函数/*主要思路是将相对于窗口斜着滑动的小窗口分解成沿着x轴，y轴的往复运动，这样我们只要分别写出小窗口在x轴，y轴的运动然后将他们组合起来就可以实现斜着的运动*/var fudiv1=document.querySelector(".fddiv");function fuDiv1(){var c=1;var d=1;var t=setInterval(function(){var one=parseInt(getComputedStyle(fudiv1,null)["left"]);var two=parseInt(getComputedStyle(fudiv1,null)["top"]);if(one==0&&c<0){c=-c;}if(one==1430&&c>0){c=-c;}one=one+c;fudiv1.style["left"]=one+"px";if(two==0&&d<0){d=-d;}if(two==700&&d>0){d=-d;}two=two+d;fudiv1.style["top"]=two+"px";},10);}fuDiv1();//切换图片函数/*利用数组，循环载入图片，在鼠标点击时则载入相应的图片*/var t1;var img1=document.getElementById("img1");function qhimg(){var imgs=["img/images/1.jpg","img/images/2.jpg","img/images/3.jpg","img/images/4.jpg"];var a=0;t1=setInterval(function(){a++;img1.src=imgs[a];if(a==3){a=0;}},1500);}qhimg();function demo(a){clearInterval(t1);img1.src="img/images/"+a+".jpg";var t2=setTimeout(function(){qhimg();},500);}//右侧滚动div/*右侧的循环滚动主要是利用两个相同的主体衔接，然后利用JS滚动，当达到最大值时则重新滚动，类似于一个盒子模型，将超出的部分隐藏掉，从而在我们看来他是循环的滚动*/var t3;function gundongdiv(){var gddiv1=document.querySelector(".gddiv1");t3=setInterval(function(){var one=parseInt(getComputedStyle(gddiv1,null)["top"]);one--;if(one == -258){one=0;}gddiv1.style["top"]=one+"px";},30);}gundongdiv();function gundongdiv1(){clearInterval(t3);}function gundongdiv2(){gundongdiv();}//时间function shijian(){var shijian=new Date();var year=shijian.getYear()+1900;var month=shijian.getMonth()+1;var day=shijian.getDate();var hours=shijian.getHours();var minutes=shijian.getMinutes();var seconds=shijian.getSeconds();var sj=year+"年"+month+"月"+day+"日"+" "+hours+":"+minutes+":"+seconds;document.getElementById("sjxr").innerHTML=sj;var t4=setTimeout("shijian()",1000);}shijian();//换层图片功能var hc1=document.getElementById("hc1");var hc2=document.getElementById("hc2");var hc3=document.getElementById("hc3");function huanceng(a){hc1.src="img/images/guimei_left"+a+".jpg";hc2.src="img/images/guimei_right"+a+".jpg";hc3.src="img/images/guimei_end"+a+".jpg";}</script>

感谢帅气可爱的你看完了我的文章！么么哒
希望和我的文章对和我一样才开始学习的小伙伴有帮助！