最近在为本司EzRobotics写web前端一系列代码。
首先写的是一个一页式的动态网页 美工姐姐已经画好图的整体框架 大概就是按着图来 但是由于是初次写 加上是本司唯一的小前端*@#&*（@&（￥……还是有一系列问题 并为了向学校交差一并记录在博客。 希望能和一样的小白一起学习交流（当然要是有大神愿意指点，请速速联系我，我的qq是………………）
话不多说贴上原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- EZ Robotics - http://ezrobotics.cc -->
<meta charset="utf-8">
<link rel="shortcut icon" href="images/logo3.ico" type="image/x-icon" />
<title>EZ Robotics | Make Robots Easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="low-cost industrial robot for education and research">
<meta name="keywords" content="ezrobotics, robot kit, arduino, robot, robotics, industrial robot, educational robot, service robot, personal robot,">
<meta name="author" content="EZRobotics">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<style>
.content{
margin: 100 auto;
position:relative;
width:430px;
height:430px;
border-radius:310px;
border:10px solid #fff;
overflow:hidden;
z-index:4;
}
</style>
</head>
<body style="position:relative;z-index:0;">
<div style="position:absolute;width:1024;height:968;z-index:1;top:100;left:20;">
<img src="images/bannn.jpg" class="img-responsive" alt="Responsive image" border="0" />
</div>
<div style="position:absolute;pointer-events:none;z-index:2;width:1024;height:968;top:100;left:20;opacity:0; ">
<img src="images/bann.jpg" class="img-responsive" alt="Responsive image" usemap="#planetmap" border="0" />
<map name="planetmap" id="planetmap">
<!--facebook-->
<area name="facebook" href="https://www.facebook.com/ezrobotics.cc" shape="circle" coords="539,489,30" target="_blank" title="find us in facebook!" />
<!--wechat-->
<area name="wechat" href="#" shape="circle" coords="606,489,30" target="_blank" title="contact us through wechat!" />
<!--twitter-->
<area name="twitter" href="https://twitter.com/SZEZROBOTICS" shape="circle" coords="673,489,30" target="_blank" title="twitter" />
<!--weibo-->
<area name="weibo" href="http://weibo.com/u/5359711904?nick=EZRobotics" shape="circle" coords="740,489,30" target="_blank" title="find us in weibo!" />
<!--email-->
<area name="email" href="#" shape="circle" coords="807,489,30" target="_blank" title="contact us by email!" />
</map>
</div>
<div id="container" style="position:fixed;width:1024;margin-top:56;z-index:3;top:100;left:20;opacity:100;width:1024;\u0012">
<script type="text/javascript" src='js/sketch.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="content" class="center-block">
</div>
</body>
</html>
首先写的是一个一页式的动态网页 美工姐姐已经画好图的整体框架 大概就是按着图来 但是由于是初次写 加上是本司唯一的小前端*@#&*（@&（￥……还是有一系列问题 并为了向学校交差一并记录在博客。 希望能和一样的小白一起学习交流（当然要是有大神愿意指点，请速速联系我，我的qq是………………）
话不多说贴上原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- EZ Robotics - http://ezrobotics.cc -->
<meta charset="utf-8">
<link rel="shortcut icon" href="images/logo3.ico" type="image/x-icon" />
<title>EZ Robotics | Make Robots Easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="low-cost industrial robot for education and research">
<meta name="keywords" content="ezrobotics, robot kit, arduino, robot, robotics, industrial robot, educational robot, service robot, personal robot,">
<meta name="author" content="EZRobotics">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<style>
.content{
margin: 100 auto;
position:relative;
width:430px;
height:430px;
border-radius:310px;
border:10px solid #fff;
overflow:hidden;
z-index:4;
}
</style>
</head>
<body style="position:relative;z-index:0;">
<div style="position:absolute;width:1024;height:968;z-index:1;top:100;left:20;">
<img src="images/bannn.jpg" class="img-responsive" alt="Responsive image" border="0" />
</div>
<div style="position:absolute;pointer-events:none;z-index:2;width:1024;height:968;top:100;left:20;opacity:0; ">
<img src="images/bann.jpg" class="img-responsive" alt="Responsive image" usemap="#planetmap" border="0" />
<map name="planetmap" id="planetmap">
<!--facebook-->
<area name="facebook" href="https://www.facebook.com/ezrobotics.cc" shape="circle" coords="539,489,30" target="_blank" title="find us in facebook!" />
<!--wechat-->
<area name="wechat" href="#" shape="circle" coords="606,489,30" target="_blank" title="contact us through wechat!" />
<!--twitter-->
<area name="twitter" href="https://twitter.com/SZEZROBOTICS" shape="circle" coords="673,489,30" target="_blank" title="twitter" />
<!--weibo-->
<area name="weibo" href="http://weibo.com/u/5359711904?nick=EZRobotics" shape="circle" coords="740,489,30" target="_blank" title="find us in weibo!" />
<!--email-->
<area name="email" href="#" shape="circle" coords="807,489,30" target="_blank" title="contact us by email!" />
</map>
</div>
<div id="container" style="position:fixed;width:1024;margin-top:56;z-index:3;top:100;left:20;opacity:100;width:1024;\u0012">
<script type="text/javascript" src='js/sketch.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="content" class="center-block">
</div>
</body>
</html>
注：运行效果因网站代码的加工处理，不能直接在此完整体现，请将代码拷贝至浏览器中运行。
效果如图……额………………（网上拔下来的动态泡沫js代码，我只是改了个颜色，没有什么技术难度……）
预期效果：第三层js泡泡在碰到第二层闪烁白边时消失，也就是泡沫不影响内层，白边依旧闪烁、图里的Facebook等图标依旧可以点击。
此为已经修改n次版 非计算机专业科班出身 用了一些百度到的奇技淫巧（比如第一层body放背景、第二层放了个一模一样大的透明层设背景……）效果自然是慢到惨不忍睹= =
需待解决的问题有：
①content类的圆圈 想设置为炫酷的闪烁金边（需要js鼠标移动事件配合） 白色圆圈无法定位（margin、padding在firebug中都是显示无效？why？）、content圈无法跟随响应式布局
②JavaScript层深度定位最高 于是第二层的bann中的热点区域完全无法点击 想办法解决
③最好不要这层透明层 想办法弄出个圈图层 既可以解决需要闪烁白边的问题，也可以在能够点击Facebook等图标。不然太大了响应非常慢
④点击WeChat图标跳出带有公司微信二维码的浮动框…………可我不会js…………Email也是，跳出可以复制的Email地址提示框
⑤缩放图片时，出现如图所示的丑陋白底，应该是响应式布局的问题，想办法解决。
⑥贝爷说Facebook这些图标最好不要从图上扣热点（那要你前端还有何用），最好是从bootstrap的库里加，自己画，而后白框和定位用css来实现。这样的点图标去链接，鼠标放上图标反色的效果网上有很多，扒了网上的代码都用了svg标签，问了前端的前辈，说“svg就个xml嘛”额……两个都是三下两下看不太明白的概念，还是慢慢来吧。还说“用css特效，还能开启显卡加速”、“想控制颜色，上https://icomoon.io/，把svg转成css icon，用过css去驱动图标颜色。”（这句大概听懂了）
小白可能要用到的链接：
css 设置全屏背景图片 http://www.jb51.net/css/24734.html
bt组件 http://v3.bootcss.com/components/
版权声明：本文为博主原创文章，未经博主允许不得转载。
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
