#1350
展开↯#1351
作者：广西南宁市
base64编码的图片上传到服务器
function base64_upload($base64) {
$base64_image = str_replace(' ', '+', $base64);
//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
//匹配成功
if($result[2] == 'jpeg'){
$image_name = uniqid().'.jpg';
//纯粹是看jpeg不爽才替换的
}else{
$image_name = uniqid().'.'.$result[2];
}
$image_file = "./upload/test/{$image_name}";
//服务器文件存储路径
if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))){
return $image_name;
}else{
return false;
}
}else{
return false;
}
}Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:19:45
#1352
作者：广西南宁市
简单的html5 File base64 图片上传服务器代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
}
function readFile(){
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
console.log();
reader.onload = function(e){
result.innerHTML = this.result;
img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
}
}
</script>
</head>
<body>
<form action="file.php" method="post">
<input type="file" value="sdgsdg" id="demo_input" />
<textarea name="img" id="result" rows=30 cols=300></textarea>
<p id="img_area"></p>
<input type="submit" value="提交">
</form>
</body>
</html>Run code
Cut to clipboard
<?php
$base64_url=$_POST['img'];
$base64_body = substr(strstr($base64_url,','),1);
$data= base64_decode($base64_body );
file_put_contents('1.jpg',$data);
//或$image = imagecreatefromstring($data);
?>Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:15:34
#1353
作者：广西南宁市
html5将图片转换base64进行上传、应该能解决微信内置浏览器上传图片
function readFile(obj){
var file = obj.files[0];
//判断类型是不是图片
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
alert(this.result); //就是base64
}
}
<input type="file" id="picFile" onchange="readFile(this)" /> Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:14:04
#1355
作者：广西南宁市
js获取剪贴板内容【仅兼容ie】
<html>
<head>
<title>读取剪贴板内容</title>
<script type="text/javascript">
function getClipboard() {
if (window.clipboardData) {
return (window.clipboardData.getData('Text'));
}
else if (window.netscape) {
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
clip.getData(trans, clip.kGlobalClipboard);
var str = new Object();
var len = new Object();
try {
trans.getTransferData('text/unicode', str, len);
}
catch (error) {
return null;
}
if (str) {
if (Components.interfaces.nsISupportsWString) str = str.value.QueryInterface(Components.interfaces.nsISupportsWString);
else if (Components.interfaces.nsISupportsString) str = str.value.QueryInterface(Components.interfaces.nsISupportsString);
else str = null;
}
if (str) {
return (str.data.substring(0, len.value / 2));
}
}
return null;
}
function readClipboardData() {
var str = getClipboard();
var len = str.split("\n");//获取行数
document.getElementById("txtContent").value = str;
}
</script>
</head>
<body>
<input type="button" value="读取剪贴板内容" onclick="readClipboardData();" />
<br />
<textarea rows="20" cols="60" id="txtContent"></textarea>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 16:39:57
#1356
作者：广西南宁市
js禁止粘贴事件onpaste；在文本框中加入
onpaste="return false"Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 16:17:13
#1357
作者：广西南宁市
加油吧，不要因为走了太远，而忘记当初为什么出发~
少刷点论坛，知乎，新闻之类的，这些碎片化的信息，我不敢说一定有负面影响。但是理性的说，这些东西对你加薪，幸福感之类的毫无帮助。
另外找点认知心理学类的书籍看看，有助于纠正你的一些认知错误，逻辑错误，心态慢慢变积极起来，一旦心态不那么消极了。人际交往，金钱什么的反而变得不是那么难了。
少刷点论坛，知乎，新闻之类的，这些碎片化的信息，我不敢说一定有负面影响。但是理性的说，这些东西对你加薪，幸福感之类的毫无帮助。
另外找点认知心理学类的书籍看看，有助于纠正你的一些认知错误，逻辑错误，心态慢慢变积极起来，一旦心态不那么消极了。人际交往，金钱什么的反而变得不是那么难了。
文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事 发表时间：2017-06-07, 15:36:35
#1358
作者：广西南宁市
薛忆沩：出租车司机
出租车司机将车开进公司的停车场。他发现他的车位已经被人占用了。他没有去留心那辆车的车牌。他看到北面那一排有一个空位。他将车开过去，停好。出租车司机从车里面钻出来，他环顾了一下四周。然后，他走到车的尾部，把车的后盖打开，把那只装有一些零散东西的背包拿出来。接着，他又把车的后盖轻轻盖上。他轻轻说了一句什么，并且在车的后盖上轻轻拍了两下。然后，他抬起头来。有一滴雨正好滴落到他的脸上。
出租车司机平时遇到有人占用了他的车位，一定会清楚地记下那辆车的车牌。他会在下一次出车的时候，呼叫开那辆车的同事，“你他妈怎么回事？！”他会恶狠狠地骂。但是刚才出租车司机没有去留心那辆车的车牌。他走进值班室，将车钥匙交给正在值班的那个老头。老头胆怯地看了出租车司机一眼，马上又侧过脸去，好像怕出租车司机看到他的表情。出租车司机迟疑了一下，然后用手轻轻拍了拍老头的肩膀。老头顿时激动起来。他用颤抖的声音说：“她们真可怜啊。”
出租车司机好像没有听到老头说的话。他很平静地转身，走了出去。但是，老头大声叫住了他。他停下来。他回过头去。
老头从值班室的窗口探出头，大叫着说：“经理让你星期四来办手续。”
“知道了。”出租车司机低声回答说，好像是在自言自语。
雨没有能够落下来。空气显得十分沉闷。出租车司机沿着贯穿整个城市的那条马路朝他住处的方向走。现在高峰期还没有过去，马路上的车还很多。不少的车都打开了远光灯，显得非常刺眼。
出租车司机横过两条马路，走进了全市最大的那家意大利薄饼店。刚才就是在这家薄饼店的门口，那个女人坐进了他的出租车。这时候，整个薄饼店里只有两个顾客。在这座热闹的城市里，意大利薄饼店总是冷冷清清的。这正是出租车司机此刻需要的环境。此刻他需要宁静。
出租车司机要了一个大号的可乐和一个他女儿最爱吃的那种海鲜口味的薄饼。在点要这种薄饼的时候，出租车司机的眼眶突然湿了。服务员提醒了三次，他才意识到自己还没有付钱。他匆匆忙忙把钱递过去，并且有点激动地说：“对不起。”
出租车司机在靠窗边的一张桌子旁坐下。他的女儿有时候就坐在他的对面。她总是在薄饼刚送上来的时候急急忙忙去咬一口，烫得自己倒抽一口冷气。然后，她会翻动一下自己小小的眼睛，不好意思地笑一笑。从这个位置，出租车司机可以看到繁忙的街景，看到马路上川流不息的车队。这就是十五年来，他生活于其中的环境。他熟悉这样的环境。每天他都开着出租车在这繁忙的街景中穿梭。他习惯了这样的环境。可是几天前他突然对这环境感到隔膜了。他突然不习惯了。刚才他没有去留意占用了他的车位的那辆车的车牌。他对停车场的环境也感到隔膜了。出租车司机已经不需要去留心并且记下那辆车的车牌了，因为他不会再有下一次出车的安排。在他将车开进停车场之前，他已经送走了自己出租车司机生涯中的最后一批客人。整个黄昏，出租车司机一直都在担心马上就会下一场很大的雨。出租车的雨刮器坏了，如果遇上大雨，他就不得不提早结束这最后一天的工作。出租车司机不想提早结束这最后一天的工作。他也许还有点留恋他的职业，或者留恋陪伴了他这么多年的出租车？出租车司机如愿以偿：他担心的雨并没有落下来。只是在停车场里，在他向出租车告别之后的一刹那，有一滴雨正好滴落到了他的脸上。
出租车司机擦去眼眶中的泪水。他深深地吸了一口可乐。他好像又看见了那个表情沉重的女人。她坐进了出租车。他问她要去哪里。她要他一直往前开。出租车司机有点迷惑，他问那个女人到底要去哪里。她还是要他一直往前开。
出租车司机从后视镜里瞥了那个女人一眼。她的衣着很庄重，她的表情很沉重。她显然正在思考着什么事情。不一会，电话铃声响了。那个女人好像知道电话铃声会在那个时刻响起来。她很从容地从手提包里取出手提电话。她显然很不高兴电话铃声打断了她的思考。“是的，我已经知道了。”她对着手提电话说。出租车司机又从后视镜里瞥了她一眼。
“这有什么办法！”那个女人对着手提电话说。
出租车司机从这简单的回答里听出了她的伤感。
“也许只能这样。”那个女人对着手提电话说。
出租车司机注意到她将脸侧了过去，朝着窗外。
“我并不想这样。”那个女人对着手提电话说。
出租车司机有了一阵迷惘的好奇。他开始想象是一个什么样的人给他的乘客打来了这个让她伤感的电话。
“这不是你能够想象得出来的。”那个女人对着手提电话说。
是的，出租车司机想象不出来。他开始觉得那应该是一个男人。可是，他马上又觉得，那也完全可能是一个女人。最后他甚至想，那也许是一个孩子呢？这最后的想法让他的方向盘猛烈地晃动了一下。
“你完全错了。”那个女人对着手提电话说。
出租车司机想到了自己的女儿。一个星期以来，接听所有电话的时候，他都希望奇迹般地听到来自另外一个世界的童音。他不知道他的女儿还会不会给他打来电话，那个他绝望地想象着的电话。
“不会的。”那个女人对着手提电话说。
出租车司机迷惑不解地瞥了一眼后视镜。他注意到了那个女人很性感的头发。
“你不会明白的。”那个女人对着手提电话说。
出租车司机减慢了车速，他担心那个女人因为接听电话而错过了目的地。
“这是多余的担心。”那个女人对着手提电话说。
她果断的声音让出租车司机觉得非常难受。他很想打断她一下，问她到底要去哪里。
“我会告诉你的。”那个女人对着手提电话说。她显然有点厌倦了说话。她极不耐烦地向打来电话的人道别。然后，她很从容地将手提电话放回到手提包里。她看了一下手表，又看了一眼出租车上的钟。她的表情还是那样沉重。“过了前面的路口找一个地方停下来。”她冷冷地说。
出租车司机如释重负。他猛地加大油门，愤怒地超过了一直拦在前面的那辆货柜车。
出租车刚停稳，那个女人就递过来一张一百元的钞票。然后，她推开车门，下车走了。出租车司机大喊了几声，说还要找钱给她。可是，那个女人没有停下来。她很性感的头发让出租车司机感到一阵罕见的孤独。
出租车司机本来把那个女人当成他的最后一批客人。几次从后视镜里打量她的时候，他都是这样想的。他想她就是他的最后一批客人。他很高兴自己出租车司机生涯中最后的客人用他只能听到一半的对话激起了他的想象和希望。可是，在他想叫住这最后的客人，将几乎与车费相当的钱找回给她的时候，另一对男女坐进了他的出租车。他们要去的地方正好离出租车公司的停车场不远。出租车司机犹豫了一下，但是他没有拒绝他们。
那一对男女很在意他们彼此之间的距离。出租车司机一开始就注意到了这一点。他还注意到了那个男人几次想开口说话，却都被那个女人冷漠的表情阻止。高峰期的交通非常混乱，有几个重要的路段都发生了交通事故。最严重的一起发生在市中心广场的西北角。出租车在那里被堵了很久。当它好不容易绕过了事故现场之后，那个男人终于冲破了那个女人冷漠的防线。“有时候，我会很留恋……”他含含糊糊地说。
“有时候？”女人生硬地说，“有什么好留恋的！”
女人的回应令男人激动起来。“真的。”他伤感地说，“一切都好像是假的。”
“真的怎么又好像是假的？！”女人的语气还是相当生硬。
马路还是非常堵塞，出租车的行进仍然相当艰难。出租车司机有了更多的悠闲。但是，他提醒自己不要总是去打量后视镜。他故意强迫自己去回想刚才的那个女人。他想那个打电话给她的人一定不是一个孩子，因为她的表情始终都那样沉重，她的语气始终都那样冷漠。这种想法让出租车司机有点气馁。一个星期以来，他一直在等待着来自另外一个世界的童音，那充满活力的童音。
后排的男人和女人仍然在艰难地进行着对话。男人的声音很纤细，女人的声音很生硬。
“我真的不懂为什么……”
“你从来都没有懂过。”
“其实……”
“其实就是这样，你永远也不会懂的。”
“难道就不能够再想一想别的办法了吗？”
“难倒还能够再想什么别的办法吗？”
因为男人的声音很纤细，这场对话始终没有转变成争吵。这场对话也始终没有任何的进展，它总是被女人生硬的应答堵截在男人好不容易找到的起点。“你不要以为……”男人最后很激动地说，他显然还在试图推进这场无法推进的对话。
“我没有以为。”女人生硬地回应说，又一次截断了男人的表达。
出租车司机将档位退到空档上，脚尖轻轻地踩住了刹车。出租车在那一对男女说定的地点停稳。那个女人也递过来一张一百元的纸币。出租车司机回头找钱给她的时候，发现她的脸上布满了泪水。
出租车司机将一张纸巾递给他的女儿。“擦擦你的脸吧。”他不大耐烦地说。大多数时候，她就坐在他的对面。她的脸上粘满了意大利薄饼的配料。出租车司机一直是一个很粗心的人。他从来就不怎么在意女儿的表情，甚至也不怎么在意女儿的存在。同样，他也从来不怎么在意妻子的表情以及妻子的存在。他很粗心。他从来没有想象过她们会“不”存在。可是，她们刹那间就不存在了。这生活中突然出现的空白令出租车司机突然发现了与她们一起分享的过去。一个星期以来，他沉浸在极深的悲痛和极深的回忆之中。他的世界突然失去了最本质的声音，突然变得难以忍受地安静。而他的思绪却好像再也无法安静下来了。他整夜整夜地失眠。那些长期被他忽略的生活中的细节突然变得栩栩如生。它们不断地冲撞他的感觉。他甚至没有勇气再走进自己的家门了。他害怕没有家人的“家”。他害怕无情的空白和安静会窒息他对过去的回忆。出租车司机一个星期以来突然变成了一个极为细心的人，往昔在他的心中以无微不至的方式重演。
出租车司机知道自己的这种精神状态非常危险。他向公司递交了辞职报告。一个星期以来，他总是看到自己的女儿和妻子。她们邀请他回到他们共同的过去。从前那种他不怎么在意的生活一下子变得有声有色了。他用细腻的回忆体会她们的表情和存在。他不想放过生活中的任何一个细节。当然，他不愿意看到她们突然出现在出租车的前面。她们惊恐万状的神情会令出租车司机措手不及。他会重重地踩下了刹车。可是，那肯定为时已晚。出租车司机会痛苦莫及。他痛苦莫及。他误以为自己就是那不可饶恕的肇事者。他陷入了深深的自责。直到又有货柜车出现在他的视野之中，出租车司机才会重新被事故的真相触怒，将自己从自责的漩涡中解救出来。他会愤怒地加大油门，从任何一辆货柜车旁边愤怒地超过去。那辆运送图书的货柜车从他的女儿和妻子身上辗过的时候，出租车司机正在去广州的路上。雇他跑长途的客人很慷慨，付给了他一个前所未有的好价钱。
出租车司机在紊乱的思绪中吃完了意大利薄饼。他觉得自己的吃相与女儿的非常相像。他的妻子总是在一旁开心地取笑他们。出租车司机吸干净最后一点可乐之后，将纸杯里的冰块掏出来，在桌面上摆成一排。这是他女儿很喜欢玩的游戏。他不忍心去打量那一排冰块。他轻轻地闭上了眼睛。尽管如此，他仍然看到了女儿纤弱的手指在桌面上移动。那是毫无意义的移动。那又是充满意义的移动。出租车司机将脸侧过去。他睁开眼睛，茫然地张望着窗外繁忙的街景。这熟悉的街景突然变得如此陌生了，陌生得令他心酸。他过去十五年夜以继日的穿梭竟然没有在这街景中留下任何的痕迹。
出租车司机清楚地知道自己不可能在如此陌生的城市里继续生活下去。他决定回到家乡去，去守护和陪伴他年迈的父亲和母亲。他相信只有在他们的身旁，自己亢奋的思绪才可能安静下来。他离开他们已经十五年了。他的重现对他们来说也许更像是他的死而复生。他很高兴自己能够给他们带来那种奇迹般的享受。他甚至幻想十五年之后，他的女儿和妻子也会这样奇迹般地回到他的身边来。他决定回到自己的家乡去。他希望在那里能够找回他生活的意义和他需要的宁静。
最后的那两批客人给了出租车司机一点信心。他惊喜地发现自己对生活仍然还有一点好奇。他的听觉被极度的悲伤磨损了，却并没有失去最基本的功能。他还能够听到别人的声音，他还在好奇别人的声音。是的，他其实也听到了公司值班室的老头激动地说出来的那句话。他说：“她们真可怜啊。”当时，出租车司机的身体颤抖了一下。但是，他没有做出任何反应。他很平静地转身，走出了值班室，好像没有听到老头揪心的叹惜。他害怕听到。他害怕他自己。他已经决定要告别自己熟悉的生活了。他要拒绝同情的挽留。星期四办完手续，他就不再是出租车司机了。他决定回到自己的家乡去，去守护和陪伴他年迈的父亲和母亲。
出租车司机将脸从陌生的街景上移开。前方不远处坐着的一对母女好像并没有引起他的注意。他盯着眼前的桌面。他发现刚才的那一排冰块已经全部溶化了。他动情地抚摸着溶化在桌面上的冰水，好像是在抚摸缥缈的过去。突然，他的指尖碰到了他女儿的指尖。他立刻听到了她清脆的笑声。接着，他还听到了他妻子的提问，她问她为什么笑得那样开心。他们的女儿没有回答。她用娇嫩的指尖顶住了他的指尖，好像在邀请他跟她玩那个熟悉的游戏。他接受了她的邀请，也用指尖顶住了她的指尖。她的指尖被他顶着在冰水中慢慢地后退，一直退到了桌面的边沿。在最后的一刹那，出租车司机突然有大难临头的感觉。他想猛地抓住他女儿的小手，那活泼和淘气的小手。但是，他没有能够抓住。
出租车司机知道这是他最后的机会。他没有抓住。他也知道这是他与他女儿在这座城市的最后一次相遇和最后一次相处。他永远也不会再接触到这块桌面了。他永远也不会再回到这座城市里来了。对这座他突然感到陌生的城市来说，他已经随着他的女儿和妻子一起离去和消失了。这种“一起”的离去和消失让出租车司机感到了一阵他从来没有感到过的宁静，纯洁无比的宁静。这提前出现的神圣感觉使出租车司机激动得放声大哭起来。
出租车司机将车开进公司的停车场。他发现他的车位已经被人占用了。他没有去留心那辆车的车牌。他看到北面那一排有一个空位。他将车开过去，停好。出租车司机从车里面钻出来，他环顾了一下四周。然后，他走到车的尾部，把车的后盖打开，把那只装有一些零散东西的背包拿出来。接着，他又把车的后盖轻轻盖上。他轻轻说了一句什么，并且在车的后盖上轻轻拍了两下。然后，他抬起头来。有一滴雨正好滴落到他的脸上。
出租车司机平时遇到有人占用了他的车位，一定会清楚地记下那辆车的车牌。他会在下一次出车的时候，呼叫开那辆车的同事，“你他妈怎么回事？！”他会恶狠狠地骂。但是刚才出租车司机没有去留心那辆车的车牌。他走进值班室，将车钥匙交给正在值班的那个老头。老头胆怯地看了出租车司机一眼，马上又侧过脸去，好像怕出租车司机看到他的表情。出租车司机迟疑了一下，然后用手轻轻拍了拍老头的肩膀。老头顿时激动起来。他用颤抖的声音说：“她们真可怜啊。”
出租车司机好像没有听到老头说的话。他很平静地转身，走了出去。但是，老头大声叫住了他。他停下来。他回过头去。
老头从值班室的窗口探出头，大叫着说：“经理让你星期四来办手续。”
“知道了。”出租车司机低声回答说，好像是在自言自语。
雨没有能够落下来。空气显得十分沉闷。出租车司机沿着贯穿整个城市的那条马路朝他住处的方向走。现在高峰期还没有过去，马路上的车还很多。不少的车都打开了远光灯，显得非常刺眼。
出租车司机横过两条马路，走进了全市最大的那家意大利薄饼店。刚才就是在这家薄饼店的门口，那个女人坐进了他的出租车。这时候，整个薄饼店里只有两个顾客。在这座热闹的城市里，意大利薄饼店总是冷冷清清的。这正是出租车司机此刻需要的环境。此刻他需要宁静。
出租车司机要了一个大号的可乐和一个他女儿最爱吃的那种海鲜口味的薄饼。在点要这种薄饼的时候，出租车司机的眼眶突然湿了。服务员提醒了三次，他才意识到自己还没有付钱。他匆匆忙忙把钱递过去，并且有点激动地说：“对不起。”
出租车司机在靠窗边的一张桌子旁坐下。他的女儿有时候就坐在他的对面。她总是在薄饼刚送上来的时候急急忙忙去咬一口，烫得自己倒抽一口冷气。然后，她会翻动一下自己小小的眼睛，不好意思地笑一笑。从这个位置，出租车司机可以看到繁忙的街景，看到马路上川流不息的车队。这就是十五年来，他生活于其中的环境。他熟悉这样的环境。每天他都开着出租车在这繁忙的街景中穿梭。他习惯了这样的环境。可是几天前他突然对这环境感到隔膜了。他突然不习惯了。刚才他没有去留意占用了他的车位的那辆车的车牌。他对停车场的环境也感到隔膜了。出租车司机已经不需要去留心并且记下那辆车的车牌了，因为他不会再有下一次出车的安排。在他将车开进停车场之前，他已经送走了自己出租车司机生涯中的最后一批客人。整个黄昏，出租车司机一直都在担心马上就会下一场很大的雨。出租车的雨刮器坏了，如果遇上大雨，他就不得不提早结束这最后一天的工作。出租车司机不想提早结束这最后一天的工作。他也许还有点留恋他的职业，或者留恋陪伴了他这么多年的出租车？出租车司机如愿以偿：他担心的雨并没有落下来。只是在停车场里，在他向出租车告别之后的一刹那，有一滴雨正好滴落到了他的脸上。
出租车司机擦去眼眶中的泪水。他深深地吸了一口可乐。他好像又看见了那个表情沉重的女人。她坐进了出租车。他问她要去哪里。她要他一直往前开。出租车司机有点迷惑，他问那个女人到底要去哪里。她还是要他一直往前开。
出租车司机从后视镜里瞥了那个女人一眼。她的衣着很庄重，她的表情很沉重。她显然正在思考着什么事情。不一会，电话铃声响了。那个女人好像知道电话铃声会在那个时刻响起来。她很从容地从手提包里取出手提电话。她显然很不高兴电话铃声打断了她的思考。“是的，我已经知道了。”她对着手提电话说。出租车司机又从后视镜里瞥了她一眼。
“这有什么办法！”那个女人对着手提电话说。
出租车司机从这简单的回答里听出了她的伤感。
“也许只能这样。”那个女人对着手提电话说。
出租车司机注意到她将脸侧了过去，朝着窗外。
“我并不想这样。”那个女人对着手提电话说。
出租车司机有了一阵迷惘的好奇。他开始想象是一个什么样的人给他的乘客打来了这个让她伤感的电话。
“这不是你能够想象得出来的。”那个女人对着手提电话说。
是的，出租车司机想象不出来。他开始觉得那应该是一个男人。可是，他马上又觉得，那也完全可能是一个女人。最后他甚至想，那也许是一个孩子呢？这最后的想法让他的方向盘猛烈地晃动了一下。
“你完全错了。”那个女人对着手提电话说。
出租车司机想到了自己的女儿。一个星期以来，接听所有电话的时候，他都希望奇迹般地听到来自另外一个世界的童音。他不知道他的女儿还会不会给他打来电话，那个他绝望地想象着的电话。
“不会的。”那个女人对着手提电话说。
出租车司机迷惑不解地瞥了一眼后视镜。他注意到了那个女人很性感的头发。
“你不会明白的。”那个女人对着手提电话说。
出租车司机减慢了车速，他担心那个女人因为接听电话而错过了目的地。
“这是多余的担心。”那个女人对着手提电话说。
她果断的声音让出租车司机觉得非常难受。他很想打断她一下，问她到底要去哪里。
“我会告诉你的。”那个女人对着手提电话说。她显然有点厌倦了说话。她极不耐烦地向打来电话的人道别。然后，她很从容地将手提电话放回到手提包里。她看了一下手表，又看了一眼出租车上的钟。她的表情还是那样沉重。“过了前面的路口找一个地方停下来。”她冷冷地说。
出租车司机如释重负。他猛地加大油门，愤怒地超过了一直拦在前面的那辆货柜车。
出租车刚停稳，那个女人就递过来一张一百元的钞票。然后，她推开车门，下车走了。出租车司机大喊了几声，说还要找钱给她。可是，那个女人没有停下来。她很性感的头发让出租车司机感到一阵罕见的孤独。
出租车司机本来把那个女人当成他的最后一批客人。几次从后视镜里打量她的时候，他都是这样想的。他想她就是他的最后一批客人。他很高兴自己出租车司机生涯中最后的客人用他只能听到一半的对话激起了他的想象和希望。可是，在他想叫住这最后的客人，将几乎与车费相当的钱找回给她的时候，另一对男女坐进了他的出租车。他们要去的地方正好离出租车公司的停车场不远。出租车司机犹豫了一下，但是他没有拒绝他们。
那一对男女很在意他们彼此之间的距离。出租车司机一开始就注意到了这一点。他还注意到了那个男人几次想开口说话，却都被那个女人冷漠的表情阻止。高峰期的交通非常混乱，有几个重要的路段都发生了交通事故。最严重的一起发生在市中心广场的西北角。出租车在那里被堵了很久。当它好不容易绕过了事故现场之后，那个男人终于冲破了那个女人冷漠的防线。“有时候，我会很留恋……”他含含糊糊地说。
“有时候？”女人生硬地说，“有什么好留恋的！”
女人的回应令男人激动起来。“真的。”他伤感地说，“一切都好像是假的。”
“真的怎么又好像是假的？！”女人的语气还是相当生硬。
马路还是非常堵塞，出租车的行进仍然相当艰难。出租车司机有了更多的悠闲。但是，他提醒自己不要总是去打量后视镜。他故意强迫自己去回想刚才的那个女人。他想那个打电话给她的人一定不是一个孩子，因为她的表情始终都那样沉重，她的语气始终都那样冷漠。这种想法让出租车司机有点气馁。一个星期以来，他一直在等待着来自另外一个世界的童音，那充满活力的童音。
后排的男人和女人仍然在艰难地进行着对话。男人的声音很纤细，女人的声音很生硬。
“我真的不懂为什么……”
“你从来都没有懂过。”
“其实……”
“其实就是这样，你永远也不会懂的。”
“难道就不能够再想一想别的办法了吗？”
“难倒还能够再想什么别的办法吗？”
因为男人的声音很纤细，这场对话始终没有转变成争吵。这场对话也始终没有任何的进展，它总是被女人生硬的应答堵截在男人好不容易找到的起点。“你不要以为……”男人最后很激动地说，他显然还在试图推进这场无法推进的对话。
“我没有以为。”女人生硬地回应说，又一次截断了男人的表达。
出租车司机将档位退到空档上，脚尖轻轻地踩住了刹车。出租车在那一对男女说定的地点停稳。那个女人也递过来一张一百元的纸币。出租车司机回头找钱给她的时候，发现她的脸上布满了泪水。
出租车司机将一张纸巾递给他的女儿。“擦擦你的脸吧。”他不大耐烦地说。大多数时候，她就坐在他的对面。她的脸上粘满了意大利薄饼的配料。出租车司机一直是一个很粗心的人。他从来就不怎么在意女儿的表情，甚至也不怎么在意女儿的存在。同样，他也从来不怎么在意妻子的表情以及妻子的存在。他很粗心。他从来没有想象过她们会“不”存在。可是，她们刹那间就不存在了。这生活中突然出现的空白令出租车司机突然发现了与她们一起分享的过去。一个星期以来，他沉浸在极深的悲痛和极深的回忆之中。他的世界突然失去了最本质的声音，突然变得难以忍受地安静。而他的思绪却好像再也无法安静下来了。他整夜整夜地失眠。那些长期被他忽略的生活中的细节突然变得栩栩如生。它们不断地冲撞他的感觉。他甚至没有勇气再走进自己的家门了。他害怕没有家人的“家”。他害怕无情的空白和安静会窒息他对过去的回忆。出租车司机一个星期以来突然变成了一个极为细心的人，往昔在他的心中以无微不至的方式重演。
出租车司机知道自己的这种精神状态非常危险。他向公司递交了辞职报告。一个星期以来，他总是看到自己的女儿和妻子。她们邀请他回到他们共同的过去。从前那种他不怎么在意的生活一下子变得有声有色了。他用细腻的回忆体会她们的表情和存在。他不想放过生活中的任何一个细节。当然，他不愿意看到她们突然出现在出租车的前面。她们惊恐万状的神情会令出租车司机措手不及。他会重重地踩下了刹车。可是，那肯定为时已晚。出租车司机会痛苦莫及。他痛苦莫及。他误以为自己就是那不可饶恕的肇事者。他陷入了深深的自责。直到又有货柜车出现在他的视野之中，出租车司机才会重新被事故的真相触怒，将自己从自责的漩涡中解救出来。他会愤怒地加大油门，从任何一辆货柜车旁边愤怒地超过去。那辆运送图书的货柜车从他的女儿和妻子身上辗过的时候，出租车司机正在去广州的路上。雇他跑长途的客人很慷慨，付给了他一个前所未有的好价钱。
出租车司机在紊乱的思绪中吃完了意大利薄饼。他觉得自己的吃相与女儿的非常相像。他的妻子总是在一旁开心地取笑他们。出租车司机吸干净最后一点可乐之后，将纸杯里的冰块掏出来，在桌面上摆成一排。这是他女儿很喜欢玩的游戏。他不忍心去打量那一排冰块。他轻轻地闭上了眼睛。尽管如此，他仍然看到了女儿纤弱的手指在桌面上移动。那是毫无意义的移动。那又是充满意义的移动。出租车司机将脸侧过去。他睁开眼睛，茫然地张望着窗外繁忙的街景。这熟悉的街景突然变得如此陌生了，陌生得令他心酸。他过去十五年夜以继日的穿梭竟然没有在这街景中留下任何的痕迹。
出租车司机清楚地知道自己不可能在如此陌生的城市里继续生活下去。他决定回到家乡去，去守护和陪伴他年迈的父亲和母亲。他相信只有在他们的身旁，自己亢奋的思绪才可能安静下来。他离开他们已经十五年了。他的重现对他们来说也许更像是他的死而复生。他很高兴自己能够给他们带来那种奇迹般的享受。他甚至幻想十五年之后，他的女儿和妻子也会这样奇迹般地回到他的身边来。他决定回到自己的家乡去。他希望在那里能够找回他生活的意义和他需要的宁静。
最后的那两批客人给了出租车司机一点信心。他惊喜地发现自己对生活仍然还有一点好奇。他的听觉被极度的悲伤磨损了，却并没有失去最基本的功能。他还能够听到别人的声音，他还在好奇别人的声音。是的，他其实也听到了公司值班室的老头激动地说出来的那句话。他说：“她们真可怜啊。”当时，出租车司机的身体颤抖了一下。但是，他没有做出任何反应。他很平静地转身，走出了值班室，好像没有听到老头揪心的叹惜。他害怕听到。他害怕他自己。他已经决定要告别自己熟悉的生活了。他要拒绝同情的挽留。星期四办完手续，他就不再是出租车司机了。他决定回到自己的家乡去，去守护和陪伴他年迈的父亲和母亲。
出租车司机将脸从陌生的街景上移开。前方不远处坐着的一对母女好像并没有引起他的注意。他盯着眼前的桌面。他发现刚才的那一排冰块已经全部溶化了。他动情地抚摸着溶化在桌面上的冰水，好像是在抚摸缥缈的过去。突然，他的指尖碰到了他女儿的指尖。他立刻听到了她清脆的笑声。接着，他还听到了他妻子的提问，她问她为什么笑得那样开心。他们的女儿没有回答。她用娇嫩的指尖顶住了他的指尖，好像在邀请他跟她玩那个熟悉的游戏。他接受了她的邀请，也用指尖顶住了她的指尖。她的指尖被他顶着在冰水中慢慢地后退，一直退到了桌面的边沿。在最后的一刹那，出租车司机突然有大难临头的感觉。他想猛地抓住他女儿的小手，那活泼和淘气的小手。但是，他没有能够抓住。
出租车司机知道这是他最后的机会。他没有抓住。他也知道这是他与他女儿在这座城市的最后一次相遇和最后一次相处。他永远也不会再接触到这块桌面了。他永远也不会再回到这座城市里来了。对这座他突然感到陌生的城市来说，他已经随着他的女儿和妻子一起离去和消失了。这种“一起”的离去和消失让出租车司机感到了一阵他从来没有感到过的宁静，纯洁无比的宁静。这提前出现的神圣感觉使出租车司机激动得放声大哭起来。
文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事 发表时间：2017-06-07, 15:51:40
#1359
作者：广西南宁市
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
function sortNumbers(b,a)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write( "<br />"+arr.sort(sortNumber))
document.write( "<br />"+arr.sort(sortNumbers))
</script>Run code
Cut to clipboard
文章：JS的十大经典算法排序 发表时间：2017-06-07, 14:16:17
#1360
作者：广西南宁市
希尔排序貌似有问题
<script>
//arr=new Array('3','38','5','44','15','47','36','26','27','2','46','4','19','50','48');
arr=new Array(3,38,5,44,15,47,36,26,27,2,46,4,19,50,48);
function shellSort(arr) {
var len =arr.length;
gap = Math.floor(len/2);
while(gap!==0){
for(var i = gap;i<len;i++){
var temp = arr[i];
var j;
for(j=i-gap;j>=0&&temp<arr[j];j-=gap){
arr[j+gap] = arr[j];
}
arr[j+gap] = temp;
}
gap=Math.floor(gap/2);
}
return arr;
}
alert(shellSort(arr));
</script>Run code
Cut to clipboard
文章：JS的十大经典算法排序 发表时间：2017-06-07, 12:40:41
#1361
作者：广西南宁市
一个常见下拉菜单的样式 可恶的一体化小三角 纯css手写解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style>
.select {
margin: 50px 500px;
width: 180px;
text-align: center;
}
.select a {
color: #fff;
text-decoration: none;
}
.select ul,
.select li {
margin: 0;
padding: 0;
list-style: none;
}
.select span {
line-height: 46px;
background-color: #41b1d9;
display: block;
margin-bottom: 20px;
position: relative;
z-index: 2;
border-radius: 5px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.select span a:after{
content: " ";
display: inline-block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-bottom: solid 6px #fff;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
vertical-align: 1px;
margin-left: 10px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*给以整体的阴影和圆角 但是不能overflow*/
.drop {
left: 0;
right: 0;
top: -9999px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
position: absolute;
z-index: 1;
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*给送个下拉助攻*/
.select:hover span{
background-color: #1f93bc;
}
.select:hover span a:after{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.select:hover .drop{
position: static;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
/*一个很重要的三角形*/
.drop li:first-child:before {
content: " ";
font-size: 0;
line-height: 0;
margin: 0 auto;
display: block;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整体一样的投影*/
background-color: #fff;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了 但是要把下半部分藏起来*/
position: relative;
top: -5px; /*果断的露出上半部分*/
z-index: 1; /*果断的隐藏下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.drop li a {
color: #888;
line-height: 46px;
border-bottom: solid 1px #eee;
font-size: 14px;
display: block;
background-color: #fff; /*要有背景色才能盖住呀*/
position: relative;
z-index: 2; /*这里很重要 要挡住三角形的下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*以下两块 控制第一个和最后一个LI要圆角 因为最外边的div没有overflow 也不可以overflow*/
.drop li:first-child a{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: -10px;
}
.drop li:last-child a{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: none;
}
/*hover事件给了li 先改变三角 再改变a*/
.drop li:hover:before{
background-color: #41b1d9;
}
.drop li:hover a {
background-color: #41b1d9;
color: #fff;
}
</style>
</head>
<body>
<div class="select">
<span><a href="javascript:void(0);">鼠标浮上来</a></span>
<div class="drop">
<ul>
<li>
<a href="javascript:void(0);">下拉菜单一</a>
</li>
<li>
<a href="javascript:void(0);">下拉菜单二</a>
</li>
<li>
<a href="javascript:void(0);">下拉菜单三</a>
</li>
<li>
<a href="javascript:void(0);">下拉菜单四</a>
</li>
</ul>
</div>
</div>
</body>
</html>Run code
Cut to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style lang="en">
ul li{
list-style: none;
}
s{
margin-left: 500px;
position: absolute;
border-color: red transparent transparent;
border-style: solid dashed dashed;
border-width: 10px;
font-size: 0;
height: 0;
line-height: 0;
width: 0;
}
ul li:hover s{
-webkit-transform: rotate(180deg);
-webkit-transform-origin:50% 30% 0 ;
-webkit-transition: transform 0.2s ease-in;
}
</style>
</head>
<body>
<ul>
<li><s> </s></li>
</ul>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 09:57:56
#1362
作者：广西南宁市
transform实现照片墙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body, div, img {
margin: 0;
padding: 0;
}
img {
border: none;
}
html, body {
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
}
.box {
position: relative;
top: 50%;
left: 50%;
margin: -225px 0 0 -480px;
width: 960px;
height: 450px;
}
.box img {
position: absolute;
top: 0;
left: 0;
padding: 5px;
width: 250px;
max-height: 250px;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
z-index: 1;
cursor: pointer;
/*批量给所有的图片设置运动的方式*/
-webkit-transition: all 0.8s ease-in-out 0s;
transition: all 0.8s ease-in-out 0s;
}
/*让每一张图片的位置进行调整*/
.box img:nth-child(odd) {
top: 0;
left: 0;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.box img:nth-child(even) {
top: 0;
left: 0;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.box img:nth-child(1) {
top: 0;
left: 0;
}
.box img:nth-child(2) {
top: 0;
left: 250px;
}
.box img:nth-child(3) {
top: 0;
left: 500px;
}
.box img:nth-child(4) {
top: 0;
left: 750px;
}
.box img:nth-child(5) {
top: 120px;
left: 380px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.box img:nth-child(6) {
top: 250px;
left: 0px;
}
.box img:nth-child(7) {
top: 250px;
left: 250px;
}
.box img:nth-child(8) {
top: 250px;
left: 500px;
}
.box img:nth-child(9) {
top: 250px;
left: 750px;
}
/*给所有的图片增加过渡效果*/
.box img:hover {
z-index: 10; /*让其显示在最顶端的位置*/
box-shadow: 0 0 20px 0 #ff3333;
-webkit-transform: rotate(0deg) scale(1.5);
transform: rotate(0deg) scale(1.3);
}
</style>
</head>
<body>
<div class="box">
<img src="img/dog/dog1.jpg"/>
<img src="img/dog/dog2.jpg"/>
<img src="img/dog/dog3.jpg"/>
<img src="img/dog/dog4.jpg"/>
<img src="img/dog/dog5.jpg"/>
<img src="img/dog/dog6.jpg"/>
<img src="img/dog/dog7.jpg"/>
<img src="img/dog/dog8.jpg"/>
<img src="img/dog/dog9.jpg"/>
</div>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 10:00:32
#1363
作者：广西南宁市
dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);Run code
Cut to clipboard
简单粗暴的JavaScript的if 判断的正确打开方式
<!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>
Run code
Cut to clipboard
文章：JavaScript的if判断的四种书写方式 发表时间：2016-11-15, 12:07:00
#1364
作者：广西南宁市
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>Run code
Cut to clipboard
<!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>Run code
Cut to clipboard
文章：JavaScript的if判断的四种书写方式 发表时间：2017-06-06, 14:26:59
#1366
作者：广西南宁市
<canvas id="myCanvas" width="300" height="300" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
ctx.drawImage(img,30,30); //在画布坐标（30,30）的位置绘制图片
}
</script>Run code
Cut to clipboard
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
ctx.drawImage(img,30,30,250,150); //在画布坐标（30,30）的位置绘制一张宽度为250，高度为150的图片
}Run code
Cut to clipboard
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
ctx.drawImage(img,10,20,300,300,30,30,250,150); //在画布坐标（30,30）的位置绘制一张宽度为250、高度150的图片，这种图片是在img上坐标为（10,20）的位置所裁剪出来的宽高均为300的区域
}Run code
Cut to clipboard
HTML5- Canvas入门（五） - vajoy
如何让你的动画更自然
文章：HTML5之图片上传预处理缩略图预览 发表时间：2017-06-06, 17:23:08
#1367
作者：广西南宁市
根据：色环中任何两色混所得的新色与另一原色互为补色（也有称为相反色），也称余色。如绿与红、黄与紫、蓝与橙，皆属补色关系，绿的补色是红色，红的补色是绿色。
文章：jQuery仿Facebook网格图片画廊 发表时间：2017-06-06, 17:21:55
#1368
作者：广西南宁市
有选择的拿，为我所用的拿，不卑不亢的拿
—鲁迅《拿来主义》
—鲁迅《拿来主义》
文章：jQuery仿Facebook网格图片画廊 发表时间：2017-06-06, 11:28:31
首先来看一下HTML5的FileReader对象
方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
接口事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
下面是实现
javascript
function readAsDataURL(m_this,id){ if (typeof m_this.files == 'undefined' || typeof FileReader == 'undefined') { alert('当前浏览器不支持图片上传，请改用IE10以上或chrome等最新浏览器。'); return false; } if(!/image\/\w+/.test(m_this.files[0].type)){ alert("请上传图片！"); return false; } var reader = new FileReader(); reader.onload = function(e) { //this.result 返回结果 $(id).attr('src',this.result); //把结果放在img对象中，以备他用 var img = new Image(); img.src = result; } reader.readAsDataURL(m_this.files[0]); } //调用 $('#inputFile').on('change',function(){ var m_this = this; readAsDataURL(m_this,'#ImgPr'); })html
<img id="ImgPr" src=""/> <input type="file" class="" id="inputFile" >