Question

Q1）在页面加载时，Jquery可以检查图像的文件名，然后设置css将其放在页面上吗？

Q2）管理此内容的最简单方法是，用户不会在if.icon中嵌入iframe代码

我有一个播放按钮图标，它将出现在电子商务网站的产品说明中。当用户点击播放时，它将在product-image div框内准确显示youtube视频。该图标将位于图像导航图标旁边，因此用户可以选择在浏览图片时查看视频。

这似乎很好用，这是我的代码：

HTML：

<div class="container">
    <div class="product-image"><img src=
    "http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg"
    alt=
    "http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg" /></div>

    <div class="image-nav"></div>

    <div class="icon">
      <iframe width="480" height="220" src=
      "http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0"
      allowfullscreen=""></iframe>
    </div>
  </div>

CSS：

div.container
{
    margin:10px 10px auto;
    border:1px solid orange;
}

div.product-image
{
    height:220px;
    width:480px;
    border:1px solid red;
    margin:30px;      
}

div.image-nav
{
    border:1px solid black;
    width:500px;
    height:100px;
    margin:30px;
}

div.icon
{
    background-image: url("http://i46.tinypic.com/zmmbo8.png");
    background-repeat: no-repeat;
    height: 50px;
    left: 540px;
    position: relative;
    top: -104px;
    width: 50px;
    cursor:pointer;
}

div.icon iframe
{
    display:none;
    position:relative;
    top:30px;
}

div.product-image iframe
{
    position: absolute;
    top: 42px;
    left:42px;
}

JQ：

var $video=$('div.icon iframe');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

的jsfiddle： http://jsfiddle.net/t7qMF/2/

Answer 1

对于Q1，你可以使用Ishan：

$('img[src="images/test.png"]').css("position","absolute");

对于Q2：youtube嵌入代码如下所示：

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

您可以尝试使用iframe类来选择它：

var $video=$('iframe.youtube-player');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

然后在onload事件上，你必须添加一些jquery，这将gonne用你的图标div包装每个youtube iframe。我不确定，但这可能是这样的：

$(function() {
     $('iframe.youtube-player').each(function(){
         var $iconDiv = $(this).parent().append('<div class="icon"></div>');
         $(this).prependTo($iconDiv);
     });
});

希望这个帮助

显示隐藏youtube视频点击

1 个答案: