-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·109 lines (89 loc) · 3.59 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="keywords" content="古一巷, 拍卖, 国内拍卖, 拍卖行, 珠宝, 瓷器, 在线拍卖">
<meta name="Description" content="在线拍卖">
<link type="image/x-icon" rel="shortcut icon" href="http://ox4oktbuv.bkt.clouddn.com/o_1bt183f295vs1huipnl18i8km5v.png">
<title>古一巷</title>
<link href=//at.alicdn.com/t/font_464241_y8vb9aqu3ul3di.css rel=stylesheet>
<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<div id="app">
<!-- 启动加载动画 -->
<canvas id="canvas" style="display: block;position: absolute;top: 50%;left: 50%; width: 100%; height: 400px; transform: translate(-50%, -50%);"></canvas>
<script>
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);
var P = 4;
var A = 4;
function draw(shift) {
var w = canvas.width;
var h = canvas.height;
shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
ctx.clearRect(0, 0, w, h);
var grd = ctx.createLinearGradient(0, 0, w, h);
grd.addColorStop(0, '#4a8bf5');
grd.addColorStop(1, '#f16b55');
ctx.strokeStyle = grd;
ctx.lineCap = 'round';
for (var i = 0; i < w; ) {
var _A = Math.abs(A*Math.cos(2*i));
ctx.beginPath();
var pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
pos *= h / 2;
var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
ctx.lineWidth = (lw)+1;
ctx.lineTo(i, h / 2 - pos);
ctx.closePath();
ctx.stroke();
i += 1;
}
window.requestAnimationFrame(() => {
draw(shift + 1);
});
}
draw(0);
</script>
</div>
<!-- 图片放大结构 -->
<section class="pswp J_pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</section>
<!-- add 统计 2017.09.03 -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '', 'auto');
ga('send', 'pageview', location.pathname);
</script>
</body>
</html>