Question

我想在视频效果中使用此JSON：{url: 'img/enf.png', x: 1200, y: 530, offset: -0.1}在图像上设置超链接，因此如果您点击此图片，则转到＆＃34; news.html＆＃34;。

我目前的代码：

<html>
<head>
  <style>
  body{
    margin:0;
    overflow-x: hidden;
  }
  #pozadi{
    background-image: url(img/pozadi.png);
    overflow: hidden;

    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    position: relative;
    min-height: 500px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
</head>
<body>
    <div id="pozadi">
      <div id="container"></div>
    </div>
  <script src="tweenmax.js"></script>
  <script src="snapsvg.js"></script>
  <script>

  if (screen.width > 1200){
  var assets = [
    {url: 'img/vybuch.png', x: 0, y: 60, offset: -0.25},
    {url: 'img/psi.png', x: 200, y: 80, offset: -0.2},
    {url: 'img/kour.png', x: 120, y: 280, offset: -0.15},
    {url: 'img/enf.png', x: 1200, y: 530, offset: -0.1},
    {url: 'img/csf.png', x: -40, y: 530, offset: -0.1},
    {url: 'img/nadpis.png', x: 350, y: 530, offset: 0.01},
    {url: 'img/sbt.png', x: 610, y: 665, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    /*Start my code*/
    if (i==3) { //3 is your 'img/enf.png', or check the string in img.src 
        img.onclick = function(e){
            window.location.href = 'www.debil.cz';
        }
    }
    /*End my code*/

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover', handle_mouseover);
  }

  function handle_mousemove(e) {
    var dx = e.offsetX - (w / 2);
    var dy = e.offsetY - (h / 2);

    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      var _x = dx * assets[i].offset;
      var _y = dy * assets[i].offset;
      TweenMax.to(l.node, 0.1, {x: _x, y: _y});
    }
  }

  function handle_mouseout(e) {
    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
    }

    TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
    TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
  }

  function handle_mouseover(e) {
    TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
  }

  function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal =  (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
      x1: x < 0 ? 1 : 0,
      y1: y < 0 ? 1 : 0,
      x2: x >= 0 ? x : x + 1,
      y2: y >= 0 ? y : y + 1
    };
  }
}else if (screen.width > 600){
  var assets = [
    {url: 'img/vybuch_tablet.png', x: -450, y: 80, offset: -0.25},
    {url: 'img/psi_tablet.png', x: -280, y: 140, offset: -0.2},
    {url: 'img/kour_tablet.png', x: -220, y: 350, offset: -0.15},
    {url: 'img/enf_tablet.png', x: 470, y: 830, offset: -0.1},
    {url: 'img/csf_tablet.png', x: 85, y: 830, offset: -0.1},
    {url: 'img/nadpis_tablet.png', x: 5, y: 610, offset: 0.01},
    {url: 'img/sbt_tablet.png', x: 150, y: 740, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover', handle_mouseover);
  }

  function handle_mousemove(e) {
    var dx = e.offsetX - (w / 2);
    var dy = e.offsetY - (h / 2);

    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      var _x = dx * assets[i].offset;
      var _y = dy * assets[i].offset;
      TweenMax.to(l.node, 0.1, {x: _x, y: _y});
    }
  }

  function handle_mouseout(e) {
    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
    }

    TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
    TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
  }

  function handle_mouseover(e) {
    TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
  }

  function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal =  (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
      x1: x < 0 ? 1 : 0,
      y1: y < 0 ? 1 : 0,
      x2: x >= 0 ? x : x + 1,
      y2: y >= 0 ? y : y + 1
    };
  }
}else{
  var assets = [
    {url: 'img/vybuch_phone.png', x: 0, y: 0, offset: -0.25},
    {url: 'img/psi_phone.png', x: -400, y: 0, offset: -0.2},
    {url: 'img/kour_phone.png', x: -300, y: 100, offset: -0.15},
    {url: 'img/enf_phone.png', x: 200, y: 540, offset: -0.1},
    {url: 'img/csf_phone.png', x: 20, y: 540, offset: -0.1},
    {url: 'img/nadpis_phone.png', x: 30, y: 430, offset: 0.01},
    {url: 'img/sbt_phone.png', x: 65, y: 495, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover', handle_mouseover);
  }

  function handle_mousemove(e) {
    var dx = e.offsetX - (w / 2);
    var dy = e.offsetY - (h / 2);

    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      var _x = dx * assets[i].offset;
      var _y = dy * assets[i].offset;
      TweenMax.to(l.node, 0.1, {x: _x, y: _y});
    }
  }

  function handle_mouseout(e) {
    for (var i = 0; i < layers.length; i += 1) {
      var l = layers[i];
      TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
    }

    TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
    TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
  }

  function handle_mouseover(e) {
    TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
  }

  function angleToPoints(angle) {
    var segment = Math.floor(angle / Math.PI * 2) + 2;
    var diagonal =  (1/2 * segment + 1/4) * Math.PI;
    var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
    var x = op * Math.cos(angle);
    var y = op * Math.sin(angle);

    return {
      x1: x < 0 ? 1 : 0,
      y1: y < 0 ? 1 : 0,
      x2: x >= 0 ? x : x + 1,
      y2: y >= 0 ? y : y + 1
    };
  }
}
  </script>
</body>
</html>

我尝试使用html中的href属性使用a标记，但它完全打破了视差效果。

我不是javascript的专家，我只是更改了我发现的代码并且它工作得很好，但在我的项目中，我确定需要在图像上设置一个链接。你知道怎么做吗？

Answer 1

尝试这样的事情（进入第一个）：

 for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    /*Start my code*/
    if (i==3) { //3 is your 'img/enf.png', or check the string in img.src 
        img.onclick = function(e){
            window.location.href = 'the link of your news.html';
        }
    }
    /*End my code*/

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);

  }

修改

你是对的，我们错了。

首先，您的代码生成的是SVG，SNAP库点击事件是：http://snapsvg.io/docs/#Element.click

出于这个原因，必须以这种方式修改上面的代码：

for (var i = 0; i < assets.length; i++) { var img = new Image(); img.src = assets[i].url; img.onload = handle_load; var _img = s.image(assets[i].url, assets[i].x, assets[i].y); /*Start my code*/ if (i==3) { _img.click(function(){ //window.location.href = 'www.debil.cz'; alert('yeah'); }); } /*End my code*/ c.append(_img); layers.push(_img); }

<强> BUT

你必须记住： 视差效果在图层上起作用，如果一个＆＃34;不可见＆＃34;那么点击事件就不会被触发。元素在下面（作为PNG的空白区域）。

这是一个工作示例，但点击前景中的项目!! https://jsfiddle.net/StepBaro/hachn1sL/3/

这是另一个工作示例，单击第三个元素，并且事件仅在非常顶部触发（因为第一个在上面）。 https://jsfiddle.net/StepBaro/hachn1sL/4/

您的资产数组已插入最高元素的最后一项。

Answer 2

这尚未经过测试，但根据您提供的信息，这可能有所帮助。

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    //use an if statement to grab correct asset
    //change page on click
    if (img.src === "img/vybuch.png") {
      img.onclick = function(e) {
        document.location = "http://www.google.com/";
      }
    }

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
    c.append(_img);
    layers.push(_img);
  }

示例：

＆＃13;
＆＃13;
var assets = [ {url: 'http://www.livefirelabs.com/images/learn-unix-demo-course.jpg', x: 0, y: 60, offset: -0.25}, ] for (var i = 0; i < assets.length; i++) { var img = new Image(); img.src = assets[i].url; img.onload = handle_load; //use an if statement to grab correct asset //change page on click if (img.src === "http://www.livefirelabs.com/images/learn-unix-demo-course.jpg") { img.onclick = function(e) { document.location = "https://jsfiddle.net/"; } } document.body.appendChild(img); } function handle_load() { //do nothing }
＆＃13;
＆＃13;
＆＃13;

如何在JavaScript中超链接图像

2 个答案:

修改