Question

当有人点击图片时，它会使屏幕变暗并播放视频。但是它没有用，任何帮助都会受到赞赏。谢谢。（我使用bootstrap和fullpage.js）

 HTML:
     <html>
     <body>
      <div class="row">
       <div class="col-lg-3">
           <img "myImg" scr="images/myimage.jpeg"     myVideo="https://youtube.com/embed/" width="100%">
         </div>
       </div>
       </body>
      </head>

    Jquery:
       $("#myImg").click(function(){
     video = '<iframe src="'+ $(this).attr('myVideo') +'" width="600px"      height="auto"></iframe>';
        div = document.createElement('div');
        div.style.backgroundColor = "rgba(0,0,0,0.9)";
        div.style.position = "absolute";
        div.style.width = "100vw";
        div.style.height = "100vh";
         div.style.left = "0";
         div.style.top = "0";
         div.style.verticalAlign = "middle";
         div.html = video;
         document.getElementsByTagName('body')[0].appendChild(div);
        });

Answer 1

有一些错误：

1）您的jQuery click事件正在寻找ID为myImage的元素的点击，但您的图片现在没有ID。将<img "myImg" ...更改为<img id="myImage" ...以修复点击事件。

2）您在src上scr <img>拼错了.innerHTML（来源）。

3）使用带有.html的JS而不是div.html = video;的元素设置HTML。将div.innerHTML = video;更改为$("#myImage").click(function() { video = '<iframe src="' + $(this).attr('myVideo') + '" width="600px" height="auto"></iframe>'; div = document.createElement('div'); div.style.backgroundColor = "rgba(0,0,0,0.9)"; div.style.position = "absolute"; div.style.width = "100vw"; div.style.height = "100vh"; div.style.left = "0"; div.style.top = "0"; div.style.verticalAlign = "middle"; div.innerHTML = video; document.getElementsByTagName('body')[0].appendChild(div); });。

更改这些将使您的代码执行。预览工作：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="row">
    <div class="col-lg-3">
      <img id="myImage" src="http://placehold.it/350x150" myVideo="https://youtube.com/embed/" width="100%">
    </div>
  </div>
</body>

＆＃13;

    import java.awt.Color;
    import java.awt.Graphics;
    import javax.swing.JPanel;
    import javax.swing.JFrame;

    public class RectTest {
     DrawPanel panel;
     int x;
     int y;
     public static void main(String[] args) {
      new RectTest().startApp();
     } 

     public void startApp() {
      panel = new DrawPanel();
      JFrame app = new JFrame();
      app.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE);
      //modify this line
      app.getContentPane().add(panel);
      app.setSize(450, 250);
      app.setVisible(true);
      //added for loop here
      for (int i = 0; i < 10; i++ ) {
       // x,y here
       x = 10+5*i;
       y = 10+5*i;
       // repaint the panel
       panel.repaint();
       // wait 2sec
       try{
          Thread.sleep( 2000 );
       }
       catch (InterruptedException ex) { }
    }
   }

   class DrawPanel extends JPanel {
    public void paintComponent( Graphics g) {
       //super.paintComponent(g);
       // repaint the backround to see the single reactangles
       g.setColor(Color.white);
       g.fillRect(0, 0, this.getWidth(), this.getHeight());

       g.setColor(Color.green);
       g.drawRect(x, y, 20, 20);
    }
   }
  }

＆＃13;

在jquery中使用iframe创建div

1 个答案: