jQuery鼠标移入切换背景图并且点击时跳转页面

最新推荐文章于 2023-08-29 19:01:40 发布

七七Cqq

最新推荐文章于 2023-08-29 19:01:40 发布

阅读量518

点赞数

分类专栏：功能代码文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_67869050/article/details/129377989

版权

功能代码专栏收录该内容

17 篇文章 1 订阅

订阅专栏

页面效果

在这里插入图片描述

 <div class="threeLibris">
        <div class="frameBook frameBook1" onclick="toggleBook()"></div>
        <div class="frameBook frameBook2" onclick="toggleCultural()"></div>
        <div class="frameBook frameBook3" onclick="toggleArt()"></div>
</div>

js部分

        // 图书馆入口点击切换背景
        var book = 0
        var cultural = 0
        var art = 0
        var bookBgarr = ['../../WebUI/img/imgsbazhou/entrance/bookwhite.png', '../../WebUI/img/imgsbazhou/entrance/bookblue.png']
        var culturalBgarr = ['../../WebUI/img/imgsbazhou/entrance/culturalwhite.png', '../../WebUI/img/imgsbazhou/entrance/culturalblue.png']
        var artBgarr = ['../../WebUI/img/imgsbazhou/entrance/artwhite.png', '../../WebUI/img/imgsbazhou/entrance/artblue.png']

        function toggleBook() {
            window.location.href = DOMAIN + "/Cloud/Module/Index1/index.html";

        }
        function toggleCultural() {
            window.location.href = DOMAIN + "/Cloud/Module/Index2/index.html";

        }
        function toggleArt() {
            window.location.href = DOMAIN + "/Cloud/Module/Index3/index.html";

        }
        $('.frameBook1').hover(
            function () {
                if (book == 0) {
                    book = 1
                    cultural = 0
                    art = 0
                } else {
                    book = 0
                }

                $('.frameBook1').css(
                    'background-image', 'url(' + bookBgarr[book] + ')'
                )
                $('.frameBook2').css(
                    'background-image', 'url(' + culturalBgarr[cultural] + ')'
                )
                $('.frameBook3').css(
                    'background-image', 'url(' + artBgarr[art] + ')'
                )
            }
        )
        $('.frameBook2').hover(
            function () {
                if (cultural == 0) {
                    cultural = 1
                    book = 0
                    art = 0
                } else {
                    cultural = 0
                }

                $('.frameBook2').css(
                    'background-image', 'url(' + culturalBgarr[cultural] + ')'
                )
                $('.frameBook1').css(
                    'background-image', 'url(' + bookBgarr[book] + ')'
                )
                $('.frameBook3').css(
                    'background-image', 'url(' + artBgarr[art] + ')'
                )
            }
        )
        $('.frameBook3').hover(
            function () {
                if (art == 0) {
                    art = 1
                    book = 0
                    cultural = 0
                } else {
                    art = 0
                }

                $('.frameBook3').css(
                    'background-image', 'url(' + artBgarr[art] + ')'
                )
                $('.frameBook1').css(
                    'background-image', 'url(' + bookBgarr[book] + ')'
                )
                $('.frameBook2').css(
                    'background-image', 'url(' + culturalBgarr[cultural] + ')'
                )
            }
        )