qq图标点亮方法（qq聊天所有标识）

一、基本流程 QQ聊天标识点亮指的是当进行对应操作时，对应的QQ图标会变亮。QQ聊天标识主要包括聊天界面中的头像、消息列表的头像以及好友列表中的在线标识等等。下面就来介绍如何实现QQ聊天标识的点亮。 1. 头像 首先，在聊天界面中，用户的头像是通过CSS效果实现点击后的变亮效果的。可以通过以下代码实现： ``` .avatar:hover { opacity: 0.7; } ``` 当鼠标放上去的时候，会出现半透明的头像，这就实现了头像的点亮效果。 2. 消息列表的头像 消息列表中的头像可以通过CSS中的图片灰化效果实现。代码如下： ``` .list-avatar img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .list-avatar img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); } ``` 这里通过设置灰度的程度来实现点亮效果，当鼠标放上去后，灰度程度就被设置为0%，图片就会变亮。 3. 好友列表中的在线标识 在好友列表中，除了头像之外，还有一个重要的标识就是在线标识。当好友在线时，这个标识就变亮了。这个可以通过CSS的伪类实现，代码如下： ``` .friend-avatar .online:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); } ``` 这段代码的意思是，在好友头像的外层div上添加一个伪元素，设置其position为absolute，然后通过background属性来设置其背景色为半透明的白色，从而实现在线标识的点亮效果。 二、JS代码实现 上述的CSS代码实现方式可以实现QQ聊天标识的点亮，但是在实际的应用中，可以通过JS代码来实现更优秀的交互效果。下面就来介绍JS代码实现的方法。 1. 头像 JS代码实现头像的点亮效果，需要先获取到头像的DOM元素，然后添加一个鼠标事件监听器，在鼠标移动到头像上时改变其透明度即可。代码如下： ``` var avatar = document.querySelector('.avatar'); avatar.addEventListener('mouseover', function() { this.style.opacity = 0.7; }); avatar.addEventListener('mouseout', function() { this.style.opacity = 1; }); ``` 在这段代码中，我们通过querySelector获取了头像的DOM元素，然后添加了两个事件监听器，一个监听鼠标移入事件，一个监听鼠标移出事件，鼠标移入时将头像透明度改为0.7，移出时又恢复为1。 2. 消息列表的头像 消息列表中的头像可以通过JS代码来实现一些更加炫酷的效果，如给予头像放大、缩小、旋转等动画效果。这需要在CSS中设置一个动画效果，然后在JS代码中添加事件监听器来触发这个动画。 ``` .list-avatar img { animation: pulse 0.5s infinite; } .list-avatar img:hover { animation: none; } @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } } ``` 这段代码中，我们设置了一个名为pulse的动画，将其应用到消息列表中头像的img元素上，让其无限循环。当鼠标移入时，将动画样式设置为none，让动画停止。通过适当的添加CSS样式和JS代码，我们还可以实现消息列表头像的旋转、放大缩小等效果。 3. 好友列表中的在线标识 在线标识是通过CSS伪类实现的，如果要通过JS代码来实现，需要先将CSS伪类中的内容动态生成。下面是实现在线标识的点亮效果的JS代码： ``` var avatar = document.querySelector('.friend-avatar'); if (avatar.classList.contains('online')) { var online = document.createElement('div'); online.classList.add('online-indicator'); avatar.appendChild(online); } ``` 这段代码中，我们先判断好友头像的div中是否包含online类，如果包含，则动态生成一个用来显示在线标识的div，然后将其插入到好友头像的div中。不同的设计师，可能对于这个在线标识的点亮效果有不同的设计，可以扩展代码来达到自己需要的效果。 三、其他技巧 以上就是如何通过CSS和JS来实现QQ聊天标识的点亮效果的方法，但在实际应用中，还可以使用其他技巧来优化该效果。 1. SVG图像 SVG图像是一种矢量图形格式，它可以通过CSS和JS来实现各种交互效果，还可以在不同的设备上无缝适应。与传统的位图图像相比，SVG图像更灵活、更适应动态效果。在实现QQ聊天标识时，可以考虑使用SVG图像来实现更加优秀的效果。 2. 通过jQuery来实现 当写JS代码时，可以使用jQuery库来简化代码，这使得效果更加清晰，并且在不同的浏览器中执行更加稳定。下面是一个jQuery实现的在线标识点亮效果的代码： ``` $('.friend-avatar.online').append(''); ``` 这段代码会在包含online类的好友头像的div中添加一个在线标识的div元素。可以看出，使用jQuery生成在线标识的效果非常简洁。 总结 QQ聊天标识的点亮效果是一个经典的交互效果，在实际应用中也非常普遍。通过CSS和JS的简单代码实现，可以让交互效果更加炫酷，对于交互设计师而言是一种必备的技巧。