如何悬停，更改，切换图片与jQuery [英] How to hover,change,toggle a picture with jQuery
问题描述
我正在处理我的项目，我正在尝试
I am working on my project and I am trying to make this
。
我想让每一个图像的每一个点击工作这是悬停，我想使用切换盲效应。
I want to make everything work on click for every image (so every image would have they own paper), need this to hover and I would like to use the toggle blind effect.
我读的是，这将是明智的使用CSS背景，这样，所以我可以交换图片，但我不能理解。
I was reading that it would be wise to use CSS Backgrounds on this, so I can swap pictures but I can not understand it.
我已经采取了一些代码来创建一个div，点击时会悬停，但我没有达到所需的效果。
I have taken some code to make a div who will hover on click, but I did not made desired effect.
jQuery(document).ready(function($) {
$('.brownbox_trigger').click(function(event) {
//prevent deafault action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the brownbox window HTML already exists in document,
change the img src to mach the href of whatever link wac c
If the brownbox window HTML doesn't exists, create it and insert
(This will only happen the first time around)
*/
if ($('#brownbox').length > 0) { // #brownbox exists
//place href as img src value
$('#content').html('<img src="' + image_href + '" />');
//show brownbox window
$('#brownbox').show();
}
else {
//create HTML markup for brownbox window
var brownbox =
'<div id="brownbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href + '" />' +
'</div>' +
'</div>';
//insert brownbox into page
$('body').append(brownbox);
}
/* Act on the event */
});
//Click enywhere on the page to get rid of the brownbox window
$('#brownbox').live('click', function() {
$('#brownbox').hide();
});
// Our script here
});
编辑：
我想使用SlideDown（） - SlideUp ，所以我使用一些例子来更改我的HTML，但是当我点击一个图像没有发生。
I want to use SlideDown()-SlideUp() from jQuery(), so I have used some examples to make changes to mine HTML, but nothing is happening when I click over an image.
我想要能够点击它，隐藏的图像div将显示包含文本，然后jQuery将做幻灯片。问题是，我点击矿山图像后没有发生任何事情，或者我看到它，整个图片是向下滑动？
I want to be able to click on it, and the hidden image div will appear containing text, then the jQuery will do the slide. Problem is that after I click on mine image nothing is happening, or as I see it, the whole picture is sliding down?
你能帮助我
推荐答案
希望你正在寻找这样的东西
Hope you are looking for something like this
HTML
<!-- content to be placed inside <body>…</body> -->
<div class='circle-container'>
<!--<a href='#' class='circle center'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
<div class="content hidden">Content1</div>--> <a href='#' class='circle deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a>
<div class="content">Content1</div> <a href='#' class='circle deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a>
<div class="content hidden">Content2</div> <a href='#' class='circle deg135'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg'></a>
<div class="content hidden">Content3</div> <a href='#' class='circle deg180'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg'></a>
<div class="content hidden">Content4</div> <a href='#' class='circle deg225'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg'></a>
<div class="content hidden">Content5</div> <a href='#' class='circle deg315'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
<div class="content hidden">Content6</div>
</div>
CSS
/**
* Position icons into circle (SO)
* http://stackoverflow.com/q/12813573/1397351
*/
.hidden {
display:none;
}
.active {
filter: brightness(200%);
border-radius:50px;
transition: all 1s;
}
.content {
position:absolute;
padding:10px;
border:1px solid #dedede;
border-radius:5px;
background: #eeeeee;
top:46%;
left:41%;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
/*border: dashed 1px;*/
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
/* 2em = 4em/2 */
/* half the width */
}
.circle-container img {
display: block;
width: 100%;
}
.deg0 {
transform: translate(12em);
}
/* 12em = half the width of the wrapper */
.deg45 {
transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
transform: translate(-12em);
}
.deg225 {
transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
transform: rotate(315deg) translate(12em) rotate(-315deg);
}
/* this is just for showing the angle on hover */
.circle-container a:not(.center):before {
position: absolute;
width: 4em;
color: white;
opacity: 0;
background: rgba(0, 0, 0, .5);
font: 1.25em/3.45 Courier, monospace;
letter-spacing: 2px;
text-decoration: none;
text-indent: -2em;
text-shadow: 0 0 .1em deeppink;
transition: .7s;
/* only works in Firefox */
/* content: attr(class)'°';*/
}
.circle-container a:hover:before {
opacity: 1;
}
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em;
left: 2.8em;
width: 24em;
height: 24em;
/*border: dashed 1px deeppink;*/
border-radius: 50%;
opacity: .3;
pointer-events: none;
content:'';
}
.circle-container:hover:after {
opacity: 1;
}
.circle-container a:not(.center):after {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: deeppink;
opacity: .3;
content:'';
}
.circle-container:hover a:after {
opacity: 1;
}
.circle-container a:hover:after {
opacity: .3;
}
脚本
$(".circle").click(function () {
$(".content").hide(800);
$(".circle").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
这篇关于如何悬停，更改，切换图片与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
