文档章节

test

2685160125
 2685160125
发布于 2015/11/11 10:41
字数 1770
阅读 10
收藏 0
<!doctype html><html><head><title>酷炫</title><meta http-equiv="Content-Type" content="text/heml;charset=utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><link rel="stylesheet" type="text/css" href="http://fortawesome.github.com/Font-Awesome"/><script src="http://code.jquery.com/jquery-1.4.1.min.js"></script><style>
      body{padding:0px;margin:0px;}.container{width:1365px;height:619px;overflow:hidden;position:relative;}#item{position:relative;top:0px;}#small{position:absolute;z-index:10;top:200px;right:10px;}#small li{list-style:none;width:16px;height:16px;border:4px solid #e0e0e0;border-radius:16px;background-color:rgb(243, 243, 243);margin-top:5px;cursor:pointer;}#small li:hover{background-color:rgb(180, 153, 195)}#item1{width:1365px;height:619px;background-color:rgb(106, 53, 137);position:relative;overflow:hidden;}#item1 .downblock{width:500px;height:350px;position:absolute;bottom:0px;right:50px;}#item1 .vline{position:absolute;left:700px;top:0px;width:3px;height:111px;background-color:rgb(239, 222, 1);}#item1 .star{width:78px;height:74px;position:absolute;left:665px;top:80px;animation: 5s linear 0s normal none infinite star;-moz-animation:5s linear 0s normal none infinite star;-ms-animation:5s linear 0s normal none infinite star;-webkit-animation:5s linear 0s normal none infinite star; -o-animation:5s linear 0s normal none infinite star;}#item1 .star:hover{animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused;-ms-animation-play-state:paused;}@keyframes star{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} 
@-webkit-keyframes star{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}} 
@-moz-keyframes star{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}} 
@-o-keyframes star{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}} 
@-ms-keyframes star{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}} 
#item1 .phone1{width:267px;height:561px;position:absolute;left:67px;top:100px;animation:phone1 3s;-moz-animation:phone1 3s;-webkit-animation:phone1 3s;-ms-animation:phone1 3s;-o-animation:phone1 3s;}#item1 .phone2{width:240px;height:506px;position:absolute;left:254px;top:165px;animation:phone2 3s;-moz-animation:phone2 3s;-webkit-animation:phone2 3s;-ms-animation:phone2 3s;-o-animation:phone2 3s;}@keyframes phone1{from {top:385px;}to {top: 100px;}}@-moz-keyframes phone1{from {top:385px;}to {top: 100px;}}@-o-keyframes phone1{from {top:385px;}to {top: 100px;}}@-webkit-keyframes phone1{from {top:385px;}to {top: 100px;}}@-ms-keyframes phone1{from {top:385px;}to {top: 100px;}}@keyframes phone2{from {top:450px;}to {top: 160px;}}@-moz-keyframes phone2{from {top:450px;}to {top: 160px;}}@-o-keyframes phone2{from {top:450px;}to {top: 160px;}}@-webkit-keyframes phone2{from {top:450px;}to {top: 160px;}}@-ms-keyframes phone2{from {top:450px;}to {top: 160px;}}#item2{width:1365px;height:619px;position:relative;}#item2 .star-moon{position:absolute;width:238px;height:99px;left:326px;top:124px;}#item2 .help{position:absolute;width:238px;height:198px;left:326px;top:224px;}#item2 .popcontent4{position:absolute;width:178px;height:118px;left:498px;top:224px;}#item2 .pop1{position:absolute;width:178px;height:119px;left:498px;top:224px;}#item2 .popcontent1{position:absolute;width:148px;height:99px;left:142px;top:422px;}#item2 .pop2{position:absolute;width:148px;height:99px;left:142px;top:422px;}#item2 .popcontent2{position:absolute;width:148px;height:99px;left:361px;top:436px;}#item2 .pop3{position:absolute;width:148px;height:99px;left:361px;top:436px;}#item2 .popcontent3{position:absolute;width:148px;height:99px;left:623px;top:410px;}#item2 .pop4{position:absolute;width:148px;height:99px;left:623px;top:410px;}#item2 .pillows{position:absolute;width:738px;height:99px;left:75px;top:520px;}#item2 .vline{position:absolute;left:1145px;top:0px;width:2px;height:111px;background-color:rgb(114, 45, 152);}#item2 .ball{width:74px;height:74px;position:absolute;left:1110px;top:75px;animation: 5s linear 0s normal none infinite ball;-moz-animation:5s linear 0s normal none infinite ball;-ms-animation:5s linear 0s normal none infinite ball;-webkit-animation:5s linear 0s normal none infinite ball; -o-animation:5s linear 0s normal none infinite ball;}#item2 .ball:hover{animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused;-ms-animation-play-state:paused;}@keyframes ball{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} 
@-webkit-keyframes ball{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}} 
@-moz-keyframes ball{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}} 
@-o-keyframes ball{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}} 
@-ms-keyframes ball{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}} 
#item2 .title{position:absolute;left:888px;top:205px;font-size:24px;color:#6b318b;font-family:"Youyuan", "幼圆", "SYHT", "微软雅黑", "Microsoft Yahei", "Heiti";}#item2 .content{position:absolute;left:888px;top:257px;font-size:20px;font-family:"Youyuan", "幼圆", "SYHT", "微软雅黑", "Microsoft Yahei", "Heiti";}#item3{width:1365px;height:619px;background-color:rgb(244, 230, 255);position:relative;}#item3 .vline{position:absolute;left:218px;top:0px;width:2px;height:111px;background-color:rgb(114, 45, 152);}#item3 #smile{width:91px;height:74px;position:absolute;left:173px;top:111px;}#item3 .hearttalk{width:601px;height:499px;position:absolute;left:616px;top:75px;}#item3 .goodnight{width:177px;height:146px;position:absolute;left:932px;top:142px;}#item3 .title{position:absolute;left:535px;top:230px;font-size:24px;color:#6b318b;font-family:"Youyuan", "幼圆", "SYHT", "微软雅黑", "Microsoft Yahei", "Heiti";}#item3 .content{position:absolute;text-align:right;display:block;left:0px;top:270px;width:612px;height:105px;font-size:20px;font-family:"Youyuan", "幼圆", "SYHT", "微软雅黑", "Microsoft Yahei", "Heiti";}#item4{width:1365px;height:619px;background-color:rgb(244, 230, 255);position:relative;overflow:hidden;}#item4 .vline{position:absolute;left:900px;top:0px;width:2px;height:111px;background-color:rgb(114, 45, 152);}#item4 .address{width:64px;height:74px;position:absolute;left:868px;top:85px;z-index:1;background-color:rgb(244, 230, 255);}#item4 .f1{width:333px;height:495px;position:absolute;left:243px;top:123px;z-index:3;}#item4 .f2{width:410px;height:270px;position:absolute;left:0px;top:223px;z-index:1;overflow:hidden;}#item4 .f3{width:410px;height:270px;position:absolute;left:410px;top:223px;z-index:1;overflow:hidden;}#item4 #f2{width:213px;height:270px;position:absolute;left:303px;top:0px;z-index:2;}#item4 #f3{width:213px;height:270px;position:absolute;left:-107px;top:0px;z-index:2;}#item4 .connbg1{width:819px;height:256px;position:absolute;left:0px;top:363px;}#item4 .connbg2{width:819px;height:256px;position:absolute;left:0px;top:363px;}#item4 .title{position:absolute;left:834px;top:218px;font-size:24px;color:#6b318b;font-family:"Youyuan", "幼圆", "SYHT", "微软雅黑", "Microsoft Yahei", "Heiti";}#item4 .content{position:absolute;left:834px;top:270px;font-size:20px;font-family:"Youyuan", "幼圆", "SYHT", "微软雅黑", "Microsoft Yahei", "Heiti";}</style><script>$(document).ready(function(){  var i=1;
  var timer1 = setInterval(smile,400);
  function smile(){    if(i==1){
      $("#smile").attr("src","./images/running/smile-off-2.png");
      i=2;
    }else{
      $("#smile").attr("src","./images/running/smile-on-2.png");
      i=1;
    }    
  }
  $("#smile").mouseover(function(){     clearInterval(timer1);
  })
  $("#smile").mouseout(function(){    setInterval(smile,1000);
  });
  var j=0;
  var xMouseDown,yMouseDown,xMouseMove,yMouseMove,offX,offY,a,b,c,d,e;
  $("html").mouseover(function(){    
    xMouseDown = window.event.clientX;
    yMouseDown = window.event.clientY;
    j=1;
  })
  $("html").mousemove(function(){    xMouseMove = window.event.clientX;
    yMouseMove = window.event.clientY;
    offX=xMouseMove-xMouseDown;
    offY=yMouseMove-yMouseDown;
    if(window.event.clientX>=682){  
      f2=document.getElementById("f2");
      f3=document.getElementById("f3");
      connbg1=document.getElementById("connbg1");
      connbg2=document.getElementById("connbg2");
      a=f2.offsetLeft-parseInt(offX *0.1);
      if((a>197) && (a<303)){
        $("#f2").css("left",a);
      }
      $("#f3").css("left","-107px");
      
    }else{
      b=f3.offsetLeft+parseInt(offX *0.1);
      if((b<0) && (b>-107)){
        $("#f3").css("left",b);
      }
      $("#f2").css("left","303px");
    }
    c=connbg1.offsetLeft+parseInt(offX*0.1);
    d=connbg1.offsetTop+parseInt(offY*0.1);
    e=connbg2.offsetTop+parseInt(offY*0.1);
    if((c<30) && (c>-30)){
      $("#connbg1").css("left",c);
      $("#connbg2").css("left",c);
    }
    if((d>188) && (d<248)){
      $("#connbg1").css("top",d);
    }
    if((e<300) && (e>240)){
      $("#connbg2").css("top",e);
    }
    j=1;
  })
  $("html").mouseout(function(){    j=0;
  })
  var xMouseDown,yMouseDown,xMouseMove,yMouseMove,offX,offY,a,b,c,d,e,a1,b1,c1;
  var k=0;
  $("#item5").mouseover(function(){    
    xMouseDown = window.event.clientX;
    yMouseDown = window.event.clientY;
    k=1;
  })
  $("html").mousemove(function(){    xMouseMove = window.event.clientX;
    yMouseMove = window.event.clientY;
    offX=xMouseMove-xMouseDown;
    offY=yMouseMove-yMouseDown;  
    house=document.getElementById("house");
    cloud=document.getElementById("cloud");
    lunar=document.getElementById("lunar");
    a=house.offsetLeft-parseInt(offX *0.0015);
    b=cloud.offsetLeft-parseInt(offX *0.002);
    c=lunar.offsetLeft-parseInt(offX *0.003);
    $("#house").css("left",a);
    $("#cloud").css("left",b);
    $("#lunar").css("left",c);  
    k=1;
  })
  $("html").mouseout(function(){    k=0;
  })
  var l=0;
  var small=$("#small li");
  small.mouseover(function(){    l=small.index(this);
    $("#item").stop(true,false).animate({"top":-(l*619)},500);
  })</script></head><body><div class="container" id="container"><div id="item">  <div id="item1">    <img class="phone1" src="./images/running/phone1.png"/>    <img class="phone2" src="./images/running/phone2.png"/>    <div class="vline"></div>    <img class="star" src="./images/running/star2.png"/>    <img class="downblock" src="./images/running/down2.png"/>  </div>  <div id="item2">    <img class="star-moon" src="./images/running/star-moon.png"/>    <img class="help" src="./images/running/help.png"/>    <img class="popcontent4" src="./images/running/popcontent4.png"/>    <img class="pop1" src="./images/running/pop2.png"/>    <img class="popcontent1" src="./images/running/popcontent1.png"/>    <img class="pop2" src="./images/running/pop2.png"/>    <img class="popcontent2" src="./images/running/popcontent2.png"/>    <img class="pop3" src="./images/running/pop2.png"/>    <img class="popcontent3" src="./images/running/popcontent3.png"/>    <img class="pop4" src="./images/running/pop2.png"/>    <img class="pillows" src="./images/running/pillows.png"/>    <div class="vline"></div>    <img class="ball" src="./images/running/ball.png"/>    <span class="title">夜问?<br></span>    <span class="content">你的一个问题,成就了这么多的大湿!<br>无论是情感困惑<br>还是十万个为什么,<br>这里都有人回应你!</span>  </div>  
  <div id="item3">    <img class="hearttalk" src="./images/running/hearttalk.png"/>    <img class="goodnight" src="./images/running/goodnight.png"/>    <div class="vline"></div>    <img id="smile" src="./images/running/smile-on-2.png"/>    <span class="title">夜问?<br></span>    <span class="content">你的一句情话,<br>不知戳到了多少人的心!<br>说情话喝鸡汤聊八卦,<br>谁让练习的妹子太单纯!</span>  </div>  <div id="item4">    <img class="f1" src="./images/running/f1.png"/>    <div class="f2">    <img id="f2" src="./images/running/f2.png"/>    </div>    <div class="f3">    <img id="f3" src="./images/running/f3.png"/>  
    </div>    
    <img class="connbg1" id="connbg1" src="./images/running/connbg1.png"/>    <img class="connbg2" id="connbg2" src="./images/running/connbg2.png"/>    <div class="vline"></div>    <img class="address" src="./images/running/loc.png"/>    <span class="title">附近<br></span>    <span class="content">我靠,<br>原来我的邻居也这么寂寞!<br>发现附近未知的声音,<br>你离Ta只差一个练习!</span>  </div>  <div id="item5">    <div class="above">      <img class="house" id="house" src="./images/running/house.png"/>      <img class="lunar" id="lunar"src="./images/running/lunar.png"/>      <img class="cloud" id="cloud"src="./images/running/cloud2.png"/>    </div>    <div class="foot"></div>  </div></div>  <div id="small">    <ul><li></li><li></li><li></li><li></li><li></li></ul>  </div></div></body></html>


© 著作权归作者所有

2685160125
粉丝 0
博文 1
码字总数 1770
作品 0
郑州
私信 提问
20181008 zip压缩工具、tar打包、打包并压缩

zip压缩工具 支持压缩目录 压缩后不删除源文件/目录 安装: yum install -y zip unzip解压缩 安装: yum install -y unzip tar 打包工具 打包并压缩 tar -zcvf # 打包时支持gzip压缩 tar -jcv...

野雪球
2018/10/09
19
0
Linux文档压缩与打包

zip压缩工具zip压缩包在Windows和Linux中比较常用,它可以压缩目录和文件,压缩目录时,需要指定目录下的文件zip 1.txt.zip 1.txt 压缩文件并指明目录下的文件unzip 1.txt.zip[root@localhos...

yzllinux
2018/01/06
0
0
Python 中的贪婪排名算法

在较早的一遍文章中,我曾经提到过我已经写了一个属于自己的排序算法,并且认为需要通过一些代码来重新回顾一下这个排序算法。 对于我所完成的工作,我核实并且保证微处理器的安全。对非常复...

renwofei423
2013/06/02
1K
2
android5.0以上版本调用jni崩溃

log如下: 02-29 20:34:12.302: E/Test(16577): Step1:Function:init_config_from_xml,type:8 02-29 20:34:12.302: E/Test(16577): Step4:InputBuf: 02-29 20:34:12.302: E/Test(16577): S......

tsmaomaoyu
2016/02/29
2.5K
13
list移除元素容易发生的问题

list 大家应该并不陌生, 如果移除List中的元素呢,也不难,首先想到就是其remove()方法。 下面列出remove()的具体实现,以供参考: snippetid="2366209" snippetfilename="blog201705011_7...

zqbx7
2017/05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部