JS指南



工具函数

生成一周时间

new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环

1
2
3
function getWeekTime(){
return [...new Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString())
}
1
2
返回从今天开始的后七天日期:
["2020/8/5", "2020/8/6", "2020/8/7", "2020/8/8", "2020/8/9", "2020/8/10", "2020/8/11"]

查询本周日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const dateOfToday = Date.now()
// 因为创建的daysOfThisWeek数组,索引为6就对应的星期天,故减一
// Date().getDay() 获取当天对应的星期
// date.getDate() 返回月份的某一天
// date.getFullYear() 返回一个年份
const dayOfToday = (new Date().getDay() + 7 - 1) % 7
const daysOfThisWeek = Array.from(new Array(7))
.map((_, i) => {
// date.getMonth():0=一月, 1=二月
const date = new Date(dateOfToday + (i - dayOfToday) * 1000 * 60 * 60 * 24)
return date.getFullYear() +
'-' +
String(date.getMonth() + 1).padStart(2, '0') +
'-' +
String(date.getDate()).padStart(2, '0')
})

防抖

性能优化方案,防抖用于减少函数请求次数,对于频繁的请求,只执行这些请求的最后一次。

基础版本

1
2
3
4
5
6
7
8
9
function debounce(func, wait = 300){
let timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(func.bind(this),wait);
}
}

改进版本添加是否立即执行的参数,因为有些场景下,我们希望函数能立即执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* @param {function} func - 执行函数
* @param {number} wait - 等待时间
* @param {boolean} immediate - 是否立即执行
* @return {function}
*/
function debounce(func, wait = 300, immediate = false){
let timer, ctx;
let later = (arg) => setTimeout(()=>{
func.apply(ctx, arg)
timer = ctx = null
}, wait)
return function(...arg){
if(!timer){
timer = later(arg)
ctx = this
if(immediate){
func.apply(ctx, arg)
}
}else{
clearTimeout(timer)
timer = later(arg)
}
}
}

使用

1
2
3
4
let scrollHandler = debounce(function(e){
console.log(e)
}, 500)
window.onscroll = scrollHandler

节流

性能优化方案,节流用于减少函数请求次数,与防抖不同,节流是在一段时间执行一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* @param {function} func - 执行函数
* @param {number} delay - 延迟时间
* @return {function}
*/
function throttle(func, delay){
let timer = null
return function(...arg){
if(!timer){
timer = setTimeout(()=>{
func.apply(this, arg)
timer = null
}, delay)
}
}
}

使用

1
2
3
4
let scrollHandler = throttle(function(e){
console.log(e)
}, 500)
window.onscroll = scrollHandler

base64数据导出文件下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* @param {string} filename - 下载时的文件名
* @param {string} data - base64字符串
*/
function downloadFile(filename, data){
let downloadLink = document.createElement('a');
if ( downloadLink ){
document.body.appendChild(downloadLink);
downloadLink.style = 'display: none';
downloadLink.download = filename;
downloadLink.href = data;
if ( document.createEvent ){
let downloadEvt = document.createEvent('MouseEvents');
downloadEvt.initEvent('click', true, false);
downloadLink.dispatchEvent(downloadEvt);
} else if ( document.createEventObject ) {
downloadLink.fireEvent('onclick');
} else if (typeof downloadLink.onclick == 'function' ) {
downloadLink.onclick();
}
document.body.removeChild(downloadLink);
}
}

检测是否为PC端浏览器

1
2
3
4
5
6
7
8
9
10
11
12
function isPCBroswer() {  
let e = window.navigator.userAgent.toLowerCase()
, t = "ipad" == e.match(/ipad/i)
, i = "iphone" == e.match(/iphone/i)
, r = "midp" == e.match(/midp/i)
, n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
, a = "ucweb" == e.match(/ucweb/i)
, o = "android" == e.match(/android/i)
, s = "windows ce" == e.match(/windows ce/i)
, l = "windows mobile" == e.match(/windows mobile/i);
return !(t || i || r || n || a || o || s || l)
}

识别浏览器及平台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function getPlatformInfo(){
//运行环境是浏览器
let inBrowser = typeof window !== 'undefined';
//运行环境是微信
let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
//浏览器 UA 判断
let UA = inBrowser && window.navigator.userAgent.toLowerCase();
if(UA){
let platforms = {
IE: /msie|trident/.test(UA),
IE9: UA.indexOf('msie 9.0') > 0,
Edge: UA.indexOf('edge/') > 0,
Android: UA.indexOf('android') > 0 || (weexPlatform === 'android'),
IOS: /iphone|ipad|ipod|ios/.test(UA) || (weexPlatform === 'ios'),
Chrome: /chrome\/\d+/.test(UA) && !(UA.indexOf('edge/') > 0),
}
for (const key in platforms) {
if (platforms.hasOwnProperty(key)) {
if(platforms[key]) return key
}
}
}
}

类型判断

判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

1
2
3
4
5
6
7
8
9
/**
* @param {any} target
* @param {string} type
* @return {boolean}
*/
function isType(target, type) {
let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
return targetType === type.toLowerCase()
}

使用

1
2
3
4
5
isType([], 'Array') // true
isType(/\d/, 'RegExp') // true
isType(new Date(), 'Date') // true
isType(function(){}, 'Function') // true
isType(Symbol(1), 'Symbol') // true

对象属性剔除

使用一个对象,但想移除部分属性时,可以使用该方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* @param {object} object
* @param {string[]} props
* @return {object}
*/
function omit(object, props=[]){
let res = {}
Object.keys(object).forEach(key=>{
if(props.includes(key) === false){
res[key] = typeof object[key] === 'object' && object[key] !== null ?
JSON.parse(JSON.stringify(object[key])):
object[key]
}
})
return res
}

使用

1
2
3
4
5
6
let data = {
id: 1,
title: 'xxx',
comment: []
}
omit(data, ['id']) // {title: 'xxx', comment: []}

日期格式化

一个很灵活的日期格式化函数,可以根据使用者给定的格式进行格式化,能应对大部分场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* @param {string} format
* @param {number} timestamp - 时间戳
* @return {string}
*/
function formatDate(format='Y-M-D h:m', timestamp=Date.now()){
let date = new Date(timestamp)
let dateInfo = {
Y: date.getFullYear(),
M: date.getMonth()+1,
D: date.getDate(),
h: date.getHours(),
m: date.getMinutes(),
s: date.getSeconds()
}
let formatNumber = (n) => n > 10 ? n : '0' + n
let res = format
.replace('Y', dateInfo.Y)
.replace('M', dateInfo.M)
.replace('D', dateInfo.D)
.replace('h', formatNumber(dateInfo.h))
.replace('m', formatNumber(dateInfo.m))
.replace('s', formatNumber(dateInfo.s))
return res
}

使用

1
2
3
formatDate() // "2020-2-24 13:44"
formatDate('M月D日 h:m') // "2月24日 13:45"
formatDate('h:m Y-M-D', 1582526221604) // "14:37 2020-2-24"

性能分析

Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能

performance.timing 包含延迟相关的性能信息

performance.memory 包含内存信息,是Chrome中添加的一个非标准扩展,在使用时需要注意

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = function(){
setTimeout(()=>{
let t = performance.timing,
m = performance.memory
console.table({
'DNS查询耗时': (t.domainLookupEnd - t.domainLookupStart).toFixed(0),
'TCP链接耗时': (t.connectEnd - t.connectStart).toFixed(0),
'request请求耗时': (t.responseEnd - t.responseStart).toFixed(0),
'解析dom树耗时': (t.domComplete - t.domInteractive).toFixed(0),
'白屏时间': (t.responseStart - t.navigationStart).toFixed(0),
'domready时间': (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0),
'onload时间': (t.loadEventEnd - t.navigationStart).toFixed(0),
'js内存使用占比': m ? (m.usedJSHeapSize / m.totalJSHeapSize * 100).toFixed(2) + '%' : undefined
})
})
}

转载微信公众号 - 前端潮咖

常用操作

JS时间格式化

  1. 假设今天是2020-04-20
1
2
3
4
5
6
7
const date = new Date('2020-04-20')
// 如果月份是单位数,就在前面拼接0
const month = (date.getMonth() + 1).toString().length === 1 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
// 返回现在的时间,格式为:2020-04-20
const nowTime = {
return: date.getFullYear() + '-' + month+ '-' + date.getDate()
}
  1. 时间函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
date.getFullYear() // 获得今年的完整年份,比如2020

date.getMonth() // 获得今年的月份,默认1月份为0,故要加1

date.getDate() // 获取当前日(1-31),比如20

date.getDay() // 获取当前星期X(0-6,0代表星期天)

date.getTime() //获取当前时间(从1970.1.1开始的毫秒数)

date.getHours() //获取当前小时数(0-23)

date.getMinutes() //获取当前分钟数(0-59)

date.getSeconds() //获取当前秒数(0-59)

date.getMilliseconds() //获取当前毫秒数(0-999)

date.toLocaleDateString() //获取当前日期

date.toLocaleTimeString() //获取当前时间

date.toLocaleString( ) //获取日期与时间

JS中String常用操作

1
2
3
4
5
JSON字符串:
var str = '{ "name": "cxh", "sex": "man" }';

JSON对象:
var str2 = { "name": "cxh", "sex": "man" };

1、JSON字符串转换为JSON对象

1
2
3
4
5
6
7
8
9
var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

3、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

1
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

在使用JSON.parse()的时候,返回来的数据 一定是严格的json格式,key值一定要用 双引号 包起来,否则浏览器就会抛出异常
另外,对于不标准的json字符串,如第一种示例,使用eval()虽然可以正常解析,但是从安全的角度来讲,一定要谨慎使用eval方法。规范json格式。

参考链接

JS中数组与String的转换

1
2
3
4
5
6
7
8
9
var arr = [1,2,3]
const str = arr.join('') // "123"
// 推荐
const str = arr.join(',') // "1,2,3"

const newArr = str.split() // 将String整体转换成数组,["1,2,3"]
const newArr = str.split('') // ,["1", ",", "2", ",", "3"]
// 推荐
const newArr = str.split(',') // 以逗号分隔,["1", "2", "3"]

jQuery的append拼接用法

隐藏与显示的转换

隐藏:display: none;如果不需要进去就隐藏,就可以使用hide()
显示:如果jQuery的话,可以使用。$(‘选择’).show()

toFixed 小数点后取余, spilt(“”)切割

近日实现如下功能,获取到的值前需要填充0,开始感觉有点绕,遂想记录下

1
2
3
4
5
6
7
8
9
10
function changeSpanValue(data, choiceClass) {
let arr = []
const length = data.COUNT.toString().length
arr = data.COUNT.toString().split("")
$(choiceClass).children().text(0)
for (let i = 0; i < length; i++) {
let choice = choiceClass + ' span:nth-child(' + (5 - i) + ')'
$(choice).text(arr[length - 1 - i])
}
}

主要思路:还是获取选择的class 和 data值,然后使用 spilt(“”)切割,切记添加’’ 或 “” ,才能正常切割为一个个字符串。
然后先所有的都填充为0,再循环从最后面的0依次赋值。

1
2
3
4
5
6
截取字符串
for (let i = 0; i < length; i++) {
arr.push(data.COUNT.toString().substring(i, i + 1))
}

arr = data.COUNT.toString().split("") //注意加 ""

随机数向下取整

toFixed:小数点后取余

1
2
Math.floor((Math.random() * 3))
// 结果:有0,1,2

JS拼接节点时赋值

1
2
3
4
5
// 函数中赋值单个
'<span class="declare active" onclick="toZwfwBszn(\'' + value.sxid + '\')">\n'

// 函数中赋值多个
'<span class="declare active" onclick="toZwfwBszn(\'' + value.sxid + '\', \''+value.deptcode+'\')">\n'

数组去重添加:应用多选框

1
2
3
4
5
6
7
8
9
10
11
12
var checkedIds = []
var notCheckedIds = []

// 也可以使用 includes()方法看是否包含值,boolean类型
if(checkedIds.indexOf(sxid) === -1) {
// 没有
checkedIds.push(sxid)
notCheckedIds.splice(notCheckedIds.indexOf(sxid))
} else {
checkedIds.splice(checkedIds.indexOf(sxid))
notCheckedIds.push(sxid)
}

js刷新iframe框

1
2
3
4
5
6
<iframe id="projectDetails" style=" width:100%; height: 100%;"
:src='curUrl' frameborder="0"></iframe>

var _body = window.parent;
var _iframe1 = _body.document.getElementById('iframe框的id');
_iframe1.contentWindow.location.reload(true);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 如果要设置过期时间以秒为单位
function setCookie(c_name, value, expireseconds) {
var exdate = new Date();
exdate.setTime(exdate.getTime() + expireseconds * 1000);
document.cookie =
c_name +
"=" +
escape(value) +
(expireseconds == null
? ""
: ";expires=" + exdate.toGMTString() + ";path=/");
}

// 函数中的参数为 要获取的cookie键的名称。
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}

if变量值判断

JavaScript中有为“假”:

isTrue
null false
undefined(未定义值) false
0(数值型) false
‘’(空字符串) (字符型) false
NaN false

JavaScript中有为“真”:

isTrue
对象 false

| 数组(包括 []) | false
| 集合(包括 {}) | false

插件

樱花下落特效

  1. 引入js
1
2
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
  1. Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>樱花下落特效</title>
<link rel="stylesheet" href="css/liMarquee.css">
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<!-- 文字走马灯特效 -->
<script src="js/jquery.liMarquee.js"></script>
</head>

<body>
<div style="height:900px; width:100%">
<div class="str1 str_wrap">
<p>我见过的最美的春天,是你穿过人群找到我的那个四月。🌹</p>
</div>
</div>
<script>

$(document).click(function () {
$(document).snowfall('clear');
})
$(document).dblclick(function () {
sakura()
})

function sakura() {
$(document).snowfall({
// 这里可以通过自定义下落的的图片
image: "sakura.png",
flakeCount: 50,
minSize: 20,
maxSize: 35,
minSpeed: 1,
maxSpeed: 2
})
}
setTimeout(() => {
sakura()
}, 1000);
</script>
</body>

</html>

bxslider滚动插件使用

  1. 引入js文件
1
2
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bxslider/4.2.10/jquery.bxslider.js"></script>
  1. Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<title>bxSlider使用</title>
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css" />
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bxslider/4.2.10/jquery.bxslider.js"></script>

<!--轮播-->
<div>
<div class="list_base" style="height:200px;overflow: hidden;">
<div class="t4_list_tit">
<span class="ssmc" style="width:38%;">企业名称 </span>
<span class="ssmc" style="width:18%;">行业类别</span>
<span class="xyd" style="width:15%;">申请人</span>
<span class="xyd" style="width:18%;">注册时间</span>
</div>
<ul id="t4_leftTabSlider">
</ul>
</div>
</div>

<script type="text/javascript">
const data = [{
NAME: '深圳通讯',
CATEGORIES: '软件',
PROPOSER: '小明',
CREATE_TIME: '2020-02-12',
},
{
NAME: '中讯科技',
CATEGORIES: '软件',
PROPOSER: '小红',
CREATE_TIME: '2021-02-12',
}
]
if (data && data.length > 0) {
console.log(data)
data.forEach(item => {
// const itemLi = '<li>' +
// '<span class="ssmc nameItem" style="width:38%;">' + item.NAME +'</span>' +
// '<span class="xyd categories" style="width:18%;">' + item.CATEGORIES +'</span>' +
// '<span class="xyd proposer" style="width:15%;position: relative;left: 2%;">' + item.PROPOSER +' </span>' +
// '<span class="xyd create_time" style="width:18%;position: relative;left: 3%;">' + item.CREATE_TIME +'</span>' +
// '</li>';

let itemLi = '<li>'
itemLi += '<span class="ssmc nameItem" style="width:38%;">' + item.NAME +'</span>'
itemLi += '<span class="xyd categories" style="width:18%;">' + item.CATEGORIES +'</span>'
itemLi += '<span class="xyd proposer" style="width:15%;position: relative;left: 2%;">' + item.PROPOSER +' </span>'
itemLi += '<span class="xyd create_time" style="width:18%;position: relative;left: 3%;">' + item.CREATE_TIME +'</span>'
itemLi += '</li>';

$('#t4_leftTabSlider').append(itemLi)
})

$(document).ready(function () {
$('#t4_leftTabSlider').bxSlider({
autoHover: false,
tickerHover: true,
mode: 'vertical',
slideMargin: 0,
minSlides: 8,
maxSlides: 8,
ticker: true,
// (数据总数/10)*12000
speed: 5000,
useCSS: false
});
});
}
</script>
</html>

注意:

要是需要使用jQ的append()拼接,那么我们需要先拼接好,再调用方法,不然容易数据正常,但是没有渲染进去。
而且bxslider的滚动机制是会复制一份需要被滚动的数据的标签和值。

  1. 需要查询后重置数据再滚动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
<col style="width:65px">
<col style="width:420px">
<col style="width:150px">
<thead>
<tr>
<th>选择</th>
<th>名称</th>
<th>编码</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" id="sa">

</td>
</tr>
</tbody>
</table>

①:先判断有不有被拼接的appendTable id,有的话必须清空了,不然append会在现有数据后拼接,而不是重置

1
2
3
4
5
6
7
if($('#appendTable')){
// 将表格去除
// $('#appendTable').remove();
// 将重新bxSlider自动生成在table上的div也重置清空,即sa下的都重置,目的让table再重新生成,不然数据查出来没有滚动。
// html() 方法返回或设置被选元素的内容 (inner HTML)。
$("#sa").html('');
}

②:创建appendTable的节点,并赋予id、class属性

1
2
3
4
const _winTable = document.createElement('table');
_winTable.id='appendTable';
_winTable.className = 'bxslider';
$("#sa").append(_winTable);

③:拼接整体内容数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let itemLi='<tbody>';
// 查询出来的数据集合
data.forEach(item => {
itemLi += '<tr>'
itemLi += '<td style="width:65px">'
itemLi += '<div class="check_box_div">'
itemLi += '<span class="remember"><i class="ncheck1"></i></span>'
itemLi += '</div>'
itemLi += '</td>'
itemLi += '<td style="width:420px">' + item.NAME + '</td>'
itemLi += '<td style="width:150px">' + item.INDEX + '</td>'
itemLi += '</tr>'
})
itemLi += '</tbody>'

④:重新渲染表格数据

1
$('#appendTable').html(itemLi)

⑤:调用滚动函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function roll() {
const set = {
autoHover:false,
tickerHover:true,
mode:'vertical',
slideMargin: 1,
minSlides: 3,
maxSlides: 5,
ticker: true,
speed:13000,
useCSS:false
};
$('.bxslider').bxSlider(set);
}

3d立体魔方(原生实现)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<html>
<style>
/*最外层容器样式*/
.wrap {
width: 0px;
height: 0px;
/*margin: 80px;*/
/*position: relative;*/
position: fixed;
bottom: 120px;
right: 80px;
z-index: 999;
}

/*包裹所有容器样式*/
.cube {
width: 0px;
height: 0px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 10s infinite;
}

@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}

.cube div {
position: absolute;
width: 50px;
height: 50px;
opacity: 0.8;
transition: all .4s;
}

/*定义所有图片样式*/
.pic {
width: 50px;
height: 50px;
}

.cube .out_front {
transform: rotateY(0deg) translateZ(25px);
}

.cube .out_back {
transform: translateZ(-25px) rotateY(180deg);
}

.cube .out_left {
transform: rotateY(-90deg) translateZ(25px);
}

.cube .out_right {
transform: rotateY(90deg) translateZ(25px);
}

.cube .out_top {
transform: rotateX(90deg) translateZ(25px);
}

.cube .out_bottom {
transform: rotateX(-90deg) translateZ(25px);
}

/*定义小正方体样式*/
.cube span {
display: block;
width: 25px;
height: 25px;
position: absolute;
top: 12px;
left: 12px;
}

.cube .in_pic {
width: 25px;
height:25px;
}

.cube .in_front {
transform: rotateY(0deg) translateZ(12px);
}

.cube .in_back {
transform: translateZ(-12px) rotateY(180deg);
}

.cube .in_left {
transform: rotateY(-90deg) translateZ(12px);
}

.cube .in_right {
transform: rotateY(90deg) translateZ(12px);
}

.cube .in_top {
transform: rotateX(90deg) translateZ(12px);
}

.cube .in_bottom {
transform: rotateX(-90deg) translateZ(12px);
}

/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(50px);
}

.cube:hover .out_back {
transform: translateZ(-50px) rotateY(180deg);
}

.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(50px);
}

.cube:hover .out_right {
transform: rotateY(90deg) translateZ(50px);
}

.cube:hover .out_top {
transform: rotateX(90deg) translateZ(50px);
}

.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
</style>

<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<a onclick="back2top()">
<img src="https://img-blog.csdnimg.cn/20200420091226879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc2NDY1,size_16,color_FFFFFF,t_70" class="pic" />
</a>
</div>
<!--后面图片 -->
<div class="out_back">
<a onclick="back2top()">
<img src="https://f12.baidu.com/it/u=2307169604,3228973864&fm=72" class="pic" />
</a>
</div>
<!--左面图片 -->
<div class="out_left">
<a onclick="back2top()">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=977470203,949183840&fm=26&gp=0.jpg" class="pic" />
</a>
</div>
<!--右面图片 -->
<div class="out_right">
<a onclick="back2top()">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3353784624,2171023218&fm=26&gp=0.jpg" class="pic" />
</a>
</div>
<!--上面图片 -->
<div class="out_top">
<a onclick="back2top()">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=665381227,1787391012&fm=26&gp=0.jpg" class="pic" />
</a>
</div>
<!--下面图片 -->
<div class="out_bottom">
<a onclick="back2top()">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2528328792,546048564&fm=26&gp=0.jpg" class="pic" />
</a>
</div>

<!--小正方体 -->
<span class="in_front">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041453540,598406734&fm=11&gp=0.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041453540,598406734&fm=11&gp=0.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041453540,598406734&fm=11&gp=0.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041453540,598406734&fm=11&gp=0.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041453540,598406734&fm=11&gp=0.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041453540,598406734&fm=11&gp=0.jpg" class="in_pic" />
</span>
</div>

</div>

<script>
function back2top(){
$('html, body').animate({scrollTop: 0}, 500);
}
</script>
</html>
  1. 效果图片
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020-2021 Lauy    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信