Question

我正在尝试为课程做作业，基本上它必须是“互动的”。我想使用mousemove语法来更改我所做的行的颜色和大小。我在我的html文件中的div中创建了行，并使用getElementById语法来创建行。

我有线......我不知道如何让它们移动并改变颜色。我的教授给我发了代码，当鼠标移过它们时，他让线条改变颜色。我理解代码但我不知道当鼠标移过它们时如何使线移动并随机改变大小。

我是否需要为每一行创建单独的div以使它们移动，随机改变颜色，并且彼此独立地改变大小，或者我可以做我做的事情，用多行创建一个div并让它们做什么我想，彼此独立？

以下是我的代码的链接！

谢谢!!!!!

    [1]: http://codepen.io/niymil/pen/pNoOqz



     var w = 100;
var h = 500;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function adjustLineStyle(y, lineY) {
  var distance = Math.abs(lineY - y);
  var lightness = 100 - distance;
  // hsl makes a color HUE, SATURATION, LIGHTNESS.
  // lightness will be how far Y is from the Y of line.
  ctx.strokeStyle = "hsl(80, 70%," + lightness + "%)";
  ctx.lineWidth = 2;
};

function clear() {
  ctx.fillStyle = 'hsla(0,0%,0%,0.1)';
  ctx.fillRect(0,0,500,500);
}

var startX = 0 ;
var endX = 500 ;

function drawlines(mouseEvent) {
  var mouseY = mouseEvent.offsetY;
  startX = startX + (Math.random() -0.5) * 30;
  endX = endX + (Math.random()  - 0.5) * 30;
  ctx.strokeStyle = 'white'
  ctx.beginPath();
  ctx.moveTo(startX, mouseY);
  ctx.lineTo(endX, mouseY);
  ctx.stroke();
}

setInterval(clear,50);
document.addEventListener('mousemove', drawlines);
//draw lines as as the mouse is hovered over the lines
//the lines are supposed to change size as the mouse is hovered over the canvas
//as lines reappear, they should change color randomly

Answer 1

这是一个开始寻找答案的好地方

https://learn.jquery.com/using-jquery-core/document-ready/

如果您仍然遇到问题，请尝试点击答案末尾的Run按钮

＆＃13;

var w = 100;
var h = 500;


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


   
document.ready(function(){
    animateDiv();  
});



function makeNewPosition() {
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  return [nh, nw];
}

function animateDiv() {
  var newq = makeNewPosition();
  var oldq = $('canvas').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);
  $('canvas').animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv();
  });
};

function calcSpeed(prev, next) {
  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);
  var greatest = x > y ? x : y;
  var speedModifier = 0.1;
  var speed = Math.ceil(greatest / speedModifier);
  return speed;
}

function adjustLineStyle(y, lineY) {
  var distance = Math.min(Math.abs(lineY - y), 1000);
  var lightness = 100 - distance;
  var maxSize = 5;
  ctx.strokeStyle = "hsl(80, 70%," + lightness + "%)";
  ctx.lineWidth = maxSize * (lightness / 100);
};

function drawlines(mouseEvent) {
  var mouseY = mouseEvent.offsetY;
  for (var x = 0; x < 1000; x += 15) {
    ctx.beginPath();
    adjustLineStyle(x, mouseY);
    ctx.moveTo(500, x);
    ctx.lineTo(x, x);
    ctx.stroke();
  }
}

document.addEventListener('mousemove', drawlines);
//redraw lines as as the mouse is hovered over the existing lines
//the lines are supposed to change size as the mouse is hovered over the canvas
//as lines reappear, they should change color randomly

＆＃13;

.name {
  font-family: Poiret One;
  color: #BC8F8F;
  font-size: 25px;
  line-height: 4px;
  border-bottom: dotted 2px;
  width: 7em;
}
body {
  background: #696969;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>

  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>

<link type="text/css" rel="stylesheet" href="index.css" />

<body>

  <div class=name>
    <p>Niyah Gonzalez</p>
    <p>2016/1/11</p>
    <p>PS-07</p>
  </div>


  <div class="canvas">
    <canvas id="canvas" width="500" height="500"></canvas>
    </br>
  </div>



  <script type="text/javascript" src="square.js"></script>

  </script>

</body>

</html>

＆＃13;

Javascript MouseMove事件编码

1 个答案: