2

Q1)在页面加载时是否可以使用 Jquery 检查图像的文件名，然后设置 css 以将其定位在页面上？

Q2）管理这个最简单的方法是什么，用户不会在 div.icon 中嵌入 iframe 代码

我有一个播放按钮图标，它将出现在电子商务网站的产品描述中。当用户点击播放时，它将在产品图像 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/

4

1 回答 1

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">

You can try using the iframe class to select it:

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

Then on the onload event you have to add some jquery thats gonne wrap every youtube iframe with your icon div. I'm not sure but this could be something like:

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

Hope this help's

于 2012-06-20T14:19:13.143 回答