JSDM

HTML

6
 
1
<nav>
2
  <a href="#" class="red" data-speed="4" data-color="#f33">Red</a>
3
  <a href="#" class="green" data-speed="4" data-color="#3f3">Green</a>
4
  <a href="#" class="blue" data-speed="4" data-color="#39f">Blue</a>
5
  <a href="#" class="yellow" data-speed="4" data-color="#ff3">Yellow</a>
6
</nav>

CSS

x
 
1
body {
2
  background: #1a1a1a;
3
  font: 100%/1.5 helvetica, arial, sans-serif;
4
  padding: 0 0 0 0;
5
}
6
7
nav {
8
  left: 0;
9
  margin: -33px 0 0 0;
10
  position: absolute;
11
  text-align: center;
12
  top: 50%;
13
  width: 100%;
14
}
15
16
nav a {
17
  background: #2c2c2c;
18
  border: 4px solid transparent;
19
  box-shadow: 0 0 0 1px #3c3c3c, 0 0 0 2px #000;
20
  display: inline-block;
21
  font-size: 18px;
22
  font-weight: bold;
23
  height: 50px;
24
  line-height: 50px;
25
  margin: 0 3px;
26
  padding: 0 40px;
27
  position: relative;
28
  text-decoration: none;
29
  text-shadow: 0 -1px 1px #111;
30
  transition: all 400ms;
31
}
32
33
nav a.red { color: #f33; }
34
nav a.green { color: #3f3; }
35
nav a.blue { color: #39f; }
36
nav a.yellow { color: #ff3; }
37
38
nav a canvas {
39
  display: block;
40
  opacity: 0;
41
  position: absolute;
42
}
43
44
nav a:hover {
45
  background: #333;
46
  color: #fff;
47
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

93
 
1
(function(){for(var d=0,a=["webkit","moz"],b=0;b<a.length&&!window.requestAnimationFrame;++b)window.requestAnimationFrame=window[a[b]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[a[b]+"CancelAnimationFrame"]||window[a[b]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(b){var a=(new Date).getTime(),c=Math.max(0,16-(a-d)),e=window.setTimeout(function(){b(a+c)},c);d=a+c;return e});window.cancelAnimationFrame||(window.cancelAnimationFrame=
2
function(a){clearTimeout(a)})})();
3
4
var $elems = $('nav a');
5
6
function Border( opt ){
7
  this.elem = opt.elem;
8
  this.active = false;
9
  this.canvas = document.createElement('canvas');
10
  this.ctx = this.canvas.getContext('2d');
11
  this.width = this.canvas.width = this.elem.outerWidth();
12
  this.height = this.canvas.height = this.elem.outerHeight();
13
  this.borderSize = parseInt(this.elem.css('border-left-width'), 10);
14
  this.waypoints = [
15
    [0, 0],
16
    [this.width - this.borderSize, 0],
17
    [this.width - this.borderSize, this.height - this.borderSize],
18
    [0, this.height - this.borderSize]
19
  ];
20
  this.tracer = {
21
    x: 0,
22
    y: 0,
23
    color: opt.color,
24
    speed: opt.speed,
25
    waypoint: 0
26
  };
27
  this.canvas.style.top = -this.borderSize + 'px';
28
  this.canvas.style.left = -this.borderSize + 'px';
29
  this.elem.append($(this.canvas));
30
}
31
32
Border.prototype.loop = function(){
33
  if(this.active){
34
    requestAnimationFrame($.proxy(this.loop, this));   
35
    this.ctx.globalCompositeOperation = 'destination-out';
36
    this.ctx.fillStyle = 'rgba(0, 0, 0, .05)';
37
    this.ctx.fillRect(0, 0, this.width, this.height);
38
    this.ctx.globalCompositeOperation = 'source-over';
39
    this.ctx.fillStyle = this.tracer.color;
40
    this.ctx.fillRect(this.tracer.x, this.tracer.y, this.borderSize, this.borderSize);
41
  
42
    var previousWaypoint = (this.tracer.waypoint == 0) ? this.waypoints[this.waypoints.length - 1] : this.waypoints[this.tracer.waypoint - 1],
43
        dxTotal = previousWaypoint[0] - this.waypoints[this.tracer.waypoint][0],
44
        dyTotal = previousWaypoint[1] - this.waypoints[this.tracer.waypoint][1],
45
        distanceTotal = Math.sqrt(dxTotal * dxTotal + dyTotal * dyTotal),  
46
        angle = Math.atan2(this.waypoints[this.tracer.waypoint][1] - this.tracer.y, this.waypoints[this.tracer.waypoint][0] - this.tracer.x),
47
        vx = Math.cos(angle) * this.tracer.speed,
48
        vy = Math.sin(angle) * this.tracer.speed, 
49
        dxFuture = previousWaypoint[0] - (this.tracer.x + vx),
50
        dyFuture = previousWaypoint[1] - (this.tracer.y + vy),
51
        distanceFuture = Math.sqrt(dxFuture * dxFuture + dyFuture * dyFuture);
52
    
53
    if(distanceFuture >= distanceTotal){
54
      this.tracer.x = this.waypoints[this.tracer.waypoint][0];
55
      this.tracer.y = this.waypoints[this.tracer.waypoint][1];
56
      this.tracer.waypoint = (this.tracer.waypoint == this.waypoints.length - 1) ? 0 : this.tracer.waypoint + 1;
57
    } else {
58
      this.tracer.x += vx;
59
      this.tracer.y += vy;
60
    }
61
  } else {
62
    this.ctx.clearRect(0, 0, this.width, this.height); 
63
  }
64
}
65
66
$elems.each(function(){
67
  var $this = $(this);
68
  var border = $this.data('border', new Border({
69
    elem: $this,
70
    color: $this.data('color'),
71
    speed: $this.data('speed')
72
  }));
73
  $this.data('border').loop();  
74
});
75
76
$elems.on('mouseenter', function(){
77
  var border = $(this).data('border');
78
  $(border.canvas).stop(true).animate({'opacity': 1}, 400);
79
  if(!border.active){
80
    border.active = true;
81
    border.loop();
82
  }
83
});
84
85
$elems.on('mouseleave', function(){
86
  var border = $(this).data('border');
87
  $(border.canvas).stop(true).animate({'opacity': 0}, 400, function(){
88
    border.active = false;
89
    border.tracer.x = 0;
90
    border.tracer.y = 0;
91
    border.tracer.waypoint = 0; 
92
  });   
93
});
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................