コードをコピー コードは次のとおりです: "http://www.w3.org/TR/html4/strict.dtd"> jQuery背景墙聚光灯效果代码 <br> $(window).load(function(){<br> var spotlight = {<br> // the opacity of the "transparent" images - change it if you like<br> opacity : 0.2,<p> /*以下の変数は画像の幅と高さ用であるため、<br> を <li> にできます。同じサイズ */<br> imgWidth : $('.spotlightWrapper ul li').find('img').width(), <br> imgHeight : $('.spotlightWrapper ul li').find('img' ).height() <br><br> };<br><br> //リスト項目の幅と高さを画像と同じに設定します<br> $('.spotlightWrapper ul li').css({ 'width' : Spotlight.imgWidth, 'height' : Spotlight.imgHeight });<br><br> //リスト項目の上にマウスを置くと...<br> $('.spotlightWrapper ul li').hover( function(){<br><br> //...その中にある画像を見つけて、それにアクティブなクラスを追加し、不透明度を 1 に変更します (透明度なし)<br> $(this).find('img') .addClass('active').css({ 'opacity' : 1});<br><br> // 他のリスト項目を取得し、その中の画像の不透明度をスポットライトに設定した不透明度に変更しますarray <br> $(this).siblings('li').find('img').css({'opacity' : Spotlight.opacity}) ;<br><br> //マウスが離れたとき... <br> }, function(){<br><br> //... 先ほど残したリスト項目内の画像を見つけて、アクティブなクラスを削除します<br> $(this).find('img') .removeClass('active');<br><br> });<br><br> //マウスが順序なしリストから離れるとき...<br> $('.spotlightWrapper ul').bind('mouseleave ',function(){<br> //画像を検索し、不透明度を 1 (完全に表示) に変更します<br> $(this).find('img').css('opacity', 1);<br> });<br><br> });<br> <br> body {background:black;色:白; font-family: 'georgia' } /* 重要ではありません */<br> .spotlightWrapper ul { <br> list-style-type: none; /* リスト項目 (円) のデフォルトのスタイルを削除します */ <br> margin:0px; /* デフォルトのマージンを削除 */<br> padding:0px; /* デフォルトのパディングを削除します */<br> }<br> .spotlightWrapper ul li { <br> float:left; /* 重要: left float */<br> position:relative; /* 上と左の配置を使用できるようにします */<br> }<br> .spotlightWrapper ul li a img { <br> width:200px; /* これは必要ありません。画像をより大きくして ' */<br> position:relative; に変更しただけです。 /* 上と左の位置を使用できるようにします */<br> border:none; /* デフォルトの青色の境界線を削除します */<br> }<br> .spotlightWrapper ul li a img.active {<br> border:4px 単色白; /* 好きなものを選択してください */<br> z-index:1; /* 他の画像の上に表示します (z-index 0 があります) */<br> left: -4px; /* 境界線の幅と同じですが、負の幅です */<br> top: -4px; /* 境界線の幅と同じですが、負の幅です */<br> }<br> .clear { clear:both; }/* 最後の項目の後のフロートをクリアします */<br> jQuery背景墙聚光灯效果 点击图片查看效果 < ;!-- 順序なしリストの開始 --> < ;/li> < ;li>
< ;/li>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
