jQuery应用-图片突出显示

最新推荐文章于 2022-07-20 23:50:19 发布

菜鸟-程序员

最新推荐文章于 2022-07-20 23:50:19 发布

阅读量376

点赞数 1

分类专栏： jQuery 前端文章标签： jquery html5 css javascript webstorm

本文链接：https://blog.csdn.net/qq_44038540/article/details/113186256

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

jQuery应用-图片突出显示

1.项目描述

本项目旨在通过使用jQuery来实现鼠标滑动到哪张图片，哪张图片就被突出显示的功能。

2.项目效果预览

在这里插入图片描述

3.项目设计核心

灵活运用jQuery，通过鼠标滑到的图片与其余同地图片之间的透明比对比，从而实现图片突出显示。

4.HTML页面设计

<div class="current">
        <ul class="nav">
            <li><a href="#"><img src="pactiure/01.jpg"/></a></li>
            <li><a href="#"><img src="pactiure/02.jpg"/></a></li>
            <li><a href="#"><img src="pactiure/03.jpg"/></a></li>
            <li><a href="#"><img src="pactiure/04.jpeg"/></a></li>
            <li><a href="#"><img src="pactiure/05.jpeg"/></a></li>
            <li><a href="#"><img src="pactiure/06.jpg"/></a></li>
        </ul>
    </div>

5.CSS样式设计

<style>
        .current{
            position: absolute;
            left: 400px;
            top: 100px;
            width: 800px;
            height: 500px;
            background-color: black;
        }
        img{
            width: 200px;
            height: 200px;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            border: solid black 2px;
            padding:10px;
        }
    </style>

6.jQuery设计

script>
        $(function (){
            $(".nav li").mouseover(function (){
                $(this).siblings("li").stop().fadeTo(400,0.5);
            });
            $(".nav li").mouseout(function (){
                $(this).siblings("li").stop().fadeTo(400,1);
            })
        })
    </script>

7.项目源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片突出显示</title>
    <script typeof="text/javascript" src="jQuery/jquery-3.5.1.js"></script>
    <style>
        .current{
            position: absolute;
            left: 400px;
            top: 100px;
            width: 800px;
            height: 500px;
            background-color: black;
        }
        img{
            width: 200px;
            height: 200px;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            border: solid black 2px;
            padding:10px;
        }
    </style>
</head>
<body>
    <script>
        $(function (){
            $(".nav li").mouseover(function (){
                $(this).siblings("li").stop().fadeTo(400,0.5);
            });
            $(".nav li").mouseout(function (){
                $(this).siblings("li").stop().fadeTo(400,1);
            })
        })
    </script>
    <div class="current">
        <ul class="nav">
            <li><a href="#"><img src="pactiure/01.jpg"/></a></li>
            <li><a href="#"><img src="pactiure/02.jpg"/></a></li>
            <li><a href="#"><img src="pactiure/03.jpg"/></a></li>
            <li><a href="#"><img src="pactiure/04.jpeg"/></a></li>
            <li><a href="#"><img src="pactiure/05.jpeg"/></a></li>
            <li><a href="#"><img src="pactiure/06.jpg"/></a></li>
        </ul>
    </div>

</body>
</html>