フロントエンド: html+css+js を使用して、Baidu ホット検索映画リストのマウスイン特殊効果を模倣します。
1. 実施原則
上の図は、Baidu のホット検索映画リスト上でマウスを移動したときの特殊効果を示しています。個人的には、上記の特殊効果の原理は、相対配置と絶対配置を利用することで実現されているのではないかと感じています（マウスを移動させた場合と移動させなかった場合では、要素の配置が若干異なります）。マウス移動時の遅延効果はCSS上でトランジション（トランジション効果の設定に使用）を設定することで実現します。私の実装効果は次のとおりです（特殊効果のみが実現され、他の要素のレイアウトは行われません）。
2. インターフェースのレイアウト
ulタグとliタグを使用し、liタグの高さを30pxに設定し、liタグの属性overflow:hidden;（余分な部分を非表示にする）を設定し、liタグの相対位置を設定します
。liタグにclass属性を設定し、このclass属性のpタグ（タイトル設定用）とimgタグ（写真）で絶対位置を設定します。マウスを li タグの上に移動すると、li タグの class 属性を変更するだけです。
HTML コードは次のとおりです。
CSS スタイル コードは次のとおりです。
3.jsでマウスの出入り監視を実現
これには主に、マウスオーバーとマウスアウトという 2 つのイベントが含まれており、それぞれマウスがこの要素に出入りするときに実行される操作を表します。私たちがしなければならないことは、マウスが li タグ内に移動したときに、他の li タグ要素の class 属性を空に設定し、現在の li タグ要素の class 属性を上記のものに設定することです。そして、マウスが ul タグの外に移動すると (デフォルトの効果に戻ります。つまり、最初の li タグの class 属性値が上記の値になります)、他の li タグ要素の class 属性を空に設定し、最初のliタグクラスの属性値 上記のプロパティ値を設定するだけです。参考コードは以下の通りです。jquery
を使用するとコード量が大幅に削減されます。
4. 参照コードは次のとおりです。
<!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>