导语： 作为一个刚学习一个月的新手，希望可以将自己的练习分享给和我一样的小伙伴，互相借鉴，可以在实践中提高自己。将自己学习制作的案例分享给大家，并记录自己的进步，希望可以在学习之后找到心仪的工作。
一.案例制作的主要内容
网页的排版。中间照片的切换以及点击按钮时切换到对应的图片。右边的循环滚动窗口右下角层的切换窗口浮动的制作二.制作效果 三.代码如下
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>感谢帅气可爱的你看完了我的文章！么么哒 希望和我的文章对和我一样才开始学习的小伙伴有帮助！
