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