Front-end: use html+css+js to imitate the mouse-in special effect of Baidu hot search movie list
1. Implementation principle
The special effect of moving the mouse on Baidu's hot search movie list is shown in the figure above. Personally, I feel that the principle of the above-mentioned special effects is realized by using relative positioning and absolute positioning (when the mouse is moved in and not moved in, the element layout is a little different). As for the delay effect when the mouse moves in, it is realized by setting transition (used to set the transition effect) on css. My implementation effect is as follows (only the special effect is realized, and the layout of other elements is not done):
2. Interface layout
Use the ul tag and the li tag, set the height of the li tag to 30px, and set the li tag attribute overflow:hidden; (the excess part is hidden), and
set the relative positioning for the li tag. Set a class attribute for the li tag, the p tag (for setting the title) and the img tag (picture) of this class attribute set absolute positioning. When the mouse moves over the li tag, just change the class attribute of the li tag.
The html code is as follows:
The css style code is as follows:
3. js realizes the monitoring of mouse moving in and out
It mainly involves two events, mouseover and mouseout, which represent the operations performed when the mouse moves in and out of this element, respectively. What we have to do is, when the mouse moves into the li tag, set the class attribute of other li tag elements to empty, and set the class attribute of the current li tag element to the one mentioned above. And when the mouse moves out of the ul tag (restore to the default effect, that is, the first li tag class attribute value is the one mentioned above.), set the class attribute of other li tag elements to empty, and set the first li tag class attribute value Just set the above property value. The reference code is as follows:
use jquery, so that the amount of code can be significantly reduced.
4. The reference code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特效</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
margin: 20px auto;
list-style: none;
width: 160px;
}
ul >li{
height: 30px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.5s;
}
ul >li >p{
width: 100%;
line-height: 30px;
text-align: center;
}
ul .cur_li{
height: 107px;
}
ul .cur_li img{
width: 80px;
height: 107px;
position: absolute;
top: 0;
left: 0;
}
ul .cur_li p{
width: 80px;
position: absolute;
top: 10px;
left: 80px;
}
</style>
<script src="https://pss.bdstatic.com/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
</head>
<body>
<ul>
<li class="cur_li">
<p>八角笼中</p>
<img src="https://fyb-2.cdn.bcebos.com/hotboard_image/fe8e114ab0561124539454972d4a2cbc?x-bce-process=image/resize,m_fill,w_160,h_214" alt="">
</li>
<li>
<p>封神第一部</p>
<img src="https://fyb-2.cdn.bcebos.com/hotboard_image/427d971c382982519908c4d9d1aa0f83?x-bce-process=image/resize,m_fill,w_160,h_214"
alt="">
</li>
<li>
<p>消失的她</p>
<img src="https://fyb-2.cdn.bcebos.com/hotboard_image/b7459789f21ff9fd635a55c996c81b65?x-bce-process=image/resize,m_fill,w_160,h_214"
alt="">
</li>
</ul>
</body>
<script type="text/javascript">
var fun = function(){
$('ul li').each((i,e)=>{
$(e).attr('class','');
});
}
$('ul >li').each((i,e)=>{
$(e).mouseover(() => {
fun();
$(e).attr('class','cur_li');
});
});
$('ul').mouseout(()=>{
fun();
$(document.querySelector('ul >li')).attr('class','cur_li');
});
</script>
</html>