Question

很抱歉，如果已经发布，但我真的需要你的帮助。

我想要的是：

假设我将此图像作为可以单击的普通图像。 http://i.imgur.com/SOd1W.png

现在让我们说，当我点击该图像时，它将淡化此图像： http://i.imgur.com/QW15C.png

有人能告诉我如何在点击图片选择中对此进行编码吗？或者，如果它不能被点击，那么还有什么呢？

编辑：我也忘了提。如果我有两个选择... 如果我点击一个选项就会淡入，如果我选择选择2，则选择1应该淡出，选择2应该淡出... ...

Answer 1

假设fade是指动画淡入淡出，您可以使用以下代码：

HTML：

<div id="something" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

<div id="somethingElse" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

jQuery的：

$(document).ready(function(){
    $('.theImage img').click(function(){
      var current = ($(this).parent().attr('id') == 'something') ? 'somethingElse' : 'something';console.log(current);
      $(this).fadeOut();
      $('#'+current + ' img').fadeIn();
    });
});

这将显示默认图像开始，然后淡出以显示单击时容器的背景图像。您可以根据具体情况决定使用不同的HTML元素。

Answer 2

单向（有几种）：

将两个图像包含在div中包含的标签（不是背景图像）：

<div id="wrapper">
    <img src="http://i2.cdn.turner.com/cnn/dam/assets/120423012508-merkel-sarkozy-c1-main.jpg" id="img1" />
    <img src="http://d2o307dm5mqftz.cloudfront.net/1005866/1334968885891/Perfect%20Gift%20No%20Pink_300x250.jpg" id="img2" />
</div>

CSS：

#wrapper{
    position:relative;
    height:242px;
    width:194px;
}      
#wrapper img{
    position:absolute;
    left:0px;
    top:0px;
    height:242px;
    width:194px;
} 
#img1{display:none;}

jQuery的：

$('#wrapper').on('click', function (event){
    $('#wrapper img').fadeToggle();
});

Answer 3

$(document).ready(function() {
    var imagelist = ["http://i.imgur.com/SOd1W.png","http://i.imgur.com/QW15C.png"];

    $('.img1').click(function(e) {   
             var myimage = imagelist [Math.floor(Math.random()*imagelist .length)];
             $('.img1').attr('src', myimage );

    });
});

请参阅demo ...来源simple image randomizer with jQuery by Brian Cray

或者您也可以使用CSS3。详细了解A Simple Fade with CSS3

Answer 4

使用此Javascript

function Image(imageId)
{
    var obj = document.getElementById(imageId);
    if(obj.alt=='Fade'){
       obj.src="image1.jpg";     
       obj.alt = "Unfadde";
     }
    else
     {
       obj.src="image2.jpg";     
       obj.alt = "Fade";
      }  
 }

和HTML

<img src="image1.jpg" onclick=Image("image") id="image" name="image" alt="Fade" />

Answer 5

看起来像jQuery click()

的工作

这是代码 http://jsfiddle.net/ZzDJ8/

Answer 6

在CSS中非常简单，你需要给图像一个活跃的伪类：

.img {background：url（firstimg.png）;}

.img：active {background：url（clickimg.png）;}

以下是一个示例：http://jsfiddle.net/J6kJh/

Answer 7

<img src="a.png" id="MyImg" />

jquery的：

$("#MyImg").click(function() { $(this).attr("src","b.png") });

Answer 8

你在找这样的东西吗？

<img src="http://i.imgur.com/SOd1W.png" onclick="$(this).fadeOut().attr('src','http://i.imgur.com/QW15C.png').fadeIn();">

普通图像和所选图像？需要jQuery还是css？

8 个答案: