时间戳

首页 > 解决方案 > ElectronJS 为每张幻灯片指定程序路径（ SlickJs ）

javascript - ElectronJS 为每张幻灯片指定程序路径（ SlickJs ）

问题描述

我希望能够在聚焦幻灯片时启动程序。

据我所知，我可以使用 execFile()，但是如何为每张幻灯片指定可执行文件？当我为每张幻灯片链接每个面板时，我为面板做了它，但不知道如何为这个 Eletron 功能做这件事。

把它想象成一个火箭码头，你可以在那里发射东西。

https://codepen.io/jinzagon/pen/gOrggNv

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<body>

  <div class="panel-up" id="1">
    <div class="panel-content">
      <div class="close"></div>
      <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p>
    </div>
  </div>

  <div class="panel-up" id="2">
    <div class="panel-content">
      <div class="close"></div>
      <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p>
    </div>
  </div>

  <div class="content" style="color:white">
    <section class="games">

      <div>
        <a style="color:white;" href="#1" href"www.google.com" class="reveal-up" id='open'><img src="http://placehold.it/288x288?text=1"></a>
      </div>
      <div>
        <a style="color:white;" href="#2" class="reveal-up"><img src="http://placehold.it/288x288?text=2"></a>
      </div>
      <div>
        <a style="color:white;" href="#3" class="reveal-up"><img src="http://placehold.it/288x288?text=3"></a>
      </div>
      <div>
        <a style="color:white;" href="#4" class="reveal-up"><img src="http://placehold.it/288x288?text=4"></a>
      </div>
      <div>
        <a style="color:white;" href="#5" class="reveal-up"><img src="http://placehold.it/288x288?text=5"></a>
      </div>

    </section>
  </div>


  <div class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)">

    <div class="slideshow">
      <div class="slider">
        <div class="item">
          <img src="https://images.unsplash.com/photo-1445768593937-05a3f7832b68?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1443363742879-63e3d75de2f8?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

CSS

body {
  overflow: hidden;
  background-color: #000;
}


/*Slider games*/

.games {
  position: absolute;
}

.slider {
  background-color: white;
  height: auto!important;
}

.games .slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.top_slider {
  overflow: hidden;
}


/* Slider background */

.slideshow {
  position: absolute;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
  opacity: 0.5;
}

.slideshow * {
  outline: none;
}

.slideshow .slider {}

.slideshow .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}

.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  transform: translateX(2rem);
}

.slideshow .item.slick-active img {
  -webkit-transform: scale(2);
  transform: scale(2);
  transform: translateX(0rem);
}


/* Panels */

.content {
  padding: 50px;
  position: absolute;
  width: 90%;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  transform: scale(1);
  opacity: 1;
  bottom: 10%;
}

.content.hidefor-panel-up {
  bottom: 20%;
  transform: scale(0.95);
  opacity: 0;
}

.ip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  opacity: 1;
  top: 0;
  opacity: 1;
  z-index: -5;
  position: absolute;
}

.ip.hidefor-panel-up {
  opacity: 1;
  top: 10%;
}


}
.panel {
  padding: 20px;
}
.panel-content {
  position: relative;
  /*background: #efefef;*/
  
  padding: 30px 50px;
  overflow-y: auto;
  height: 100%;
}
.panel-content .close {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖&quot;;
}
.panel-content .close:before {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖&quot;;
}
.panel-up {
  z-index: 10;
  position: fixed;
  display: block;
  bottom: 0;
  -webkit-transition: all .7s ease;
  transition: all 0.7s ease-out;
  bottom: -20%;
  width: 100%;
}
.panel-up.expanded {
  bottom: 0;
}
.reveal-left {
  float: left;
}
.reveal-up {}
.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
}
.nav button {
  padding: 4px 6px;
}
.nav a {
  font-weight: bold;
  color: #222;
}
.bottom {
  background: yellow;
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
}

JS

$('.games').on('init', function(event, slick) {
  $(".games .slick-current a").focus();
});

    $(".games").slick({
        dots: false,
        arrows:false,
        infinite: false,
        centerMode: true,
        asNavFor: '.slider',
        slidesToShow: 4,
        slidesToScroll: 1,
    onInit: function() {
        $(".games .slick-track div:first-of-type a").focus();
    },
            
    });
    
    //  $('html,body').animate({ scrollTop: $('.games' ).offset().top}, 0);//
    
    
    $('.slider').slick({
    draggable: true,
    arrows: false,
    dots: true,
    fade: true,
    speed: 900,
    infinite: false,
    asNavFor: '.games',
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    touchThreshold: 100
  });
  

  
  //Panels//
  
  // Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
  $(document).ready(function() {
    // Reveal panel 
    $(buttonReveal).on('click', function() {
      $(panel).addClass('expanded');
      console.log('hidefor-'+panel);
      $(".content").addClass('hidefor-'+panel.substr(1));
      $(".ip").addClass('hidefor-'+panel.substr(1));

    });
    
    // Close panel
    $(buttonClose).on('click', function() {
      $(panel).removeClass('expanded');
      $(".content").removeClass('hidefor-panel-up');
            $(".ip").removeClass('hidefor-panel-up');

    
    });   
    
    // ESC to close Panel
    $(document).bind("keydown", function(e) {
      if (e.keyCode == 27) { 
          $(panel).removeClass('expanded'); 
          $(".content").removeClass('hidefor-panel-up');
         $(".ip").removeClass('hidefor-panel-up');

  $(".games .slick-current a").focus();
         
      }    
    });
  }); 
}

revealPanel('.reveal-up','.panel-up', '.close');
//revealPanel('.reveal-left','.panel-left', '.close');

    $('#open').on('click', function() {
      $('.panel-up').hide();$('#1').show();
    });
    $('#close').on('click', function() {
      $('.panel-up').hide();$('#2').show();
    });

// Reveal Panel with Shortcuts
$(document).ready(function() {
  $(document).bind("keydown", function(e) {
    if (e.keyCode == 76) { 
    console.log(e.keyCode);
        $('.panel-left').addClass('expanded'); 
    }
    if (e.keyCode == 82) { 
        $('.panel-up').hide();$('#1').show();
        $('.panel-up').addClass('expanded'); 
        $(".content").addClass('hidefor-panel-up');
        $(".ip").addClass('hidefor-panel-up');
    }
    
     if (e.keyCode == 39) { 
    console.log(e.keyCode);
          $(".games .slick-current a").focus();
    }
    
     if (e.keyCode == 37) { 
    console.log(e.keyCode);
          $(".games .slick-current a").focus();
    }
  });
});

标签： javascripthtmlcsselectron

解决方案

推荐阅读