Question

基本上我有4个图像，当我点击一个图像时，应该弹出有关该图像的信息。

我怎么能用jquery实现呢？我是否使用jQuery？

有人可以通过我可以效仿的一些例子来指导我吗？

全部谢谢

Answer 1

点击时你想要的是一个弹出窗口？了解如何将JQuery与click事件一起使用，就是这样。像

这样的东西

$( "#IdPicture" ).click(function() {
  alert( "Here are the different information about the picture" );
});

您还可以使用JS为图片添加onClick事件。

您还可以使用#IdPicture:active

来使用CSS

您选择

Answer 2

好像你在找fancybox之类的东西。它很容易使用。只需浏览我提供的链接，在我看来这些例子非常简单。还有一个基于jQuery的版本。

Answer 3

我创建了JSFiddle

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#popup').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#popup'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

请看一下，这对你有用。

Answer 4

你也可以悬停

＆＃13;

$(document).ready(function() {
  $('#box1').hover(function() {
    $('#info1').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info1').stop().animate({
      opacity: 0
    }, 300);

  });
  $('#box2').hover(function() {
    $('#info2').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info2').stop().animate({
      opacity: 0
    }, 300);

  });
  $('#box3').hover(function() {
    $('#info3').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info3').stop().animate({
      opacity: 0
    }, 300);

  });
  $('#box4').hover(function() {
    $('#info4').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info4').stop().animate({
      opacity: 0
    }, 300);

  });
});

＆＃13;

	#box1 {
	  width: 150px;
	  height: 150px;
	  background: blue;
	}
	#box2 {
	  width: 150px;
	  height: 150px;
	  background: red;
	}
	#box3 {
	  width: 150px;
	  height: 150px;
	  background: green;
	}
	#box4 {
	  width: 150px;
	  height: 150px;
	  background: orange;
	}
	#info1 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	#info2 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	#info3 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	#info4 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
  <script type='text/javascript' src='script.js'></script>
</head>

<body>
  <div id="box1">
    <div id="info1">
      <p>
        <ul>
          <li>cool info</li>
          <li>even cooler info</li>
          <li>too cool for school info</li>
        </ul>
      </p>
    </div>

  </div>
  <div id="box2">
    <div id="info2">
      <p>
        <ul>
          <li>balblabala</li>
          <li>this is interesting</li>
          <li>of course it is</li>
        </ul>
      </p>
    </div>

  </div>
  <div id="box3">
    <div id="info3">
      <p>
        <ul>
          <li>hello world</li>
          <li>I came to rule the planet</li>
          <li>just kidding</li>
        </ul>
      </p>
    </div>

  </div>
  <div id="box4">
    <div id="info4">
      <p>
        <ul>
          <li>no one will read this anyway</li>
          <li>this is not fun anymore</li>
          <li>finally</li>
        </ul>
      </p>
    </div>

  </div>
</body>

＆＃13;

在css的帮助下，您可以按照自己的方式定位和格式化信息容器。

单击图像时弹出带有信息的窗口

4 个答案: