JS實作帶有滑鼠效果的頭像及文章列表程式碼

首頁

web前端

js教程

JS實作帶有滑鼠效果的頭像及文章列表程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

js 清單頭像文章

本文實例講述了JS實現帶有滑鼠效果的頭像及文章列表程式碼。分享給大家供大家參考。具體如下：

這是一種帶有圖片功能的文章或新聞列表功能，滑鼠滑過標題列表顯示說明和圖片，多見於SNS交友網站，不過你喜歡的話，你完全可以用哦。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/js-mouse-style-face-article-list-demo/

具體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标滑过标题列表显示说明和图片</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font:normal 12px 宋体;}
.wrapper{width:300px;height:auto;overflow:hidden;border:1px solid #fdd78d;background:#ffecc6;padding:5px;}
/*平常的状态*/
dl{width:100%;height:auto;clear:both;overflow:hidden;margin:8px 0px 8px 0px;}
dl dt{display:none;}
dl dd{}
dl dd strong{float:left;margin-right:5px;}
dl dd div{float:left;width:270px;list-style-type:none;}
dl dd div h4{clear:both;font-weight:normal}
dl dd div h4 a{float:left;color:#795601;font-size:12px;font-weight:normal;text-decoration:none;}
dl dd div h4 a:hover{color:#f00;text-decoration:underline;}
dl dd div h4 span{float:right;width:75px;}
dl dd div p{display:none;}
/*鼠标划过的状态*/
dl.over{clear:both;height:55px;padding:5px;background-color: #FFFBF4;}
dl.over dt{float:right;display:block;}
dl.over dt img{border:1px solid #ccc;padding:1px;background:#fff;}
dl.over dd{float:left;}
dl.over dd strong{font-size:28px;color:red;vertical-align:top;}
dl.over dd div{float:left;width:195px;}
dl.over dd div h4{clear:both;font-weight:normal}
dl.over dd div h4 a{color:#b34408;}
dl.over dd div h4 a:hover{color:#f00;text-decoration:underline;}
dl.over dd div h4 span{float:right;}
dl.over dd div p{clear:both;display:block;margin-top:5px;}
</style>
<script language="javascript">
window.onload=function(){
 var dl=document.getElementsByTagName("dl");
 if(dl.length<1) return false;
 for(var i=0;i<dl.length;i++){
  //初始化，让第一个类为over
  if(dl[i].className.indexOf("over")==-1){
   dl[0].className="over";
  }
  //遍历循环，模拟:hover伪类
  dl[i].onmouseover=function(){
   for(var j=0;j<dl.length;j++){
    dl[j].className="";
   }
   this.className="over";
  }
 }
}
</script>
</head>
<body>
<div class="wrapper">
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>01</strong>
   <div>
    <h4><span>人气：19045</span><a href="#">酷站展示</a></h4>
    <p>300M独立IP双线空间 100元/年</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>02</strong>
   <div>
    <h4><span>人气：34534</span><a href="#">视频教程</a></h4>
    <p>1G全能空间仅99元 免备案</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>03</strong>
   <div>
    <h4><span>人气：79789</span><a href="#">loading素材</a></h4>
    <p>网罗网络最新flash动画、素材</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>04</strong>
   <div>
    <h4><span>人气：4323</span><a href="#">flash片头</a></h4>
    <p>企业建网站100元起,送源码</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>05</strong>
   <div>
    <h4><a href="#">flash动画</a><span>人气：6456</span></h4>
    <p>全国最低价 服务器年付仅2000元</p> 
   </div>
  </dd>
 </dl>
</div>
</body>
</html>

登入後複製

希望本文所述對大家的JavaScript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7758

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

恢復win11預設頭像的教程 Jan 02, 2024 pm 12:43 PM

如果我們更換了自己的系統帳戶頭像，但是不想要了，結果找不到win11怎麼更改預設頭像了，其實我們只要找到預設頭像的資料夾就可以恢復了。 win11頭像恢復預設1、先點開底部任務欄的“Windows標誌”2、接著在其中找到並打開“設定”3、然後進入左邊欄的“帳戶”4、隨後點開右側的“帳戶資訊” 5.開啟後，點選選擇照片中的「瀏覽檔案」6、最後進入「C:\ProgramData\Microsoft\UserAccountPictures」路徑就可以找到系統預設頭像圖片了。

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

今日頭條發布文章怎麼有收益？今日頭條發布文章獲得更多收益方法！ Mar 15, 2024 pm 04:13 PM

一、今日頭條發布文章怎麼有收益？今日頭條發布文章獲得更多收益方法！ 1.開通基礎權益：原創文章選擇投放廣告可獲得收益，影片必須原創橫屏才會有收益。 2.開通百粉權益：粉絲量達百粉以上，微頭條、原創問答創作及問答均可獲得收益。 3.堅持原創作品：原創作品包含文章、微標題及問題等，要求300字以上。注意違規抄襲作品作為原創發布，會被扣信用分，即使有收益也會被扣除。 4.垂直度：做專業領域一類的文章，不能隨意跨領域寫文章，會得不到合適的推薦，達不到作品的專和精，難以吸引粉絲讀者。 5.活躍度：活躍度高，

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

Win10如何更改帳戶名稱和頭像-詳細步驟指南 Jan 14, 2024 pm 01:45 PM

註冊了win10的帳戶之後，有很多的小伙伴覺得自己的頭像都是默認的不是很好看，為此想要去改頭像，下面就帶來了更改頭像的教程，想知道的可以來一起看看。 win10帳戶名稱怎麼改頭像：1、先點選左下角開始。 2、然後在彈出的選單中點擊上面的頭像。 3.進入之後點選「更改帳戶設定」。 4、然後點選頭像下面的「瀏覽」。 5.找到自己想作為頭像的照片來選擇。 6、最後即可成功的修改完成。

建立雜貨清單的方法：使用 iPhone 的「提醒事項」App Dec 01, 2023 pm 03:37 PM

在iOS17中，Apple在提醒應用程式中添加了一個方便的小清單功能，以便在您外出購買雜貨時為您提供幫助。繼續閱讀以了解如何使用它並縮短您的商店之旅。當您使用新的「雜貨」清單類型（在美國以外名為「購物」）建立清單時，您可以輸入各種食品和雜物，並按類別自動組織它們。該組織使您在雜貨店或外出購物時更容易找到您需要的東西。提醒中可用的類別類型包括農產品、麵包和穀物、冷凍食品、零食和糖果、肉類、乳製品、雞蛋和奶酪、烘焙食品、烘焙食品、家居用品、個人護理和健康以及葡萄酒、啤酒和烈酒。以下是在iOS17創

boss直聘頭像怎麼換回默認 Feb 23, 2024 pm 04:07 PM

boss直聘頭像怎麼換回默認?boss直聘頭像是可以隨意選擇調整的，但是多數的小伙伴不知道boss直聘頭像如何換回默認，接下來就是小編為玩家帶來的boss直聘頭像換回預設方法教程，有興趣的玩家快來一起看看吧！ boss直聘頭像怎麼換回預設1、先打開boss直聘APP，主頁右下角【我的】專區點擊上方的頭像;2、然後進入到個人資訊的介面，繼續點擊頭像;3、之後選擇【拍照】、【從相簿選擇】即可換回預設。

See all articles

JS實作帶有滑鼠效果的頭像及文章列表程式碼_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題