Question

我正在处理我的项目，我正在尝试制作这个

enter image description here

我希望每张图片都能点击一下（所以每张图片都有自己的纸张），需要这个悬停，我想使用切换盲效果。

我正在阅读，在此使用CSS背景是明智的，所以我可以交换图片，但我无法理解。

我已经采取了一些代码来制作一个将在点击时悬停的div，但我没有取得预期的效果。

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

});

编辑：我想使用来自jQuery（）的SlideDown（） - SlideUp（），所以我使用了一些示例来对我的HTML进行更改，但是当我点击图像时没有任何事情发生。

JSFiddle example

我希望能够点击它，隐藏的图像div将显示包含文本，然后jQuery将执行幻灯片。问题是，在我点击我的图像后没有发生任何事情，或者就像我看到的那样，整个画面都在滑落？

你能帮我解决这个问题，谢谢你。

Answer 1

希望您正在寻找类似的东西

<强> 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);
});

Fiddle Demo

Answer 2

这正是您所需要的：Fiddle example

完整的工作仅限CSS：

ul li a {
    width:134px;
    height:53px;
    display:block;
}
.iconOne {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -82px -58px;
}
.iconTwo {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -244px -58px;
}
.iconThree {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -403px -58px;
}
a.iconOne:hover {
    background-position:-82px -123px;
}
li.active a.iconOne:hover, li.active a.iconOne {
    background-position:-82px -188px;
}
a.iconTwo:hover {
    background-position: -244px -123px;
}
li.active a.iconTwo:hover, li.active a.iconTwo {
    background-position: -244px -188px;
}
a.iconThree:hover {
    background-position:-403px -123px;
}
li.active a.iconThree:hover, li.active a.iconThree {
    background-position:-403px -188px;
}

并使用上述类：

<ul>
    <li>
        <a href="#" class="iconOne"></a>
    </li>
     <li>
        <a href="#" class="iconTwo"></a>
    </li>
     <li>
        <a href="#" class="iconThree"></a>
    </li>
</ul>

如何使用jQuery悬停，更改，切换图片

2 个答案: