Article Detail

JavaScript的if判断的四种书写方式

1.传统的写法 if(score = 60 && alert('及格') ; &&的用法：如果左边的结果为真，那么运行右边的表达式，如果右边的也为真，那么就...

HTML 阅读 203.6万 1 分钟阅读 2016-11-15 11:59

1.传统的写法

if(score < 60){
    alert('不及格');
}else{
    alert('及格');
}

2.利用三目运算符来进行判断

score < 60 ? alert('不及格') : alert('及格') ;

3.利用&& 来判断

score < 60 && alert('不及格') ;
score >= 60 && alert('及格') ;

&&的用法：如果左边的结果为真，那么运行右边的表达式，如果右边的也为真，那么就返回真。其中，只要有一个为假，结果就是假。并且，一旦左边的结果为假，右边的就不执行了。

4.利用 || 来判断

score < 60  ||  alert('及格') ;
score >= 60  ||  alert('不及格') ;

|| 的用法：如果左边的结果为真，那么直接返回true，右边的就忽略了！
如果左边为假，那么就运行右边的，看看右边的结果如何？如果右边为真，就返回真，否则返回假。

Comments 评论区

广西南宁市 2016-11-15 12:04

jQuery toggleClass

!dom.hasClass(className) && dom.addClass(className) || dom.removeClass(className);

#⁰

广西南宁市 2016-11-15 12:07

dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);

简单粗暴的JavaScript的if 判断的正确打开方式

广西南宁市2017-06-07 09:59:12

上移，下移，置顶，置底，全选，反选，不选，移除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.active{
			background: #ccc;
		}
	</style>
	<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
	<script>
		$(function(){
			//上移
			var $Up=$(".up");
			$Up.click(function(){
					var $oP=$(this).parents("p");
					$oP.fadeOut().fadeIn();
					$oP.addClass("active").siblings().removeClass("active");
					$oP.prev().before($oP);
				});

			//下移
			var $Down=$(".down");
			$Down.click(function(){
					var $oP=$(this).parents("p");
					$oP.fadeOut().fadeIn();
					$oP.addClass("active").siblings().removeClass("active");
					$oP.next().after($oP);
				})

			//置顶
			var $Top=$(".top");
			$Top.click(function(){
					var $oP=$(this).parents("p");
					$oP.fadeOut().fadeIn();
					$oP.addClass("active").siblings().removeClass("active");
					$("div").prepend($oP);
				});

			//置底
			var $Bottom=$(".bottom");
			$Bottom.click(function(){
					var $oP=$(this).parents("p");
					$oP.fadeOut().fadeIn();
					$oP.addClass("active").siblings().removeClass("active");
					$("#main").append($oP);
				})

			//删除
			var $Delete=$(".delete");
			$Delete.click(function(){
				var $oP=$(this).parents("p");
				$oP.fadeOut().fadeIn();
				$oP.addClass("active").siblings().removeClass("active");
				$oP.remove();
				});
			
			//全选
			$("button").eq(0).click(function(){
				$("input").attr("checked",true);
			});

			//不选
			$("button").eq(1).click(function(){
				$("input").attr("checked",false);
			});

			//反选
			$("button").eq(2).click(function(){
				$("input").each(function(){
					$(this).attr("checked",!$(this).attr("checked"));
				})
			});
			
			//删除
			$("button").eq(3).click(function(){
				$("input[checked]").parents("p").remove();
			})
		})		
	</script>
</head>
<body>
	<span>
		<button>全选</button>
		<button>不选</button>
		<button>反选</button>
		<button>删除</button>
	</span>
	<div id="main">
		<p>
			<input type="checkbox">
			<span class="nav">用玻璃做个椒盐饼？这是新技术展示</span>
			<a href="javascript:;" class="up" javascript:;>上移</a>
			<a href="javascript:;" class="down">下移</a>
			<a href="javascript:;" class="top">置顶</a>
			<a href="javascript:;" class="bottom">置底</a>
			<a href="javascript:;" class="delete">删除</a>
		</p>
		<p>
			<input type="checkbox">
			<span class="nav">为什么迷信也是民俗的研究对象之一？</span>
			<a href="javascript:;"class="up">上移</a>
			<a href="javascript:;"class="down">下移</a>
			<a href="javascript:;"class="top">置顶</a>
			<a href="javascript:;" class="bottom">置底</a>
			<a href="javascript:;" class="delete">删除</a>
		</p>
		<p>
			<input type="checkbox">
			<span class="nav">地铁会被暴雨淹没吗？如何自救？</span>
			<a href="javascript:;"class="up">上移</a>
			<a href="javascript:;"class="down">下移</a>
			<a href="javascript:;"class="top">置顶</a>
			<a href="javascript:;" class="bottom">置底</a>
			<a href="javascript:;" class="delete">删除</a>
		</p>
		<p>
			<input type="checkbox">
			<span class="nav">如何优雅地成为德意志古典哲学的追随者</span>
			<a href="javascript:;"class="up">上移</a>
			<a href="javascript:;"class="down">下移</a>
			<a href="javascript:;"class="top">置顶</a>
			<a href="javascript:;" class="bottom">置底</a>
			<a href="javascript:;" class="delete">删除</a>
		</p>
		<p>
			<input type="checkbox">
			<span class="nav">什么？你把瓷器上的图案抹掉了?</span>
			<a href="javascript:;"class="up">上移</a>
			<a href="javascript:;"class="down">下移</a>
			<a href="javascript:;"class="top">置顶</a>
			<a href="javascript:;" class="bottom">置底</a>
			<a href="javascript:;" class="delete">删除</a>
		</p>
	</div>
</body>
</html>

#⁰

广西南宁市 2017-04-14 14:19

你的论文是 Google 里面google出来的？
我承认google里面可以找到很多资料，抄都抄死你，但是不要全是google出来就好。
要多加点自己的思考。
我很喜欢google。

我回复这些内容不需要google，也没有在电脑里翻东西，我是基于自己的理解。
本来就是顺带着讨论的嘛，你看看，俺们偏离主题这么远！

摘要算法可以单向加密，我为什么不用呢？可以解决实际问题的呀。

你的加密算法MD5，估计你是不会用它算摘要的哦。
因为你的逻辑里是这样的：不是加密算法就不能用来加密；不是摘要算法当然就不能算摘要喽，用了可是犯规的哦。
ok，凡是可以用来加密的，就是加密算法！凡是可以打字的都是打字机，我知道，你正在用打字机浏览这个帖子。

从你的语气和回复速度，可以知道你很激动，怎么这么沉不住气啊，讨论嘛，弄得跟吵架似的。估计年纪不大，真是英雄出少年啊。反应敏捷。
从你回复的内容来看，你很喜欢想当然，自己认为是怎么样的，就能断定别人就是怎么样的，这么酷啊？酷毙了！

好了，再说下去我就跟你一样了！那可糟了。

哦，差点忘了告诉你：
摘要算法的特色是算摘要，MD5是典型的摘要算法。

专家说了，MD5 是 Digital Signature Algorithms（数字签名算法，也就是我们说的摘要算法）。
至于DES等为什么没有明确写明是加密算法，可能是你没有看到吧，你写论文应该找了不少资料的啊，怎么就没看到呢？
要不你自己再去问问专家吧。不管你问得到还是问不到，不必告诉我们，因为我们本来就承认 DES，RSA 等是加密算法。

#⁰

广西南宁市 2017-05-10 09:57

在程序开头加一句：
error_reporting(E_ALL & ~E_NOTICE); 或error_reporting(E_ALL ^ E_NOTICE);

广西南宁市2017-05-10 10:00:26

PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明

在看帝国cms的connect.php是发现第一句是error_reporting(E_ALL ^ E_NOTICE);以前也没注意过这个语句，知道是设置错误提示的，但不清楚具体怎样设置使用。下面从网上摘抄了些东西，总结了一下。
举例说明：

在Windows环境下：原本在php4.3.0中运行正常的程序，在4.3.1中为何多处报错，大体提示为：Notice:Undefined varialbe:变量名称.
例如有如下的代码：

if (!$tmp_i) { 
$tmp_i=10; 
}

在4.3.0中运行正常，在4.3.1中运行会提示Notice:Undefined varialbe:tmp_i
问题下下：
1.问题出在哪里？
2.应如何修改这段代码？
3.不改段代码，如何修改php.ini中的设置使原来在4.3.0中的程序在4.3.1的环境下运行正常?而不出现这个错误提示.

解决办法：

在程序开头加一句：

error_reporting(E_ALL & ~E_NOTICE); 或error_reporting(E_ALL ^ E_NOTICE);

或者
修改php.ini

error_reporting = E_ALL & ~E_NOTICE

有关error_reporting()函数：

error_reporting() 设置 PHP 的报错级别并返回当前级别。
; 错误报告是按位的。或者将数字加起来得到想要的错误报告等级。

; E_ALL - 所有的错误和警告 
; E_ERROR - 致命性运行时错 
; E_WARNING - 运行时警告（非致命性错） 
; E_PARSE - 编译时解析错误 
; E_NOTICE - 运行时提醒(这些经常是是你的代码的bug引起的， 

;也可能是有意的行为造成的。(如：基于未初始化的变量自动初始化为一个 
　　　　　　　　　　　　　　;空字符串的事实而使用一个未初始化的变量) 

; E_CORE_ERROR - 发生于PHP启动时初始化过程中的致命错误 
; E_CORE_WARNING - 发生于PHP启动时初始化过程中的警告(非致命性错) 
; E_COMPILE_ERROR - 编译时致命性错 
; E_COMPILE_WARNING - 编译时警告(非致命性错) 
; E_USER_ERROR - 用户产生的出错消息 
; E_USER_WARNING - 用户产生的警告消息 
; E_USER_NOTICE - 用户产生的提醒消息

使用方法：

error_reporting(0);//禁用错误报告 
error_reporting(E_ALL ^ E_NOTICE);//显示除去 E_NOTICE 之外的所有错误信息 
error_reporting(E_ALL^E_WARNING^E_NOTICE);//显示除去E_WARNING E_NOTICE 之外的所有错误信息 
error_reporting(E_ERROR | E_WARNING | E_PARSE);//显示运行时错误，与error_reporting(E_ALL ^ E_NOTICE);效果相同。error_reporting(E_ALL);//显示所有错误

广西南宁市2017-05-10 10:01:16

php中error_reporting(E_ERROR | E_WARNING | E_PARSE);是什么意思？
php中error_reporting(E_ERROR | E_WARNING | E_PARSE);是什么意思？

开启这3类错误信息的报告捏：Error一般是严重错误，Warning是些警告类的提示错误，Parse是语法解析方面的错误吧？具体查下文档吧。
至于|这个二进制位的运算符的含义你想象成并且的意思吧，就是这三类加在一起都要。
因为计算机中经常喜欢用比特位来记录某个样式风格，比如一个32位的整数，可以表示32个风格（windows程序开发中窗体风格里就用到）。
比如我要用：
0000 0000 0000 0000 0000 0000 0000 0001 ---------->表示E_ERROR这个符号
0000 0000 0000 0000 0000 0000 0000 0010 ---------->表示E_WARNING这个符号
0000 0000 0000 0000 0000 0000 0000 0100 ---------->表示E_PARSE这个符号
这样用|在一起
0000 0000 0000 0000 0000 0000 0000 0111表示三个的组合。

广西南宁市2017-05-10 10:22:33

PHP syntax error, unexpected $end 错误的一种原因及解决

PHP 遇到 syntax error, unexpected $end 错误时，查错思路其实还是看看文件里 PHP 的开始标记和结束标记是否配对，还要额外注意注释里是否出现过 ?> 哟。
Parse error: syntax error, unexpected $end in script.php on line xx
调试了一会后发现产生错误的行是文件中间某行

//$str .= "?>\n";

想起来了 PHP 解释器允许的结尾标记那行还可以用单行注释，即 //$str .= "?>\n"; 被解释成结尾标记前有注释，注释的内容是 //$str .= "，而 ?> 后面的 \n"; 会被解释作 PHP 块外的内容按 HTML 输出出去！结果是给 $str .= "?>\n"; 这行添加 // 成注释后，反而多了个 ?> 的结束标记，造成原来真正的结束标记成了意料之外的（unexpected）了。
解决办法就是直接删掉这一行即可。

PHP 开始和结束标记所在行别写其它东西，是个好习惯。

#⁰

广西南宁市 2017-06-02 14:03

php位运算与或异或取反

<?php
/**
php中有4个位运算，分别是&与 |或 ^异或 ~取反
& 两位全为1，结果为1
| 有一位为1，结果为1
^ 一个为0，一个为1，结果为1
~ 取反0->1，1->0

1.二进制的最高位是符号位，0表示正数，1表示负数。
2.正数的原码，反码，补码都一样。
3.负数的反码=它的原码符号位不变，其它位取反(0->1,1->0)。
4.负数的补码=它的反码+1。
5.0的反码，补码都是0.
6.php没有无符号数，换言之，php中的数都是有符号的。
7.在计算机运算的时候，都是以补码的方式来运算的。

**/

 

//异或
echo 13&7;

echo "<br/>";
echo 5|4 ;

echo "<br/>";
echo -3^3;

//推理过程：

/**

13&7

13的补码  00000000 00000000 00000000 00001101
7的补码   00000000 00000000 00000000 00000111
13&7      00000000 00000000 00000000 00000101   = 5

5|4

5的补码 00000000 00000000 00000000 00000101
4的补码 00000000 00000000 00000000 00000100
5|4      00000000 00000000 00000000 000000101   =5

-3^3

-3的补码
-3的原码 10000000 00000000 00000000 00000011
-3的反码 11111111 11111111 11111111 11111100
-3的补码 11111111 11111111 11111111 11111101

3的补码 00000000 00000000 00000000 00000011

-3^3     11111111 11111111 11111111 11111110  《补码》
 推反码《对补码-1》
11111111 11111111 11111101   《反码》
推原码《符号位不变 其他取反》
00000000 00000000 00000010   《原码》  =-2

注意：因为二进制没有进位和退位，可以看做是10-1，那就等于1了

**/
?>

#⁰

广西南宁市 2017-06-02 16:11

由逻辑异或运算符而发现的PHP诡异运算符优先级

PHP的逻辑运算符中，xor表示逻辑异或

$a xor $b

结果

如果 $a 和 $b 有且仅有一个为 true，则返回 true；如果都是true 或 false，则返回false。

然而在测试xor运算符时，发现一点问题
错误情况1

<?php
        $a = false xor true;
        var_dump($a);
?>

结果1
boolean false

情况2

<?php
        $a = true xor false;
        var_dump($a);
?>

结果2
boolean true

这是怎么回事呢？

我们换个测试xor运算符的方式
情况3

<?php
        echo false xor true;
?>

结果3
1
这样就没问题了，那么前两种情况是哪里有毛病呢？

情况4

<?php
        $a = (false xor true);
        var_dump($a)
?>

结果4
boolean true

这样就对了，可见应是运算符优先级导致的。

在PHP中，and、or、xor的运算符优先级是比 = 低的，在这种情况下，加个小括号就好了……

#⁰

广西南宁市 2017-06-02 16:12

<?php
 
function getXOR($data, $key, $string = ''){
        $len = strlen($data);
        $len2 = strlen($key);
        for($i = 0; $i < $len; $i ++){
            $j = $i % $len2;
            $string .= ($data[$i]) ^ ($key[$j]);
        }   
        return $string;
}
 
 
$data = 'this is a #test@ string';
$key = 'thisakey';
 
 
 
$f = getXOR($data, $key);
echo $f;
$s = getXOR($f, $key);
print_r($s);

#⁰

广西南宁市 2017-06-02 16:21

PHP中的运算符

1.算数运算符：
    %：求模运算（取余数运算）
    /：除法运算（结果是商的值）
    注意：以上两种运算除数不能为0，在PHP语言中会在运算前将%两边的操作数转换为整型。
    
2.字符串运算符
在PHP中字符串运算符只有一个，就是英文的句点（.），也称连接运算符
如果连接的是一个变量的话，需要在变量的两边加( . )且在外边都加上“”

3.赋值运算符：将左边的值和右边你的值运算后赋给左边     
        .=   的意义：将变量与所赋的值相连后的结果赋给变量
        例子：$x.=3    等价于   $x=$x."3"  
        
4.比较运算符：二元运算符
    “=”，“==” ，“===”的 区别
    “=” ：是一个赋值符号
    “==”：是一个等号，当左边的操作数等于右边的操作数的时候，返回TURE   ，反之返回FALSE
    “===”：当左边的操作数和右边的操作数相同，且他们的数据类型也是相同的才返回TRUE

5.逻辑运算符：用于判断对错
    and或&&：两边的操作数为TRUE时，才返回TRUE
    or  或 || ：两边操作数为FASE时， 才返回FALSE
    not  或 ! :  当操作数为TURE的时，返回FALSE
    xor   ：逻辑与或运算，只要一边的操作数为TRUE，就可以返回TRUE

6.位运算符：
    &：两个1才为1；
    |  ：两个0才为0；
    ^  :两个操作数不同的时候，才为1

7.三元运算符：（exprl）？（exprl1）：（exprl2）类似与  “if...else”，但是三元运算符会显得更加的整洁
      当experl的值为TRUE时，获取exprl1 的值，反之 取exprl2的值
      
8.执行运算符  ：反引号‘ ’
PHP将尝试将引号的内容作为操作系统命令来执行，并将其输出信息返回

9.错误输出控制符号：@
将其放在一个PHP表达式之前，产生的任何警告信息都将被忽略，它只对表达式有效。

规则：如果能从某处取到值，就可以在它的前面加上@。不能放在函数和类的定义之前。

10.运算符的优先级

优 先 级      结合方向  运 算 符  附加信息
1  非结合  new  new
2  左  [  array()
3  非结合  ++ --  递增／递减运算符
4  非结合  ! ~ - （int） （float） （string） （array） （object） @  类型
5  左  * / %  算数运算符
6  左  + - .  算数运算符和字符串运算符
7  左  << >>  位运算符
8  非结合  < <= > >=  比较运算符
9  非结合  == != === !==  比较运算符
10  左  &  位运算符和引用
11  左  ^  位运算符
12  左  |  位运算符
13  左  &&  逻辑运算符
14  左  ||  逻辑运算符
15  左  ? :  三元运算符
16  右  = += -= *= /= .= %= &= |= ^= <<= >>=  赋值运算符
17  左  and  逻辑运算符
18  左  xor  逻辑运算符
19  左  or  逻辑运算符
20  左  ,  多处用到

#⁰

广西南宁市 2017-06-06 10:11

没有宽度和高度的盒子需要水平居中和垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0; padding:0;}
	.father{
		width:100%;
		height: 300px; 
		background: pink;
		
		text-align: center;
		line-height:300px;
	}
	.father li{
		border:1px solid red;
		
		display: inline-block; 
		_display:inline; 
	}
	</style>
</head>
<body>
	<ul class="father">
		
		<Li>1</Li>
        <li>2</li>
		<Li>1</Li>
        <li>2</li>
		<Li>1</Li>
        <li>2</li>
	</ul>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.big{
		width:500px; height:500px; background: pink;
		text-align: center;
		display: table;
		_position: relative;

	}
	.small{
		
		display: table-cell; 
		vertical-align: middle;
		_position:absolute;
		_top:50%;
		_left:50%;

	}
	.content{
	}
	</style>
</head>
<body>
	<div class="big">
		<div class="small">
			<div class="content">
				
				范德萨
			</div>
		</div>
	</div>
</body>
</html>

广西南宁市2017-06-27 17:31:29

kmp算法时间复杂度

广西南宁市2017-06-27 17:34:41

#¹js curry 高阶函数链式操作 javascript高级属性、方法和对象

广西南宁市2017-07-19 16:16:55

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

广西南宁市2017-08-11 15:38:45

<!--盒子自动居中 类 middlesjs 加最后-->
<style>	.middlesjs{width:auto;display: inline-block;}</style>
<script>
	//自动居中
	$(document).ready(function(){
		  $(".middlesjs").each(function(){
			 var nw=$(this).width();
			 $(this).css({'left':'50%','margin-left':'-'+(nw/2)+'px','position':'relative'});
		  });
	});
</script>
<!--end-->

广西南宁市2017-08-11 15:39:08

#⁴

<div class="bt1 middlesjs">

#⁰

广西南宁市 2017-06-06 10:13

css扇形菜单

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<style>
		#sector {
			position: relative;
			overflow: hidden;
			width: 200px;
			height: 100px;
			margin: 150px auto;
			background-color: #ddd;
			border-top-left-radius: 100px;
			border-top-right-radius: 100px;
		}
		
		#sector ul li {
			list-style: none;
			position: absolute;
			width: 200px;
			height: 100px;
			right: 50%;
			top: 0;
			-webkit-transform-origin: 100% 100%;
			-moz-transform-origin: 100% 100%;
			-ms-transform-origin: 100% 100%;
			transform-origin: 100% 100%;
		}
		
		#sector .sector1 {
			background-color: #fef4ac;
			-webkit-transform: skew(54deg);
			-moz-transform: skew(54deg);
			-ms-transform: skew(54deg);
			transform: skew(54deg);
		}
		
		#sector .sector2 {
			background-color: #FCF6E6;
			-webkit-transform: rotate(36deg) skew(54deg);
			-moz-transform: rotate(36deg) skew(54deg);
			-ms-transform: rotate(36deg) skew(54deg);
			transform: rotate(36deg) skew(54deg);
		}
		
		#sector .sector3 {
			background-color: #faf2cc;
			-webkit-transform: rotate(72deg) skew(54deg);
			-moz-transform: rotate(72deg) skew(54deg);
			-ms-transform: rotate(72deg) skew(54deg);
			transform: rotate(72deg) skew(54deg);
		}
		
		#sector .sector4 {
			background-color: #f9f1e9;
			-webkit-transform: rotate(108deg) skew(54deg);
			-moz-transform: rotate(108deg) skew(54deg);
			-ms-transform: rotate(108deg) skew(54deg);
			transform: rotate(108deg) skew(54deg);
		}
		
		#sector .sector5 {
			background-color: #f5e79e;
			-webkit-transform: rotate(144deg) skew(54deg);
			-moz-transform: rotate(144deg) skew(54deg);
			-ms-transform: rotate(144deg) skew(54deg);
			transform: rotate(144deg) skew(54deg);
		}
		
		#sector ul li p {
			position: absolute;
			top: 50px;
			left: 150px;
			-webkit-transform: skew(-54deg) rotate(-70deg);
			-moz-transform: skew(-54deg) rotate(-70deg);
			-ms-transform: skew(-54deg) rotate(-70deg);
			transform: skew(-54deg) rotate(-70deg);
		}
	</style>
</head>
<body>
<div id="sector">
	<ul>
		<li class="sector1"><p>A</p></li>
		<li class="sector2"><p>B</p></li>
		<li class="sector3"><p>C</p></li>
		<li class="sector4"><p>D</p></li>
		<li class="sector5"><p>E</p></li>
	</ul>
	<a></a>
</div>
</body>
</html>

广西南宁市2017-06-06 10:19:28

用了循环加了样式

window.onload =  function(){
                        var sector = document.getElementById('sector');
                        var oli = document.getElementsByTagName('li');
                        for (var i = 0; i < oli.length; i++) {

                                oli[i].style.cssText += 'transform:rotate('+( i*36 )+'deg) skew(54deg)';
                                console.log(oli[i]);
                        }
        };

#⁰

广西南宁市 2017-06-06 10:54

code

#⁰

广西南宁市 2017-06-06 11:02

😀

#⁰

广西南宁市 2017-06-06 11:03

😁

#⁰

广西南宁市 2017-06-06 14:23

css实现横向带箭头步骤流程效果
这是通过纯css实现的步骤流程效果，扩展性强，可以随意增加减少数量，兼容性ie6+。

<style type="text/css">
ul{margin:0px; padding:0px; list-style:none;}
	.wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;}
	.step-case{height:40px;}
		.step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;}
		.step-case li span{display:block; background-color:#ccc;  height:40px; line-height:40px;  text-align:center; color:#fff; font-weight:bold;}
		.step-case b{position:absolute; font-size:0px; line-height:0px; top:0px;}
		.step-case .b-l{border-width:2px 2px 2px 0; border-style:dashed solid dashed dashed; border-color:transparent #ccc transparent transparent; height:36px; left:-2px;}
		.step-case .b-r{border-width:2px 0 2px 2px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; height:36px; right:-2px;}
		.step-case .b-1{border-width:20px 0 20px 20px; border-style:solid dashed solid solid; border-color:#ccc transparent #ccc #ddd; left:-20px;}
		.step-case .b-2{border-width:20px 0 20px 20px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; left:-21px;}
		/*当前状态*/
		.step-case .s-cur span{background-color:orange;}
		.step-case .s-cur .b-l{border-right-color:orange;}
		.step-case .s-cur .b-r{border-left-color:orange;}
		.step-case .s-cur .b-1{border-color:orange orange orange #FABF55;}
		.step-case .s-cur .b-2{border-left-color:#FADBA5;}
		/*当前状态后*/
		.step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;}
		/*完成的状态*/
		.step-case .s-finish span{background-color:#FADBA5; color:#000;}
		.step-case .s-finish .b-l{border-right-color:#FADBA5;}
		.step-case .s-finish .b-r{border-left-color:#FADBA5;}
		.step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;}
		.step-case .s-finish .b-2{border-left-color:#FADBA5;}
</style>
<script type="text/javascript">
	window.onload = function(){
		var step = document.getElementById("step"),li = step.getElementsByTagName("li");
		for(var i = 0;i<li.length;i++){
			//(function(i){
				li[i].index = i;
				li[i].onclick = function(){
					var i = this.index;
					for(var j = 0;j<i;j++){
						li[j].className = "s-finish";
					}
					for(var j = li.length;j>i;){
						li[--j].className = "";
						if(j==i+1){
							li[j].className = "s-cur-next";
						}
					}
					this.className = "s-cur";
				}

			//})(i);
		}
	};
</script>
<div class="wrap">
	<ul class="step-case" id="step"> 
		<li class="s-finish"><span>第1步</span><b class="b-l"></b></li>
		<li class="s-finish"><span>第2步</span><b class="b-1"></b><b class="b-2"></b></li>
		<li class="s-finish"><span>第3步</span><b class="b-1"></b><b class="b-2"></b></li>
		<li class="s-finish"><span>第4步</span><b class="b-1"></b><b class="b-2"></b></li>
		<li class="s-cur"><span>第5步</span><b class="b-1"></b><b class="b-2"></b></li>
		<li class="s-cur-next"><span>第6步</span><b class="b-1"></b><b class="b-2"></b></li>
		<li><span>第7步</span><b class="b-1"></b><b class="b-2"></b></li>
		<li><span>第8步</span><b class="b-1"></b><b class="b-2"></b><b class="b-r"></b></li> 
	</ul>
</div>

#⁰

广西南宁市 2017-06-06 14:26

CSS3实现三阶魔方模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三阶魔方模型展示</title>
<style>
body{
    background: rgb(0,0,0);
}
/*星星效果start*/
.stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    box-shadow: -447px 387px red, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
    animation: fly 60s linear infinite;
    transform-style: preserve-3d;
}

.stars:before,
.stars:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
}

.stars:before {
    transform: translateZ(-300px);
    opacity: .6;
}

.stars:after {
    transform: translateZ(-600px);
    opacity: .4;
}

@keyframes fly {
    from {
        transform: rotateZ(360deg);
        opacity: .6;
    }
    to {
        transform: rotateZ(0deg);
        opacity: 1;
    }
}
/*星星效果end*/
.big-box{
    width:300px;
    height:300px;
    position: relative;
    margin:150px auto;
    color:rgba(0,0,0,0.5);
    -webkit-perspective: 600px;
    perspective: 600px;

}
@-webkit-keyframes spin {
    from{transform:rotateX(-45deg) rotateY(0deg)}
    to{transform:rotateX(-45deg) rotateY(360deg)}
}
@-webkit-keyframes spin-vertical {
    from{transform:rotateX(0deg) rotateY(0deg)}
    to{transform:rotateX(360deg) rotateY(0deg)}
}
.big-box .model-box{
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style:preserve-3d;
    animation: spin 5s infinite linear;
    /*transform-origin: 0 150px;*/
}
.model-box  .small-box{
    width:100px;
    height:100px;
    float: left;
    opacity: 0.9;
}

.front .small-box{
    /*box-shadow:0 0 30px 1px red inset;*/
    background: red;
    box-shadow:0 0 30px 1px black inset;
}
.back .small-box{
    background: orange;
    box-shadow:0 0 30px 1px black inset;
}
.left .small-box{
    background: green;
    box-shadow:0 0 30px 1px black inset;
}
.right .small-box{
    background: blue;
    box-shadow:0 0 30px 1px black inset;
}
.top .small-box{
    background: white;
    box-shadow:0 0 30px 1px black inset;
}
.bottom .small-box{
    background: yellow;
    box-shadow:0 0 30px 1px black inset;
}
.surface{
    position: absolute;
    /*box-shadow:0 0 30px 1px red inset;*/
    width:300px;
    height:300px;
}
.front{
    transform: translateZ(150px);
}
.back{
    transform: translateZ(-150px) rotateY(180deg);
}
.left{
    transform: rotateY(270deg) translateX(-150px);
    transform-origin:left;
}
.right{
    transform: rotateY(90deg) translateX(150px) ;
    transform-origin:right;
}
.top{
    transform: rotateX(-90deg) translateY(-150px)  ;
    transform-origin:top;
}
.bottom{
    transform: rotateX(90deg) translateY(150px)  ;
    transform-origin:bottom;
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="big-box">

    <div class="model-box">

        <!-- 前 -->
        <div class="front surface">
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
        </div>
        <!-- 后 -->
        <div class="back surface">
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
        </div>
        <!-- 左 -->
        <div class="left surface">
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
        </div>
        <!-- 右 -->
        <div class="right surface">
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
        </div>
        <!-- 上 -->
        <div class="top surface">
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
        </div>
        <!-- 下 -->
        <div class="bottom surface">
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
        </div>
    </div>
</div>


</body>
</html>

广西南宁市2017-06-07 09:56:06

Three.js实现三阶魔方模型每层可旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三阶魔方 three.js</title>
    <script type="text/javascript" src="https://threejs.org/build/three.js"></script>
    <!--视角控制类库  轨道控件-->
    <script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <style type="text/css">
        div#canvas-frame {
            cursor: move;
            width:100%;
            height:100%;
            background-color: black;
        }
        body{
            background: rgb(0,0,0);
            overflow: hidden;
        }
        /*星星效果start*/
        .stars {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 2px;
            box-shadow: -447px 387px red, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
            animation: fly 60s linear infinite;
            transform-style: preserve-3d;
        }

        .stars:before,
        .stars:after {
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            box-shadow: inherit;
        }

        .stars:before {
            transform: translateZ(-300px);
            opacity: .6;
        }

        .stars:after {
            transform: translateZ(-600px);
            opacity: .4;
        }

        @keyframes fly {
            from {
                transform: rotateZ(360deg);
                opacity: .6;
            }
            to {
                transform: rotateZ(0deg);
                opacity: 1;
            }
        }
        /*星星效果end*/
    </style>
</head>
<script>
    var renderer;//渲染器
    var width;//宽度
    var height;//高度
    var raycaster = new THREE.Raycaster();//光线碰撞检测器
    var mouse = new THREE.Vector2();//存储鼠标坐标或者触摸坐标
    var isRotating = false;//魔方是否正在转动
    var intersect;//碰撞光线穿过的元素
    var normalize;//触发平面法向量
    var startPoint;//触发点
    var movePoint;
    var initStatus = [];//魔方初始状态
    //魔方转动的六个方向
    var xLine = new THREE.Vector3( 1, 0, 0 );//X轴正方向
    var xLineAd = new THREE.Vector3( -1, 0, 0 );//X轴负方向
    var yLine = new THREE.Vector3( 0, 1, 0 );//Y轴正方向
    var yLineAd = new THREE.Vector3( 0, -1, 0 );//Y轴负方向
    var zLine = new THREE.Vector3( 0, 0, 1 );//Z轴正方向
    var zLineAd = new THREE.Vector3( 0, 0, -1 );//Z轴负方向

    //兼容requestAnimationFrame
    window.requestAnimFrame = (function(){
        return window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.webkitRequestAnimationFrame;
    })();

    //根据页面宽度和高度创建渲染器，并添加容器中
    function initThree() {
        width = window.innerWidth;
        height = window.innerHeight;
        renderer = new THREE.WebGLRenderer({antialias : true});//生成渲染器对象
        renderer.setSize(width, height);//指定渲染器的高宽
        renderer.setClearColor(0x000000, 1.0);//设置canvas背景色
        document.getElementById('canvas-frame').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中
    }

    //创建相机，并设置正方向和中心点
    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
        camera.position.x = 300;
        camera.position.y = 300;
        camera.position.z = 300;
        camera.up.x = 0;//正方向
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt({
            x : 0,
            y : 0,
            z : 0
        });
        //视角控制
        controller = new THREE.OrbitControls(camera, renderer.domElement);
        controller.target = new THREE.Vector3(0, 0, -75);//设置控制点
    }

    //创建场景，后续元素需要加入到场景中才会显示出来
    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }

    //创建光线
    var light;
    function initLight() {
        light = new THREE.AmbientLight(0xfefefe);
        scene.add(light);
    }

    var cubeParams = {//魔方参数
        x:-75,
        y:75,
        z:75,
        num:3,
        len:50,
        colors:['green','blue',
                'orange','red',
        'yellow','white']
    };

    /**
     * 魔方
     * x、y、z 魔方正面左上角坐标
     * num 魔方单位方向上数量
     * len 魔方单位正方体宽高
     * colors 魔方六面体颜色
     */
    function SimpleCube(x,y,z,num,len,colors){
        var cubes = [];
        for(var i=0;i<num;i++){
            for(var j=0;j<num*num;j++){
                var cubegeo = new THREE.BoxGeometry(len,len,len);
                var materials = [];
                var myFaces = [];
                //一个小正方体有六个面，每个面使用相同材质的纹理，但是颜色不一样
                myFaces.push(faces(colors[0]));
                myFaces.push(faces(colors[1]));
                myFaces.push(faces(colors[2]));
                myFaces.push(faces(colors[3]));
                myFaces.push(faces(colors[4]));
                myFaces.push(faces(colors[5]));
                for (var k = 0; k < 6; k++) {
                    var texture = new THREE.Texture(myFaces[k]);
                    texture.needsUpdate = true;
                    materials.push(new THREE.MeshLambertMaterial({
                        map: texture
                    }));
                }
                var cubemat = new THREE.MeshFaceMaterial(materials);
                var cube = new THREE.Mesh( cubegeo, cubemat );
                //假设整个魔方的中心在坐标系原点，推出每个小正方体的中心
                cube.position.x = (x+len/2)+(j%3)*len;
                cube.position.y = (y-len/2)-parseInt(j/3)*len;
                cube.position.z = (z-len/2)-i*len;
                cubes.push(cube)
            }
        }
        return cubes;
    }

    //生成canvas素材
    function faces(rgbaColor) {
        var canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 256;
        var context = canvas.getContext('2d');
        if (context) {
            //画一个宽高都是256的黑色正方形
            context.fillStyle = 'rgba(0,0,0,1)';
            context.fillRect(0, 0, 256, 256);
            //在内部用某颜色的16px宽的线再画一个宽高为224的圆角正方形并用改颜色填充
            context.rect(16, 16, 224, 224);
            context.lineJoin = 'round';
            context.lineWidth = 16;
            context.fillStyle = rgbaColor;
            context.strokeStyle = rgbaColor;
            context.stroke();
            context.fill();
        } else {
            alert('您的浏览器不支持Canvas无法预览.\n');
        }
        return canvas;
    }

    //创建展示场景所需的各种元素
    var cubes
    function initObject() {
        //生成魔方小正方体
        cubes = SimpleCube(cubeParams.x,cubeParams.y,cubeParams.z,cubeParams.num,cubeParams.len,cubeParams.colors);
        for(var i=0;i<cubes.length;i++){
            var item = cubes[i];
            /**
             * 由于筛选运动元素时是根据物体的id规律来的，但是滚动之后位置发生了变化；
             * 再根据初始规律筛选会出问题，而且id是只读变量；
             * 所以这里给每个物体设置一个额外变量cubeIndex，每次滚动之后更新根据初始状态更新该cubeIndex；
             * 让该变量一直保持初始规律即可。
             */
            initStatus.push({
                x:item.position.x,
                y:item.position.y,
                z:item.position.z,
                cubeIndex:item.id
            });
            item.cubeIndex = item.id;
            scene.add(cubes[i]);//并依次加入到场景中
        }

        //透明正方体
        var cubegeo = new THREE.BoxGeometry(150,150,150);
        var hex = 0x000000;
        for ( var i = 0; i < cubegeo.faces.length; i += 2 ) {
            cubegeo.faces[ i ].color.setHex( hex );
            cubegeo.faces[ i + 1 ].color.setHex( hex );
        }
        var cubemat = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors,opacity: 0, transparent: true});
        var cube = new THREE.Mesh( cubegeo, cubemat );
        cube.cubeType = 'coverCube';
        scene.add( cube );
    }

    //渲染
    function render(){
        renderer.clear();
        renderer.render(scene, camera);
        window.requestAnimFrame(render);
    }

    //开始  入口
    function threeStart(){
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        render();
        //监听鼠标事件
        window.addEventListener('mousedown', startCube, false);
        window.addEventListener('mousemove', moveCube, false );
        window.addEventListener('mouseup', stopCube,false);
        //监听触摸事件
        window.addEventListener('touchstart', startCube, false);
        window.addEventListener('touchmove', moveCube, false);
        window.addEventListener('touchmove', moveCube, false);
    }

    //魔方操作结束
    function stopCube(){
        intersect = null;
        startPoint = null
    }

    //绕着世界坐标系的某个轴旋转
    function rotateAroundWorldY(obj,rad){
        var x0 = obj.position.x;
        var z0 = obj.position.z;
        /**
         * 因为物体本身的坐标系是随着物体的变化而变化的，
         * 所以如果使用rotateZ、rotateY、rotateX等方法，
         * 多次调用后就会出问题，先改为Quaternion实现。
         */
        var q = new THREE.Quaternion();
        q.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), rad );
        obj.quaternion.premultiply( q );
        //obj.rotateY(rad);
        obj.position.x = Math.cos(rad)*x0+Math.sin(rad)*z0;
        obj.position.z = Math.cos(rad)*z0-Math.sin(rad)*x0;
    }
    function rotateAroundWorldZ(obj,rad){
        var x0 = obj.position.x;
        var y0 = obj.position.y;
        var q = new THREE.Quaternion();
        q.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), rad );
        obj.quaternion.premultiply( q );
        //obj.rotateZ(rad);
        obj.position.x = Math.cos(rad)*x0-Math.sin(rad)*y0;
        obj.position.y = Math.cos(rad)*y0+Math.sin(rad)*x0;
    }
    function rotateAroundWorldX(obj,rad){
        var y0 = obj.position.y;
        var z0 = obj.position.z;
        var q = new THREE.Quaternion();
        q.setFromAxisAngle( new THREE.Vector3( 1, 0, 0 ), rad );
        obj.quaternion.premultiply( q );
        //obj.rotateX(rad);
        obj.position.y = Math.cos(rad)*y0-Math.sin(rad)*z0;
        obj.position.z = Math.cos(rad)*z0+Math.sin(rad)*y0;
    }

    //滑动操作魔方
    function moveCube(event){
        getIntersects(event);
        if(intersect){
            if(!isRotating&&startPoint){//魔方没有进行转动且满足进行转动的条件
                movePoint = intersect.point;
                if(!movePoint.equals(startPoint)){//和起始点不一样则意味着可以得到转动向量了
                    isRotating = true;//转动标识置为true
                    var sub = movePoint.sub(startPoint);//计算转动向量
                    var direction = getDirection(sub);//获得方向
                    var elements = getBoxs(intersect,direction);
                    var startTime = new Date().getTime();
                    window.requestAnimFrame(function(timestamp){
                        rotateAnimation(elements,direction,timestamp,0);
                    });
                }
            }
        }
        event.preventDefault();
    }

    /**
     * 旋转动画
     */
    function rotateAnimation(elements,direction,currentstamp,startstamp,laststamp){
        var totalTime = 500;//转动的总运动时间
        if(startstamp===0){
            startstamp = currentstamp;
            laststamp = currentstamp;
        }
        if(currentstamp-startstamp>=totalTime){
            currentstamp = startstamp+totalTime;
            isRotating = false;
            startPoint = null;
            updateCubeIndex(elements);
            //转动之后需要更新魔方此时所处的状态
            console.log(updateCubeStatus());
        }
        switch(direction){
                //绕z轴顺时针
            case 0.1:
            case 1.2:
            case 2.4:
            case 3.3:
                for(var i=0;i<elements.length;i++){
                    rotateAroundWorldZ(elements[i],-90*Math.PI/180*(currentstamp-laststamp)/totalTime);
                }
                break;
                //绕z轴逆时针
            case 0.2:
            case 1.1:
            case 2.3:
            case 3.4:
                for(var i=0;i<elements.length;i++){
                    rotateAroundWorldZ(elements[i],90*Math.PI/180*(currentstamp-laststamp)/totalTime);
                }
                break;
                //绕y轴顺时针
            case 0.4:
            case 1.3:
            case 4.3:
            case 5.4:
                for(var i=0;i<elements.length;i++){
                    rotateAroundWorldY(elements[i],-90*Math.PI/180*(currentstamp-laststamp)/totalTime);
                }
                break;
                //绕y轴逆时针
            case 1.4:
            case 0.3:
            case 4.4:
            case 5.3:
                for(var i=0;i<elements.length;i++){
                    rotateAroundWorldY(elements[i],90*Math.PI/180*(currentstamp-laststamp)/totalTime);
                }
                break;
                //绕x轴顺时针
            case 2.2:
            case 3.1:
            case 4.1:
            case 5.2:
                for(var i=0;i<elements.length;i++){
                    rotateAroundWorldX(elements[i],90*Math.PI/180*(currentstamp-laststamp)/totalTime);
                }
                break;
                //绕x轴逆时针
            case 2.1:
            case 3.2:
            case 4.2:
            case 5.1:
                for(var i=0;i<elements.length;i++){
                    rotateAroundWorldX(elements[i],-90*Math.PI/180*(currentstamp-laststamp)/totalTime);
                }
                break;
            default:
                break;
        }
        if(currentstamp-startstamp<totalTime){
            window.requestAnimFrame(function(timestamp){
                rotateAnimation(elements,direction,timestamp,startstamp,currentstamp);
            });
        }
    }

    //更新位置索引
    function updateCubeIndex(elements){
        for(var i=0;i<elements.length;i++){
            var temp1 = elements[i];
            for(var j=0;j<initStatus.length;j++){
                var temp2 = initStatus[j];
                if( Math.abs(temp1.position.x - temp2.x)<=cubeParams.len/2 &&
                        Math.abs(temp1.position.y - temp2.y)<=cubeParams.len/2 &&
                        Math.abs(temp1.position.z - temp2.z)<=cubeParams.len/2 ){
                    temp1.cubeIndex = temp2.cubeIndex;
                    break;
                }
            }
        }
    }

    /**
     * 更新魔方状态
     * 假设初始化时按固定位置给魔方编号，还原之后位置和编号不变
     */
    function updateCubeStatus(){
        for(var i=0;i<cubes.length;i++){
            var item = cubes[i];
            if(item.id!==item.cubeIndex){
                return false;
            }
        }
        return true;
    }

    //根据方向获得运动元素
    function getBoxs(target,direction){
        var targetId = target.object.cubeIndex;
        var ids = [];
        for(var i=0;i<cubes.length;i++){
            ids.push(cubes[i].cubeIndex);
        }
        var minId = min(ids);
        targetId = targetId-minId;
        var numI = parseInt(targetId/9);
        var numJ = targetId%9;
        var boxs = [];
        //根据绘制时的规律判断 no = i*9+j
        switch(direction){
                //绕z轴
            case 0.1:
            case 0.2:
            case 1.1:
            case 1.2:
            case 2.3:
            case 2.4:
            case 3.3:
            case 3.4:
                for(var i=0;i<cubes.length;i++){
                    var tempId = cubes[i].cubeIndex-minId;
                    if(numI===parseInt(tempId/9)){
                        boxs.push(cubes[i]);
                    }
                }
                break;
                //绕y轴
            case 0.3:
            case 0.4:
            case 1.3:
            case 1.4:
            case 4.3:
            case 4.4:
            case 5.3:
            case 5.4:
                for(var i=0;i<cubes.length;i++){
                    var tempId = cubes[i].cubeIndex-minId;
                    if(parseInt(numJ/3)===parseInt(tempId%9/3)){
                        boxs.push(cubes[i]);
                    }
                }
                break;
                //绕x轴
            case 2.1:
            case 2.2:
            case 3.1:
            case 3.2:
            case 4.1:
            case 4.2:
            case 5.1:
            case 5.2:
                for(var i=0;i<cubes.length;i++){
                    var tempId = cubes[i].cubeIndex-minId;
                    if(tempId%9%3===numJ%3){
                        boxs.push(cubes[i]);
                    }
                }
                break;
            default:
                break;
        }
        return boxs;
    }

    //获得旋转方向
    function getDirection(vector3){
        var direction;
        //判断差向量和x、y、z轴的夹角
        var xAngle = vector3.angleTo(xLine);
        var xAngleAd = vector3.angleTo(xLineAd);
        var yAngle = vector3.angleTo(yLine);
        var yAngleAd = vector3.angleTo(yLineAd);
        var zAngle = vector3.angleTo(zLine);
        var zAngleAd = vector3.angleTo(zLineAd);
        var minAngle = min([xAngle,xAngleAd,yAngle,yAngleAd,zAngle,zAngleAd]);//最小夹角
        switch(minAngle){
            case xAngle:
                direction = 0;//向x轴正方向旋转90度（还要区分是绕z轴还是绕y轴）
                if(normalize.equals(yLine)){
                    direction = direction+0.1;//绕z轴顺时针
                }else if(normalize.equals(yLineAd)){
                    direction = direction+0.2;//绕z轴逆时针
                }else if(normalize.equals(zLine)){
                    direction = direction+0.3;//绕y轴逆时针
                }else{
                    direction = direction+0.4;//绕y轴顺时针
                }
                break;
            case xAngleAd:
                direction = 1;//向x轴反方向旋转90度
                if(normalize.equals(yLine)){
                    direction = direction+0.1;//绕z轴逆时针
                }else if(normalize.equals(yLineAd)){
                    direction = direction+0.2;//绕z轴顺时针
                }else if(normalize.equals(zLine)){
                    direction = direction+0.3;//绕y轴顺时针
                }else{
                    direction = direction+0.4;//绕y轴逆时针
                }
                break;
            case yAngle:
                direction = 2;//向y轴正方向旋转90度
                if(normalize.equals(zLine)){
                    direction = direction+0.1;//绕x轴逆时针
                }else if(normalize.equals(zLineAd)){
                    direction = direction+0.2;//绕x轴顺时针
                }else if(normalize.equals(xLine)){
                    direction = direction+0.3;//绕z轴逆时针
                }else{
                    direction = direction+0.4;//绕z轴顺时针
                }
                break;
            case yAngleAd:
                direction = 3;//向y轴反方向旋转90度
                if(normalize.equals(zLine)){
                    direction = direction+0.1;//绕x轴顺时针
                }else if(normalize.equals(zLineAd)){
                    direction = direction+0.2;//绕x轴逆时针
                }else if(normalize.equals(xLine)){
                    direction = direction+0.3;//绕z轴顺时针
                }else{
                    direction = direction+0.4;//绕z轴逆时针
                }
                break;
            case zAngle:
                direction = 4;//向z轴正方向旋转90度
                if(normalize.equals(yLine)){
                    direction = direction+0.1;//绕x轴顺时针
                }else if(normalize.equals(yLineAd)){
                    direction = direction+0.2;//绕x轴逆时针
                }else if(normalize.equals(xLine)){
                    direction = direction+0.3;//绕y轴顺时针
                }else{
                    direction = direction+0.4;//绕y轴逆时针
                }
                break;
            case zAngleAd:
                direction = 5;//向z轴反方向旋转90度
                if(normalize.equals(yLine)){
                    direction = direction+0.1;//绕x轴逆时针
                }else if(normalize.equals(yLineAd)){
                    direction = direction+0.2;//绕x轴顺时针
                }else if(normalize.equals(xLine)){
                    direction = direction+0.3;//绕y轴逆时针
                }else{
                    direction = direction+0.4;//绕y轴顺时针
                }
                break;
            default:
                break;
        }
        return direction;
    }

    //获取数组中的最小值
    function min(arr){
        var min = arr[0];
        for(var i=1;i<arr.length;i++){
            if(arr[i]<min){
                min = arr[i];
            }
        }
        return min;
    }

    //开始操作魔方
    function startCube(event){
        getIntersects(event);
        //魔方没有处于转动过程中且存在碰撞物体
        if(!isRotating&&intersect){
            startPoint = intersect.point;//开始转动，设置起始点
        }
    }

    //获取操作焦点以及该焦点所在平面的法向量
    function getIntersects(event){
        //触摸事件和鼠标事件获得坐标的方式有点区别
        if(event.touches){
            var touch = event.touches[0];
            mouse.x = (touch.clientX / width)*2 - 1;
            mouse.y = -(touch.clientY / height)*2 + 1;
        }else{
            mouse.x = (event.clientX / width)*2 - 1;
            mouse.y = -(event.clientY / height)*2 + 1;
        }
        raycaster.setFromCamera(mouse, camera);
        //Raycaster方式定位选取元素，可能会选取多个，以第一个为准
        var intersects = raycaster.intersectObjects(scene.children);
        //如果操作焦点在魔方上则取消移动，反之恢复移动
        if(intersects.length){
            try{
                if(intersects[0].object.cubeType==='coverCube'){
                    intersect = intersects[1];
                    normalize = intersects[0].face.normal;
                }else{
                    intersect = intersects[0];
                    normalize = intersects[1].face.normal;
                }
            }catch(err){
                //nothing
            }
            controller.enabled = false;//焦点在魔方上时禁止视角变换
        }else{
            controller.enabled = true;
        }
    }
</script>
<body onload="threeStart();">
<div class="stars"></div>
<div id="canvas-frame"></div>
</body>
</html>

#⁰

广西南宁市 2017-06-06 14:28

各种响应式 Web UI 框架汇总

1. Bootstrap

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
官方网站: http://twitter.github.com/bootstrap/
github: https://github.com/twitter/bootstrap

2. Foundation

Foundation 是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。
官方网站: http://foundation.zurb.com/
github: https://github.com/zurb/foundation

3. Skeleton

Skeleton 是一个小的 JS 和 CSS 文件的集合，可帮你快速开发漂亮的网站，适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。
官方网站: http://www.getskeleton.com/
github: https://github.com/dhgamache/Skeleton

4. Less Framework

Less框架是一个用于设计自适应网站的CSS网格系统，它包含4个布局和3套预设布局，这些都以一个单一网格为基础。Less框架的目标是更高效地创建多布局网站，并在布局之间保持一致。
官方网站: http://lessframework.com/
github: https://github.com/jonikorpi/Less-Framework

5. ResponsiveAeon

ResponsiveAeon 是一个HTML5/CSS3的框架，可以非常快速的创建响应的布局。它有一个网格系统是基于总1104px宽度12列，提供了3个非常容易理解的基本类供 使用。该框架使使用@mediaqueries的，支持任何尺寸的设备。除了网格系统，也有排版，列表，表格，按钮和表格的样式。
官方网站: http://www.newaeonweb.com.br/responsiveaeon/
github: https://github.com/newaeonweb/ResponsiveAeon-Cssgrid

6. Gumby

Gumby 是一个响应式的以及 960 像素宽度的 CSS 网格框架，支持 PC、平板和手机屏幕显示。类似 Twitter 的 Bootstrap，它包括一个Web UI工具包，有好看按钮，表格，导航+标签和一个很小的JavaScript文件。
官方网站: http://www.gumbyframework.com/
github: https://github.com/dsurgeons/Gumby

7. Gridpak

Gridpak 的目的是实现了响应式的 Web 页面设计，提高工作流程，节省了时间。通过生成PNG图像，CSS和JavaScript,让 Gridpak 创建响应式的简单界面。Gridpak 产生的CSS 兼容 IE 8+，但它使用很多实验性的CSS属性，如媒体查询，盒大小和背景剪辑属性，所以建议结合 Modernizer 来使用，确保向后兼容性。
官方网站: http://gridpak.com/

8. Responsive GS

Responsive GS 是一个流体网格 CSS 框架，用于快速开发响应式的 Web 网站。 Responsive GS 提供三种风格：12、16 和 24 列，使用 media queries 支持所有标准设备。
官方网站: http://responsive.gs/
github: https://github.com/StudioSnapsize/responsive-gs

9. Amazium

Amazium 是一个基于 960 Grid System 的响应式 CSS 框架，使用 960px 宽度，以适应大多数 1024*768 分辨率的屏幕。Amazium 使用 4 个主要的 media queries 来调整所适应的分辨率大小。
官方网站: http://www.amazium.co.uk/

10. Golden Grid System

Golden grid system是为增强网页兼容性设计的折叠式grid。具有四个特征：列、跨页、底线、script。
官方网站: http://goldengridsystem.com/
github: https://github.com/jonikorpi/Golden-Grid-System

11. Centurion

Centurion 是一个基于 SASS 和 CSS3 构建的响应式 Web 框架。
官方网站: http://jhough10.github.com/Centurion/
github: https://github.com/jhough10/Centurion

12.inuit.css

该框架用于使用较少的代码实现在较小屏幕（平板电脑、手机）上运行的项目，支持IE6+。
官方网站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css

13. Fluid Baseline Grid

Fluid Baseline网格系统是一个HTML5 & CSS3开发工具包，为网站快速设计提供了坚实的基础。
官方网站: http://fluidbaselinegrid.com/
github: https://github.com/thedayhascome/Fluid-Baseline-Grid

14. HTML5 Boilerplate

HTML5 Boilerplate基于HTML/CSS/JS模板，可以帮助开发者使用HTML5技术快速开发稳健、功能齐全的网站。你可以把它当作自己的新项目模板，在此基础上建立自己的项目。
该模板包含了帮助开发HTML5站点和应用程序的组件和一些优秀的最佳实践，只需开发者最少的前期工作，就能为项目提供一个非常稳固的基础。另外，该模板是高度可定制，可轻松删除不需要的一些特性。
官方网站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate

15.Semantic 

Semantic UI是完全语义化的前端界面开发框架，支持 Sass 和 LESS 动态样式语言,文档和演示非常完善,易于学习和使用,配备网格布局,有一些非常实用的附加配置，例如inverted类。
有一个非常好的按钮实现，情态动词，和进度条。在许多功能上使用图标字体。
官方网站: http://semantic-ui.com/
github: https://github.com/semantic-org/semantic-ui/

16.Zui

ZUI继承了Bootstrap 3中的大部分基础内容作了相应的改进，简单美观，易于使用，快速构建简洁大方的现代web应用。
采用HTML5且支持所有流行的移动及桌面浏览器平台，一些旧的浏览器也能够降级支持，轻快独立稳定，最佳的可用性能，最大限度的不依赖于外部组件，全平台响应，一次编写，响应任何尺寸的设备。
官方网站: http://www.zui.sexy/

17.Amaze

Amaze UI 是一个轻量级、采用mobile first理念的前端框架，中国首个开源 HTML5 跨屏前端框架，适配所有屏幕，可快速构建界面出色、体验优秀的跨屏页面，可提升开发效率，对于常用浏览器及App内置浏览器提供更好的兼容性支持，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备。
官方网站: http://amazeui.org/
github: http://git.oschina.net/amazeui/amazeui



18.MUI

MUI（Mobile User Interface）是一套基于Html5的，遵循Html5+规范的,用于手机端界面开发的一套框架,是目前最高性能和最接近原生体验的手机端框架,体积小不到100k,可直接使用class编写，性能远高于data-方式，又通过代码块的编写方式降低了编码的复杂度。
例如在HBuilder里敲m，会拉出一排控件mList、mButton等，选一个回车，就会自动产生div和class。

19.OniUI

OniUI是基于avalon的UI库，是一个MVVM架构的前端框架，兼容主流浏览器。
官方网站: http://ued.qunar.com/oniui/home.htm
github: https://github.com/RubyLouvre/avalon.oniui

20.Vanilla JS 

Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架，也是浏览器内置框架。
官方网站: http://vanilla-js.com/

21.Zepto

Zepto是专门为移动 WebKit 浏览器，如 Chrome 和 Safari 打造的。凭借其独特的简约发展的特点，它可以帮助开发人员轻松地完成他们的工作。Zepto 最大的特点是保持事情的简单性。这个框架的目标是精确的，便于下载和快速执行。  
官方网站: http://zeptojs.com/

22.Framework7

Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。
官方网站: http://www.idangero.us/framework7/
github: https://github.com/nolimits4web/framework7/


25.Ionic

Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。js部分是基于AngularJS框架，大量使用了Css3，css生成基于Sass，构建工具基于最新的gulp，版本升级基于bower，原生层无缝封装了cordova。使用Ionic框架，可以有效利用AngularJs的特性，极大的提供HTML5应用开发效率，质量，模块化程度。
官方网站:http://ionicframework.com/
github:https://github.com/driftyco/ionic

广西南宁市2017-06-06 14:31:12

移动端开发：使用Zepto还是jQuery Mobile

jQuery Mobile和Zepto是移动端的js库。jQuery Mobile相当于PC端的jQuery UI，它提供了很多页面的UI库，能够很快的开发出漂亮的界面，适合公司没有UI设计师的前端开发人员来进行移动端的开发。Zepto相当于PC端的jQuery，它提供了很多方法和功能，能够很快的实现各种需求和功能，适合公司有UI设计师的前端开发人员来进行移动端的开发。
jQuery Mobile性能上没有zepto好。
zepto.js是一个专为mobile WebKit浏览器(如：Safari和Chrome)而开发的一个JavaScript框架。它标榜自己在其简约的开发理念，能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架，是超轻量级的，只有5KB。zepto.js的语法借鉴并且兼容jQuery。
jQuery Mobile这个框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。
jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新，但开发人员可以用jQuery Mobile为许多移动设备（包括智能手机和平板电脑）开发网站应用程序，RSS阅读器等应用。
jQuery Mobile是目前最流行的一个移动开发的框架，文档丰富，社区活跃，有很多的UI控件供我们使用，并且提供对多页面的支持（通过Ajax方式读取内容，并提供页面切换的过渡动画）。我认为jQuery Mobile的最强大之处就在于其UI方面的支持，但这一部分恰恰不是我所需要的，它对UI的限制比较多。Sencha Touch是ExtJs的移动版，对于不熟悉ExtJs的人来说有一定的学习成本。
jQuery Mobile的缺点，主要有两点：一是重，二是UI限制太大。
我们选择了zepto.js作为底层库，使用sea.js进行模块的管理和发布，当然也可以使用requirejs来进行模块的管理和发布，
requirejs比seajs的对应的工具多一些，因为requirejs是外国的，而其他相应的工具也是外国的，因此使用seajs，相对应的工具会少一些。但是开发起来容易一些，都是中文资料。此外，我们使用backbone.js为基础的MVC架构，用来剥离应用的数据部分；使用underscore.js做为前端模板引擎（backbone重度依赖）；使用iScroll.js为我们提供模拟滚动的功能（此库在低端移动设备上，反应慢）。这些都是一些专业的“小库”，很适合移动端的开发。当然，具体情况需要具体分析，没有万能的框架，只有万能的开发者。如果时间允许，也可以自己来定制一套满足自身需求的基础库。毕竟在移动端，一切以 “精简”为主。
对于单页应用来说，iScroll确实是一个非常优秀的解决方案，但是iScroll却有一个最大的缺陷——慢，滚动的性能与浏览器原生实现相比，在低端的移动设备上有明显卡顿。
不过要兼容低端的移动设备，原生的滚动还是有优势的。尝试放弃使用iScroll组件，使用原生的Scroll。因为较新的浏览器已支持 {overflow: scroll; -webkit-overflow-scrolling: touch;}。
iScroll的诞生，主要是因为早期的webkit内核浏览器没有一种原生支持固定高度的容器。到目前为止，iScroll最大的问题就是慢，在千元以下Android设备上表现尤为突出。使用局部滚动来替代iScroll滚动是最好的一种方式，但很可惜，现在只有iOS5、6支持局部滚动，并且支持程度并不好，而Android压根就不打算支持。这样，我们就不得不使用iScroll。
问题来了，现在到底使用iScroll呢？还是不使用？使用的话，大部分Android设备在滚动时会很卡，如不使用，部分功能又实现不了。其实，这个问题也不必太纠结。
首先， 对于header、footer需要固定位置的页面，可以直接使用position:fixed实现。部分不支持fixed定位的浏览器问题也不大，这部分设备一般都是Android2.x的系统，配置也较低，相对交互而言，速度显然更加重要；
对于需要依赖固定高度实现切换动画效果的交互，应尽量保证滚动条在页面顶部时处理。必要时做出一些牺牲，舍弃部分影响用户使用流畅的交互；
尽量使用浏览器原生支持代替iScroll；
如果必须使用iScroll才能实现的功能，一定要控制在最小范围，不要在常用场景应用iScroll；
虽然iScroll在iOS下表现得非常出色，但是都应当尽量使用浏览器原生支持特性来实现功能，这样才能最大化保证交互操作的流畅性。
很长一段时间都有一个争论，有页面跳转是不是WebApp？我认为单独讨论single page webapp还是页面跳转是没有意义的，所有产品都是建立在用户需求之上。对于现有的single page webapp产品，浏览器没有准备好，硬件配置也没有准备好，函数运算效率、页面渲染都跟不上，尤其是Android设备。基于用户需求出发，一些意识形态的东西该抛弃就抛弃，放开的使用页面跳转，只要能让程序运行流畅的东西，就应该毫不犹豫的使用。
但凡事也没有绝对，在一定的功能范围之内，也可以使用炫一些的切换动画，在一个页面实现多个子功能。
基于以上对移动端浏览器混乱程度的理解，移动web产品要做到全平台适配，工作量无遗是巨大的，并且，由于HTML5的支持程度，也会导致大部分低端用户无法使用到一些高级特性，或表现效果不佳。而且，没必要为了适应低端Android用户让高端iOS用户也忍受着简陋无比的交互及界面。那么，将iOS、Android、Windows Phone分为不同的版本，做相应的功能适配还是很有必要的。
在iOS下，自由度比较高，能随意发挥，很多有创意的交互及设计，都能在Safari下表现得比较好；
Android下由于设备硬件配置及浏览器版本差异比较大，就会选择相应保守的方式，舍弃部分影响用户使用流畅的交互，以及影响页面渲染的界面设计；
对于Windows Phone我们是从WP8起步，这样会更好做浏览器兼容。 做分版本适配的目的，是为了在保证功能交互的前提下让每个用户都能得到最流畅的操作体验。
用原生控件做外壳和交互，保证流畅的用户体验和完整的推广渠道；使用HTML5来展示内容，保证内容的迅速迭代更新，即时响应用户需求。于是就诞生了Hybrid  App，这也是目前最流行最合适的一种App形式。
下面提出我个人的建议：
如果你的团队刚刚组建或者框架知识了解不深入，那么开发移动端，使用单一的库就行了。
比如：jQuery mobile或Zepto。
使用jQuery mobile可以省略很多UI设计或者说重构的一些工作，在公司团队中，如果没有这方面的成员时，可以使用此库。但是此库性能不好，兼容性一般，UI限制大，请慎重使用。
使用Zepto开发，性能上最好的，而兼容性比较好，跟jQuery有同样的API，只是需要自己设计UI，以及重构。touch功能上有一定的兼容性问题。推荐使用此库，这样你可以任意发挥你的想法。
如果你的团队具有一定的框架基础，像模块化开发的代表requirejs和seajs，那么，完全可以把这个项目进行模块化开发，把这两个库的任意一个加入到项目中，将对你项目的协同开发，以后的代码维护都将有很好的贡献。这两个库的学习成本不大，很容易上手。
如果你的团队，个个都是高手了，那么就可以进行mvc模式的开发了。在你的项目中，加入backbone+underscore，这是目前为止，最简单的mvc模式的开发组合。但是大家都知道，使用backbone，你就必须按照backbone的模式来进行项目的开发，具有一定的限制。也就是说，开发和维护，都需要了解backbone这个框架。
如果你的团队，个个是大牛的话，那么就可以使用angularjs或react了。这种模式的开发，现阶段是前端开发的最新研究成果了。此种框架，学习成本大，但是代表着公司的实力和创新。
当然，除了以上这些基础库和基础框架，我们可能还需要添加一些第三方库，比如iscroll，此库兼容性好，唯一缺点就是在低端设备上，会卡，所以项目不能全局使用iscroll实现滚动效果。我们需要添加原生的scroll来实现项目中的滚动效果，如果使用原生scroll不能实现的，那么才使用iscroll来实现。
比如：faskClick，它解决点击事件延迟的bug，当然zepto的touch模块也可以解决。
比如：模板引擎，像underscore，handlerbars等。
比如：HTML5的application cache本地缓存机制。
移动开发总结：
（1）jQuery mobile或者Zepto+自己设计UI
（2）seajs或requirejs+Zepto
（3）seajs或requirejs+Zepto+Backbone+underscore
（4）angularjs或react
我个人希望能够使用第三种，然后项目成熟了，再使用第四种。毕竟新技术的实践，还是很有想象空间的。
当然，如果对技术不需要深入，只要实现功能，那么使用第二种我觉得还是不错的。 至于第一种，我个人觉得模块化开发还是非常必要的，之前在公司里面看之前的前端负责人开发的一套系统，代码写的太混乱了，简直看不得，维护起来非常不方便，所以模块化开发，我个人觉得，必须使用。
关于移动端的UI组件，我推荐腾讯的frontUI。百度的gmu很久没更新了，也没人维护了，而且耦合性比frontUI大，不推荐。
关于移动端的调试工具，我暂时只用过weinre。由于公司网络不行，我使用的是低版本的weinre，只支持safari调试，而且反应比较慢。但是，还是能够解决问题的，只是效率不高。网上有很多教程，百度一下就知道怎么用了。

广西南宁市2017-06-06 14:32:53

😊😊😅😅🎉😴🤯

#⁰

广西南宁市 2017-06-17 10:28

重写控制台console.log的方法

<script>window.log = console.log = (function (originFunc) {
  return function () {
    if (window.consoleParams && window.consoleParams.hideLog) return // 生产环境不显示log
    let showType
    let tempStr
    let resArgs
    let backgroundUrl
    let backgroundUrlArr = [
      'http://img.soogif.com/oTaaBm2f12ro2oHYt8MXO7ucTZ9LFDff.gif_s400x0',
      'http://i687.photobucket.com/albums/vv237/4-one/4-1/ICON-4/nhj-ks-114.gif',
      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2431180542,3208247057&fm=21&gp=0.jpg',
      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1389931060,999032458&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2349925870,4158861286&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1161084296,912592514&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=568429576,1662716019&fm=21&gp=0.jpg',
      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2891158369,689005317&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=523690750,3468977024&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1674189186,3858474740&fm=21&gp=0.jpg'
    ]
    let params = Array.prototype.slice.call(arguments) // 保存arguments数组，有push方法
    let color = window.consoleParams && window.consoleParams.color || '#58baff'
    let fontSize = window.consoleParams && window.consoleParams.fontSize || '12px'
    if (window.consoleParams && window.consoleParams.url) {
      backgroundUrl = window.consoleParams && window.consoleParams.url
    } else {
      backgroundUrl = backgroundUrlArr[parseInt(Math.floor(Math.random() * 10))]
    }
    let backgroundHeightSize = window.consoleParams && window.consoleParams.height || 50
    let iconStyle = 'line-height: ' + backgroundHeightSize + 'px; padding: ' + backgroundHeightSize / 2 + 'px 10px ' + backgroundHeightSize / 2 + 'px ' + backgroundHeightSize + 'px; color: ' + color + '; font-size: ' + fontSize + '; background: url(' + backgroundUrl + ') no-repeat left center; background-size: auto ' + backgroundHeightSize + 'px'
    let args = ['%c', iconStyle]
    if (!params.length) {
      args[0] = '%c ' + '(请输入要打印的值...)'
      resArgs = args
    } else {
      for (let p of params) {
        if (typeof p !== 'string' && typeof p !== 'number') {
          showType = 2
          break
        }
        showType = 1
      }
      if (showType === 1) {
        for (let i = 0; i < params.length; i++) {
          if (typeof params[i] === 'string') {
            params[i] = '"' + params[i] + '"'
          }
        }
        tempStr = params.join(' ')
        args[0] = '%c ' + tempStr
        resArgs = args
      } else {
        resArgs = args.concat(params)
      }
    }
    originFunc.apply(console, resArgs)
  }
})(console.log);log(123);</script>

重写 console.log 方法，让枯燥编码多一丝乐趣。

use

console.log() or log()

params

window.consoleParams = {

hideLog: , // default false

color: '', // default '#58baff'

fontSize: '', // default '12px'

height: , // default 50

backgroundUrl: '', // default Array

}

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。