澳门美高梅手机网站[应用][js+css3]3D盒子导航[PC端]

CSS三创设的3D盒子之导航应用

CentOS七 之 Redis3 学习笔记

1.在用css三营造的盒子表面,放上iframe,来加载导航页面。

1 Redis 官网:
http://www.redis.io/

2.鼠标左键按下移动可旋转盒子,寻找想要的网站。

二 Redis 的下载地址:

三.左键单机盒子表面,将全屏现实所点盒子表面包车型客车网址[iframe中],并可浏览,关闭后再次回到原来状态。

http://download.redis.io/releases/redis-3.0.7.tar.gz
那里大家下载的是
redis-三.0.柒.tar.gz

肆.PC端,将附加展现三个css3做的团团转盒子[举重若轻意思]

3 Redis 的简介:
Redis is an open source (BSD licensed),
in-memory data structure store, used as database, cache and message
broker. It supports data structures such as strings, hashes, lists,
sets, sorted sets with range queries, bitmaps, hyperloglogs and
geospatial indexes with radius queries. Redis has built-in replication,
Lua scripting, LRU eviction, transactions and different levels of
on-disk persistence, and provides high availability via Redis Sentinel
and automatic partitioning with Redis Cluster.
那段话来源于 Redis
的官网,这几个是还是不是最有说服力!?^_^

伍.移动端只呈现2个导航盒子[模拟器平时,真机无效,留待现在翻看,包容开发有待进步。。。]

四 大家能够由此 SecureC奇骏T 或 XShell 连接至
CentOS7 服务器,并跻身到 /usr/local/tools/ 目录中:
cd cd /usr/local/tools/

注:原本打算排列导航盒子,那样的话导航也变得相比较好玩

万1未有此目录,则开创,这一个目录首要用于存放大家下载的部分安装包:
mkdir -p /usr/local/tools/

而是,假若使用iframe来突显网址预览的话,速度太慢,太耗内部存款和储蓄器

5 下载 redis-3.0.7.tar.gz 源码:
wget
http://download.redis.io/releases/redis-3.0.7.tar.gz
也能够点击官网的
http://download.redis.io/releases/redis-3.0.7.tar.gz
地址未来下载到本机,然后通过 SecureFXP 上传播 /usr/local/tools/
目录;

品尝过用html2canvas,可是出于跨域难点,直接被灭

6 将 redis-三.0.七.tar.gz
源码解压缩:
tar xzf redis-3.0.7.tar.gz

缓解方法:通过服务器重临较实时的网址预览图的措施浮现

7 编译 Redis 源码:
进入到 Redis 的根目录 redis-叁.0.7中:
cd redis-3.0.7
执行编写翻译命令:
make


捌 大家来运营一下 Redist
服务器吧:
src/redis-server
shell 给我们如下反馈,则表明 redis
服务运营成功:
1206:C 04 May 05:48:48.344 # Warning:
no config file specified, using the default config. In order to specify
a config file use ./redis-server /path/to/redis.conf
_._
_.-“__ ”-._
_.-“ `. `_. ”-._ Redis 3.0.7
(00000000/0) 64 bit
.-“ .-“`. “`\/ _.,_ ”-._

可实行代码下载地址

( ‘ , .-` | `, ) Running in standalone
mode
|`-._`-…-` __…-.“-._|’`
_.-‘| Port: 6379
| `-._ `._ / _.-‘ | PID:
1206
`-._ `-._ `-./ _.-‘ _.-‘

http://download.csdn.net/detail/wangxsh42/8522151

|`-._`-._ `-.__.-‘ _.-‘_.-‘|


| `-._`-._ _.-‘_.-‘ |
http://redis.io
`-._ `-._`-.__.-‘_.-‘ _.-‘

效果图

|`-._`-._ `-.__.-‘ _.-‘_.-‘|

PC端:

| `-._`-._ _.-‘_.-‘ |
`-._ `-._`-.__.-‘_.-‘ _.-‘

澳门美高梅手机网站 1 澳门美高梅手机网站 2

`-._ `-.__.-‘ _.-‘
`-._ _.-‘
`-.__.-‘

澳门美高梅手机网站 3 澳门美高梅手机网站 4

1206:M 04 May 05:48:48.347 # WARNING:
The TCP backlog setting of 511 cannot be enforced because
/proc/sys/net/core/somaxconn is set to the lower value of 128.
1206:M 04 May 05:48:48.347 # Server
started, Redis version 3.0.7
1206:M 04 May 05:48:48.347 # WARNING
overcommit_memory is set to 0! Background save may fail under low
memory condition. To fix this issue add ‘vm.overcommit_memory = 1’ to
/etc/sysctl.conf and then reboot or run the command ‘sysctl
vm.overcommit_memory=1’ for this to take effect.
1206:M 04 May 05:48:48.347 # WARNING
you have Transparent Huge Pages (THP) support enabled in your kernel.
This will create latency and memory usage issues with Redis. To fix this
issue run the command ‘echo never >
/sys/kernel/mm/transparent_hugepage/enabled’ as root, and add it to
your /etc/rc.local in order to retain the setting after a reboot. Redis
must be restarted after THP is disabled.
1206:M 04 May 05:48:48.355 * DB loaded
from disk: 0.008 seconds
1206:M 04 May 05:48:48.355 * The server
is now ready to accept connections on port 6379
表明:redis 的默许端口号为
637玖,大家能够见到眼下的 redis 的 PID 为 120陆,处于单机械运输转情状;src
目录下的 redis-server 表示 redis 服务端命令;

在线:

玖 只运转了 redis
的服务端并未怎么实际的意义,那大家初始运营 redis 的客户端,来体会一下
redis 的吸重力所在:
src/redis-cli
src 下的 redis-cli 表示 redis
运行客户端的吩咐;

http://wangxinsheng.herokuapp.com/3dboxHome

十 由于 redis 是由 C 语言开发,大家看一下
redis 协助的数据类型都有啥,
String(字符串)
APPEND
BITCOUNT
BITOP
DECR
DECRBY
GET
GETBIT
GETRANGE
GETSET
INCR
INCRBY
INCRBYFLOAT
MGET
MSET
MSETNX
PSETEX
SET
SETBIT
SETEX
SETNX
SETRANGE
STRLEN
Hash(哈希表)
HDEL
HEXISTS
HGET
HGETALL
HINCRBY
HINCRBYFLOAT
HKEYS
HLEN
HMGET
HMSET
HSET
HSETNX
HVALS
HSCAN
List(列表)
BLPOP
BRPOP
BRPOPLPUSH
LINDEX
LINSERT
LLEN
LPOP
LPUSH
LPUSHX
LRANGE
LREM
LSET
LTRIM
RPOP
澳门美高梅手机网站, RPOPLPUSH
RPUSH
RPUSHX
Set(集合)
SADD
SCARD
SDIFF
SDIFFSTORE
SINTER
SINTERSTORE
SISMEMBER
SMEMBERS
SMOVE
SPOP
SRANDMEMBER
SREM
SUNION
SUNIONSTORE
SSCAN
SortedSet(有序聚集)
ZADD
ZCARD
ZCOUNT
ZINCRBY
ZRANGE
ZRANGEBYSCORE
ZRANK
ZREM
ZREMRANGEBYRANK
ZREMRANGEBYSCORE
ZREVRANGE
ZREVRANGEBYSCORE
ZREVRANK
ZSCORE
ZUNIONSTORE
ZINTERSTORE
ZSCAN

代码段:

1一 redis 文档的汉语翻译网址:
http://doc.redisfans.com/

一.css3盒子构建:

有不驾驭的或忘记的可以来此处查看;

html:

1二 redis 的主干数据单位为 SDS(simple
dynamic string),其是在 C 语言的 char[]
数组之上封装的,用于存款和储蓄大旨的数额;

 1 <div class="cubeOut" style="left:25%;top:35%">
 2     <div class='cube move'>
 3         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
 4         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
 5         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
 6         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
 7         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
 8         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
 9     </div>
10 </div>

13 set 与 get 字符串:
我们向 redis
服务器插入3个字符串类型的多寡:
127.0.0.1:6379> set name
‘idea’
shell 反馈给大家的结果如下:
OK
大家查阅一下刚好插入到 redis 服务器的
key 为 name 的 value :
127.0.0.1:6379> get name
shell 反馈给大家的结果如下:
“idea”

css3:

1四 大家做八个自增类别:
1肆.壹 设置三个 key 为 orderid
类别,给其起头值为 10000:
incrby orderid 10000
1四.2 逐次执行递增操作:
incr orderid
查看 shell 反馈给我们的结果,是或不是redis 在以 一 的急剧间隔递增?

澳门美高梅手机网站 5澳门美高梅手机网站 6

一5 大家做3个列表操作:
15.一 向 List 中自左向右加入 5个整数:
127.0.0.1:6379> lpush nums 10 20 30
40 50
shell 反馈给大家的结果如下:
(integer) 5
一5.2 大家从左边取值,执行 七次下边的命令,并查看 shell 的汇报:
127.0.0.1:6379> rpop nums
“10”
127.0.0.1:6379>
127.0.0.1:6379> rpop nums
“20”
127.0.0.1:6379> rpop nums
“30”
127.0.0.1:6379> rpop nums
“40”
127.0.0.1:6379> rpop nums
“50”
127.0.0.1:6379> rpop nums
(nil)
127.0.0.1:6379> rpop nums
(nil)
当执行第 七回的时候,取不到值了,那像不像数据结构中的“堆”?
一伍.三 大家从左侧取值,执行 七遍上边的指令,并查看 shell 的上报:
127.0.0.1:6379> lpop nums
“50”
127.0.0.1:6379> lpop nums
“40”
127.0.0.1:6379> lpop nums
“30”
127.0.0.1:6379> lpop nums
“20”
127.0.0.1:6379> lpop nums
“10”
127.0.0.1:6379> lpop nums
(nil)
当执行到第 七次后,也是取不到值了,样子照旧很像数据结构中的“堆”的呗!

 1 .cubeOut{
 2   height: 100%;
 3   left: 50%;
 4   margin-left: -10em;
 5   margin-top: -10em;
 6   -webkit-perspective: 1000px;
 7   -ms-perspective: 1000px;
 8   perspective: 1000px;
 9   position: absolute;
10   top: 50%;
11   width: 100%;
12   }
13 .cube {
14   height: 100%;
15   position: absolute;
16   -webkit-transform-style: preserve-3d;
17   -ms-transform-style: preserve-3d;
18   transform-style: preserve-3d;
19   width: 100%;
20   transform: rotateX(-35deg) rotateY(35deg);
21 }
22 .cubeOut .move{ -webkit-animation: 6s spin linear infinite;
23   animation: 6s spin linear infinite;}
24 .cube * {
25   border: 2px solid rgba(54, 226, 248, 0.5);
26   display: block;
27   height: 100%;
28   position: absolute;
29   width: 100%;
30 }
31 .face {
32   cursor:pointer;
33   height: 100%;
34   position: absolute;
35   width: 100%;
36 }
37 .face:nth-child(1) {
38   transform: rotateY(0deg) translateZ(150px);
39   background: rgba(255, 102, 102, 0.75);
40 }
41 .face:nth-child(2) {
42   transform: rotateY(90deg) translateZ(150px);
43   background: rgba(179, 255, 102, 0.75);
44 }
45 .face:nth-child(3) {
46   transform: rotateY(180deg) translateZ(150px);
47   background: rgba(102, 255, 255, 0.75);
48 }
49 .face:nth-child(4) {
50   transform: rotateY(270deg) translateZ(150px);
51   background: rgba(178, 102, 255, 0.75);
52 }
53 .face:nth-child(5) {
54   transform: rotateX(90deg) translateZ(150px);
55   background: rgba(178, 102, 255, 0.75);
56 }
57 .face:nth-child(6) {
58   transform: rotateX(-90deg) translateZ(150px);
59   background: rgba(178, 102, 255, 0.75);
60 }
61 @keyframes spin {
62   from {
63     -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
64     transform: translateZ(-10em) rotateX(0) rotateY(0deg);
65   }
66 
67   to {
68     -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
69     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
70   }
71 }
72 @-webkit-keyframes spin {
73   from {
74     -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
75     transform: translateZ(-10em) rotateX(0) rotateY(0deg);
76   }
77 
78   to {
79     -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
80     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
81   }
82 }

 

View Code

②.js操作代码

iframe加载操作[缩放iframe大小,私下认可以10贰肆肥瘦访问网址]

 1 $(".cube").find("iframe").each(function(i){
 2     if(this.attributes.url.value!=''){
 3     this.style.height = 1024+"px";
 4     this.style.width = 1024+"px";
 5     this.onload = this.onreadystatechange = iframeload;
 6     this.src = this.attributes.url.value;}
 7 });
 8 
 9 function iframeload() { 
10     if(outFrame===this){return;}
11     if (!this.readyState || this.readyState == "complete") {
12         this.focus();
13         this.style.transformOrigin = "left top";
14         this.style.transform = "scale("+targetWidth/1024+")";
15         this.style.display="block";
16         $(this).attr("loaded","1");
17     }
18 }

盒子旋转操作

 1 var overs = document.querySelectorAll(".fix .over");
 2 for(var i =0;i<overs.length;i++){
 3     if($(overs[i]).prev().prev().attr("url")!='')
 4         overs[i].addEventListener("click", mouseclick, false);
 5     overs[i].addEventListener("mousedown", mousedown, false);
 6     document.addEventListener("mouseup", mouseup, false);
 7     overs[i].addEventListener("mousemove", mousemove, false);
 8 }
 9 
10 function mousedown(e){
11     mouse.x=e.pageX;
12     mouse.y=e.pageY;
13     canmove = true;
14 }
15 function mouseup(e){
16     mouse.x=null;
17     mouse.y=null;
18     canmove = false;
19 }
20 function mousemove(e){
21     if(canmove && mouse.x!=null && mouse.y!=null){
22         var ydeg=0,xdeg=0;
23         xdeg = e.touches[0].pageX - mouse.x;
24         ydeg = e.touches[0].pageY - mouse.y;
25         xd =  (xd + xdeg)%360;
26         yd = (yd -ydeg)%360;
27         e.touches[0].target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";
28         mouse.x=e.touches[0].pageX;
29         mouse.y=e.touches[0].pageY;31     }
32 }

盒子点击操作

澳门美高梅手机网站 7澳门美高梅手机网站 8

 1     function mouseclick(e){
 2         var index = $(e.target.parentNode.parentNode.parentNode).find(".over").index($(e.target));
 3         switch(index){
 4             case 0:
 5                 xd = 0;
 6                 yd = 0;
 7                 break;
 8             case 1:
 9                 xd = -270;
10                 yd = 0;
11                 break;
12             case 2:
13                 xd = -180;
14                 yd = 0;
15                 break;
16             case 3:
17                 xd = -90;
18                 yd = 0;
19                 break;
20             case 4:
21                 xd = 0;
22                 yd = -90;
23                 break;
24             case 5:
25                 xd = 0;
26                 yd = 90;
27                 break;
28             default:;
29         }
30         outFrame = e.target.parentNode.parentNode.getElementsByTagName("iframe")[index];
31         
32         if($(outFrame).attr("loaded")=="0")
33             return;
34             
35         $(e.target).unbind();
36         mouse.x=null;
37         mouse.y=null;
38         canmove = false;
39         e.target.parentNode.parentNode.parentNode.style.zIndex="1000";
40         $("#grayDiv").remove();
41         $("body").append("<div id='grayDiv' style='position:absolute;left:0px;top:0px;background-color:rgba(0,0,0,0.8);z-index:999;width:"+window.innerWidth+"px;height:"+window.innerHeight+"px;'></div>");
42         
43         e.target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";
44         $(outFrame).attr("loaded","0");
45         outFace = $(e.target).prev();
46         $(outFrame).appendTo("#grayDiv");
47         $(outFrame).attr("scrolling","auto");
48         outFrame.style.transform = "scale("+1+")";
49         $(outFrame).css("height",window.innerHeight+"px");
50         $(outFrame).css("width",window.innerWidth+"px");
51         e.target.parentNode.parentNode.parentNode.style.zIndex="2";
52         $("<div id='close' style='position:absolute;left:0;top:0;'>关闭</div>").appendTo("#grayDiv");
53         $("#close").click(function(e){
54             $(outFrame).insertBefore(outFace);
55             $(outFrame).attr("scrolling","no");
56             outFrame.style.transform = "scale("+targetWidth/1024+")";
57             $(outFrame).css("height",1024+"px");
58             $(outFrame).css("width",1024+"px");
59             outFrame = null;
60             outFace = null;
61             $("#grayDiv").remove();
62         });
63     }

View Code


css3 3D盒子代码参考:

http://www.html5tricks.com/html5-animated-cube.html

http://www.html5tricks.com/html5-3d-cube.html

 —

chrome移动端模拟器效果[真机如今失效,留待现在翻看难题]:

澳门美高梅手机网站 9澳门美高梅手机网站 10澳门美高梅手机网站 11澳门美高梅手机网站 12

发表评论

电子邮件地址不会被公开。 必填项已用*标注