【博学谷学习记录】超强总结，用心分享丨秦腔亮灯选择块

图片悬停淡出效果
原创 于 2022-12-11 22:08:08 发布 · 125 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #javascript

本文介绍了一种使用jQuery实现的图片悬停效果，当鼠标悬停在一个图片上时，其它图片将淡出以突出当前图片。通过简单的HTML结构与CSS布局配合jQuery脚本实现了这一视觉效果。

     

 

  *{

            padding: 0;

            margin: 0;

        }

        ul{

            list-style: none;

        }

        body{

            background-color: black;

        }

        .wrapper{

            margin: 100px auto 0;

            width: 630px;

            height: 394px;

            background-color: #000;

            padding: 10px 0 0 10px;

            overflow: hidden;

            border: 1px solid #fff;

        }

       

        .wrapper li{

            float: left;

            margin: 0 10px 10px 0;

        }

        .wrapper img{

            display: block;

        }

    </style>

    <script src="./jquery.min.js"></script>

</head>

<body>

    <div class="wrapper">

        <ul>

            <li><a href="#"><img src="./images/01.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/02.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/03.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/04.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/05.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/06.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/07.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/08.jpg" alt=""></a></li>

            <li><a href="#"><img src="./images/09.jpg" alt=""></a></li>

        </ul>

    </div>

    <script>

        // $(function(){

        //     $('.wrapper li').hover(function(){

        //         $(this).siblings().stop().fadeTo(400,0.5);

        //     },function(){

        //         $(this).siblings().stop().fadeTo(400,1)

        //     })

        // })

        $(function(){

            $('li').hover(function(){

                $(this).siblings().stop().fadeTo(400,0.5)

            },function(){

                $(this).siblings().stop().fadeTo(400,1)

            })

        })

    </script>

大秦腔 大秦腔韩子生原型是谁.doc
01-20
【大秦腔】大秦腔是中国传统戏曲剧种之一，源于陕西省，尤以关中地区最为盛行。它以其独特的大气、豪迈风格著称，音腔直透九霄，富有强烈的感染力和震撼力。大秦腔在表演时注重丹田气壮，讲究演员的形神兼备，力求将...
2019_2020学年高中语文第五单元吟咏文化传承精神16秦腔学案含解析粤教版选修中国现代散文蚜20200430182
09-08
《秦腔》：吟咏与传承的文化史诗 在中国现代文学的璀璨星河中，《秦腔》无疑是一颗耀眼的星，它以其独特的魅力和深厚的文化底蕴，吸引了无数读者的目光。本书是由当代著名作家贾平凹倾力创作，不仅呈现了秦腔这一...
jQuery实现高亮展示突出展示案例
09-12
HTML+css+jQuery实现高亮展示突出展示案例，鼠标移动到想要展示的地方，该地方出现高亮或者突出显示的效果，可以直接套用代码到自己的模板中
jQuery效果高亮显示案例
guohui的博客
02-06 1331
一、设计思路 高亮显示案例，主要是对之前的jQuery效果做的巩固。它的主要思路是当点击其中一个图片时，其他的图片都变暗。主要是一个大盒子里面放着许多小的li。通过改变他们之间的透明度来实现效果。 二、代码 css *{ margin: 0; padding: 0; list-style: none; text-decoration: none; }...
jQuery高亮显示案例
nsnydnz的博客
08-29 390
jQuery高亮显示案例 文章目录jQuery高亮显示案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
jQuery 图片高亮显示
weixin_34167819的博客
06-15 712
主要的jQuery代码： 1 $(function() { 2 $("ul li").hover(function() { 3 // over 4 //鼠标移入当前列透明度为1 其他列为0.5 5 $(this).css("opaacity", "1")...
图片突出显示（图片高亮显示）-jQuery实现-案例
刘伟佳的博客
11-23 6922
效果展示： 当鼠标放在某一张图片上的时候，突出显示这张图片。 分析： 给鼠标移入的图片设置鼠标移入事件：把当前的图片透明度设置为1，其他兄弟节点的图片透明度设置为0.2； 鼠标离开大的div， 把所有的图片的透明度设置为1。 核心代码也十分的简单： $('.wrapli').mouseenter(function(){ //css方法有返回值，返回值就是设置的这个方法的元素本身 $(this...
秦腔读后感3000字【《秦腔》读后感】
08-19
在阅读了贾平凹先生的长篇小说《秦腔》后，我深受感触。这本书不仅仅是对秦腔艺术的描绘，更深刻地反映了中国农村社会的历史变迁，以及农民与土地的关系。小说借助一个名叫清风街的地方，通过20年的发展变化，展现了...
8.5黄土高原的区域发展与居民生活学习课程.pptx
09-30
如陕北腰鼓、陕西剪纸、信天游民歌和秦腔戏曲等非物质文化遗产，不仅展现了地方特色，也反映了黄土高原人民的精神生活。随着时间的推移，这些文化形式逐渐走出黄土高原，成为全国乃至世界认识中国文化的重要窗口。 ...
2017春人教版音乐九下第2单元《秦腔牌子曲》ppt课件
11-23
### 2017春人教版音乐九下第2单元《秦腔牌子曲》知识点解析 #### 一、秦腔的历史渊源 秦腔，作为中国西北地区最具代表性的传统戏曲之一，拥有悠久的历史与丰富的文化底蕴。据《钵中莲》传奇记载，秦腔最早出现于明...
jquery高亮图片框 jquery图片展示 jquery效果很好
06-06
jquery高亮图片框 jquery图片展示 jquery效果很好
jQuery实现高亮显示的方法
12-12
本文实例讲述了jQuery实现高亮显示的方法。分享给大家供大家参考。具体如下： 主要功能代码如下： var v = [removed].pathname; $(".hd ul li a").each(function (i) { var vherf = $(this).attr("href"); if (v == vherf) { $(".hd ul li").eq(i).addClass("on") } else { $(".hd ul li").eq(i).removeClass("on") } }) 使用时设置on的css高亮部分样式即可。 希望本文所述
jQuery实现当前页面标签高亮显示的方法
12-09
本文实例讲述了jQuery实现当前页面标签高亮显示的方法。分享给大家供大家参考。具体实现方法如下： function nav(name, csskey,cssvalue) { var url = [removed].pathname + [removed].search; var v1 = ""; $(name).each(function () { v1 = "/" + $(this).attr("href"); if (v1 == url) { var v2 = $(this).css(csskey, cssvalue);
jQuery - 高亮显示
黑白两客
03-30 760
<div class="wrap"> <ul> <li> <a href="#"><img src="images/01.jpg" alt="" /></a> </li> <li> ...
jquery 高亮显示
weixin_33851429的博客
12-10 346
<div class="wrap"> <ul> <li><a href="#"><img src="imgs/01.jpg" alt=""/></a></li> <li><a href="#"><img src="imgs/02.jpg" alt=""...
jQuery-高亮显示
qq_41670147的博客
12-09 870
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jQuery实现图片高亮显示
iron_nini的博客
10-20 1724
图片高亮显示在页面中很常见，下面是用jquery实现图片高亮显示的效果 ![在这里插入图片描述](https://img-blog.csdnimg.cn/31681f8bb71942c8b0ff649d60d70e00.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYFBsdXRvLg==,size_20,color_FFFFFF,t_70,g_se,x_16 html代码部分
高亮显示案例
qq_62042780的博客
05-27 282
hover()方法：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 fadeTo()方法:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 $('.wrap li').hover(function(){ //让鼠标经过的li高亮显示出来，它其他的兄弟元素变暗 $(this).stop().
jquery高亮显示
07-24 380
<br />http://www.alistspark.com/
城市化冲击下传统文化的保护与传承——以《秦腔》为例
其次，秦腔的传承需要长时间的学习和实践，而现代社会竞争激烈、生活节奏快，年轻人面临巨大的学习和工作压力，很难有足够的时间和精力投入到传统艺术的学习中。此外，秦腔作为传统艺术的传承和发展，往往需要大量的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值