个人中心
gpt4 book ai didi

javascript - 如何使用 jQuery 悬停、更改、切换图片

转载 作者：太空宇宙 更新时间：2023-11-04 16:20:44 25 4
gpt4 key购买 nike

我正在做我的元素，我正在努力做到这一点

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 将执行幻灯片。问题是点击我的图片后没有任何反应，或者我看到的是整个图片都在下滑？

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

最佳答案

希望你正在寻找这样的东西

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

关于javascript - 如何使用 jQuery 悬停、更改、切换图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29506527/

25 4 0
文章推荐： c++ - 使用位运算的基数排序
文章推荐： c++ - double 值到 int 变量 - 意外输出
文章推荐： javascript - 如何在 ExtJS 中滚动到表单末尾
文章推荐： c++ - 使用 move_iterator 访问 vector
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com