程序猿也有春天:将所有思念化为代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了程序猿也有春天:将所有思念化为代码相关的知识,希望对你有一定的参考价值。

第一次喜欢一个女生,我不知道她是怎么想的,我也不想伤害她,不想打扰她的生活,所以将所有思念化为这一串串代码吧!也许我们真的只有擦肩之缘,没有携手之份吧,在这青春年华里终于明白了什么叫做放弃!自己真的不敢给她太多的承诺,因为我一直以来是个行动派,但是当某个人不给你行动的机会,我能做的只有祝福了吧!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>“萍”-“水”终相逢</title>
  <link rel="shortcut icon" href="./images/logo.ico">
  <link rel="stylesheet" href="./CSS/index.css">
  
</head>
<body>
   <!-- 用来装载顶部图片的盒子 -->
   <div class="nav">

   <!-- 用来设置顶部标签链接的盒子 -->
   <div class = "top">
        <ul>
          <li class = "frist"><a href="http://www.xzw.com/astro/aries/?appid=bds"><img src="./images/35.jpg" alt="我是白羊座"  title="我是白羊座" width="80" height="40" align="right">我是白羊座<audio src="./audio/王童语 - 丫头.mp3" controls="controls" autoplay="auto" loop="loop"></audio></a></li>
          <li><a href="">了解开发者</a></li>
          <li><a href="">我眼中的你</a></li>
          <li><a href="">余生请指教</a></li>
          <li><a href="https://www.lagou.com/jobs/list_%E4%BA%AC%E4%B8%9C%E6%B7%98%E5%AE%9D%E5%94%AF%E5%93%81%E4%BC%9A?labelWords=&fromSearch=true&suginput=">您要的招聘</a></li>
          <li><a href="">开发者故事</a></li>
          <li class ="last"><a href="">秋萍小姐,您已登陆</a></li>
        </ul>
   </div>
     
   </div>
   <table border= "1" rules="all" width="100%" >
     <tr>
       <td rowspan="12" width="700" height="500" bgcolor="#272822"><img src="./images/1.jpg" alt="" width="700" height="500" align="left"></td>
       <td>&nbsp;今日暴走事件:</td>
     </tr>
     <tr>
       <td>&nbsp;<a href="#" target="_black">1、华农华山区有个小伙子暗恋一个女生</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="#" target="_black">2、他不知道这份爱究竟能不能经受沉默的考验</a></td>
     </tr>
       <td>&nbsp;<a href="http://www.gdzsxx.com/news/dx/201611/90874.html" target="_black">3、华农学子再登“烽火”舞台</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.gx211.com/news/2016415/n3052354297.html" target="_black">4、华南农业大学新闻作品获奖</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.gdcyl.org/Article/ShowArticle.asp?ArticleID=204384" target="_black">5、 “华农之星”答辩会上展风采</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.gx211.com/news/2016429/n4937358674.html" target="_black">6、华南农业大学开展首次国家安全教育日活动 </a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.huhome.net/education/2017/0823/76940.html" target="_black">7、谁是华农读书最多的人</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.shuichan.cc/news_view-265325.html" target="_black">8、华南农业大学举行畜牧水产行业专场招聘</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.gx211.com/news/2015108/n0886301138.html" target="_black">9、新赛车E16首亮相</a></td>
     </tr>
     <tr>
       <td>&nbsp;<a href="http://www.gx211.com/news/2015108/n0886301138.html" target="_black">10、新赛车E16首亮相</a></td>
     </tr>
     <tr>
       <td align="right"><a href="http://www.cnblogs.com/jiangliang520/">MORE>></a>&nbsp;</td>
     </tr>
   </table> 
   <div id = "box3d">
     <div id = "innerbox">
       <img src="./images/5.jpg" alt="" width="133" height="200">
       <img src="./images/6.jpg" alt="" width="133" height="200">
       <img src="./images/7.jpg" alt="" width="133" height="200">
       <img src="./images/8.jpg" alt="" width="133" height="200">
       <img src="./images/9.jpg" alt="" width="133" height="200">
       <img src="./images/10.jpg" alt="" width="133" height="200">
       <img src="./images/11.jpg" alt="" width="133" height="200">
       <img src="./images/12.jpg" alt="" width="133" height="200">
       <img src="./images/13.jpg" alt="" width="133" height="200">
       <img src="./images/14.jpg" alt="" width="133" height="200">
     </div>
   </div>

   <footer><img src="./images/logo2.png" alt="" height="90"></footer>  
   <hr/>
   <div class=" bottom">
   <div class = "outbottom">
     <span>第一次这么喜欢一个女孩,半年完善的网站,不管以后怎样,你若安好,便是晴天!</span>
   </div>
     <div class = "innerbottom">
       <ul >
         <li><a href="">收藏本站</a></li>
         <li><a href="">网站地图</a></li>
         <li><a href="">招贤纳士</a></li>
         <li><a href="">管理员系统</a></li>
         <li>&copy;CopyRight 2017/10/1 —— 当你说不喜欢我的那一天</li>
       </ul>
     </div>
   </div>
   

   <script src="./js/comm.js"></script>

  

</body>
</html>

做的还只是初级的模板,因为我想花六个月去完善这个WEB,当完成的那一日,也是我给自己的最后一次机会吧!

/* 消除所有HTML的样式 */
/* 定义全局样式 */
*{
    margin:0px;
    padding:0px;
    font-weight: bold;
    font-family: 楷体;
    font-size: 16px;
}
body{
    background-color:#e6e6e6; 
}
a{
    text-decoration: none;
}
li{
    list-style-type: none;
}
a:hover{
    text-decoration: underline;
    color: #216ce7;
}
a:active{
    color:#a82b17;
}

.floatL{
    float: left;
}
.floatR{
    float: right;
}

/* 顶部栏开始 */
.nav{
    width:100%;
    height: 40px;
    background-image: url(../images/bgcolor.jpg);
    
}
.top{
    width: 1200px;
    height: 40px;
    line-height: 40px;
    margin:0px auto;

}
.top a{
        color: #84896b;
}
.top li{
    float: left;
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #b63f97;
}
.top .frist{
    margin-right: 70px;
    border-right: none;
    text-indent: -99999px;
}
.top .last{
    margin-left: 72px;
    border-right: none;
    
}
.top .last a{
    color:#146f7f;
}
/* 顶部栏结束 */
/* banner栏开始 */
table tr{
    background-color: #e6e6e6;
}

table td{
    color: #f57719;
    font-size: 20px;
    text-indent: 3em;
}
/* banner栏结束 */
/* 3D旋转图片酷炫特效开始 */
#box3d{
    width:100%;
    height: 500px;
    background-color: #272822;
    overflow: hidden;
}
#box3d img{
    position: absolute;
    -webkit-box-reflect: below 5px -webkit-linear-gradient(top , rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
}
#innerbox{
    width: 133px;
    height: 200px;
    margin:80px auto;
    transform-style: preserve-3d;
    perspective:800px;
    transform: rotateX(-12deg);
    transform: rotateY(0deg);
}

/* 3D旋转图片酷炫特效结束 */
.bottom{
    width:100%;
    height: 100px;
    background-color:#e6e6e6;
}
.innerbottom{
    width:1000px;
    height: 50px;
    line-height: 50px;
    margin:0 auto;
}
.outbottom{
    width:1000px;
    height: 50px;
    line-height: 50px;
    margin:0 auto;
}
.innerbottom li{
    display:inline-block;
    margin-left: 20px;
}
.outbottom span{
    margin-left: 20px;
    font-family: 黑体;
    color: #9c8b93;

}
footer img{
    position: relative;
    left:1030px;
    top: 100px;
}

 

这个是3d相片层,用来储存她的照片,在浏览器上会显示动态效果,下面的静态图片是看不出效果的!

还有图片轮播层,虽然做的很粗糙,但是这只是最初的模板,六月后我会发布最终的版本,我希望用六个月来为自己喜欢的人写一个网站,不在乎她能不能看见,只是想说我真的喜欢过她,也想过给她我所有的一切,让她开心,但是如果她离开我才是开心的,我也会任由她离去!

//获取图片位置过
var imgObj = document.images[1];

//开启定时器
setInterval(imgpaly1, 2000);

//定义轮播函数
var i = 2;

function imgpaly1(){
    imgObj.src = "./images/"+i+".jpg";
    i++;

    if(i>4){
        i = 1;
    }
}

var oImg = document.getElementsByTagName("img");//获取图片标签
var nowX , nowY ,lastX , lastY, minusX , minusY , roX = -12, roY = 0;//定义坐标的初始值
var oWrap  = document.getElementById("innerbox");//获取innerbox标签
var timer = null;//定时器的初始值

(function(i){

var deg = 360/10;//每一张图片需要旋转的度数

for(;i<12;i++){
    oImg[i].style.transform = "rotateY("+deg*i+"deg) translatez(350px)";

}
})(2);//定义旋转函数

document.onmousedown = function(e){
    //鼠标按下
    var e = e || window.event;
    lastX = e.clientX;
    lastY = e.clientY;

    this.onmousemove = function (){

    //鼠标移动
        var e = e || window.event;
        nowX = e.clientX;
        nowY = e.clientY;

        minusX = nowX - lastX;//坐标的差值就是旋转的角度
        minusY = nowY - lastY;

        roX -= minusY *0.2;
        roY += minusX *0.2;

        oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";

        lastX = nowX;
        lastY = nowY;

    }
    this.onmouseup = function(){

        //鼠标离开
        this.onmousemove =null;
        timer = setInterval(function(){
        minusX *=0.95;
        minusY *=0.95;

        roX -= minusY *0.2;
        roY += minusX *0.1;

        oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";

        if(Math.abs(minusX) <0.1 || Math.abs(minusY) < 0.1){
            //当角度减小到一定值的时候就清除定时器
            clearInterval(timer);
        }


        }, 1000/60)


    }
}

技术分享

 





以上是关于程序猿也有春天:将所有思念化为代码的主要内容,如果未能解决你的问题,请参考以下文章

SQLite 片段函数实现不会在 TextView 中将文本格式化为 HTML

微信小程序代码片段

屌丝也有春天!2年外包渣渣程序员离职后重新出发拿下阿里offer,你我皆是黑马!

程序猿也敢谈业务●促销活动

如何将此 Laravel PHP 代码简化为一个 Eloquent 查询?

春天安全用户详细信息