鼠標移動鏈接上，滑動展開/隱藏圖片效果

2024-09-05 12:18:32

字體：大中小

來源：轉載

供稿：網友

鼠標移動鏈接上，滑動展開/隱藏圖片效果，鼠標放在“上一頁”“下一頁”上，立即浮現出所對應的圖片，有點提前預覽的味道，讓用戶知道下一頁或下一頁的大致內容，很好的提升了用戶體驗。

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>鼠標移動鏈接上，滑動展開/隱藏圖片效果</title><script language="javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript" language="javascript"> $(function(){	$(".list>li:has(div)").hover(function(){			$(this).children('a').addClass('red').end().find('div').slideDown("fast");},		function(){			$(this).children('a').removeClass('red').end().find('div').slideUp("fast");		});	});</script><style>*{margin:0;padding:0}body{background:#F8F3ED}li{list-style:none}.list{height:40px;background:#fff;padding-left:100px;}.list li{float:left;position:relative;}.list li a{float:left;width:100px;height:40px;line-height:40px; text-align:center;color:#B7B7B7;text-decoration:none; font-family:"微軟雅黑";}.list li a:hover{background:#99C228;color:#FFF;}.list .box{position:absolute;top:40px;left:0;display:none;width:240px;height:170px;background:#99C228;color:#FFF;}.list .box img{width:220px;height:150px;margin:10px;}.list li a:hover,.red{background:#99C228!important;color:#FFF!important;}</style></head><body><ul class="list">	<li>上一頁    	<div   id="iwvjtn8m0"   class="box"><img src="/d/file/p/2024/09-05/95abcbae97576abc727c2808a43a1014.jpg" /></div>    </li>	<li>下一頁    	<div   id="iwvjtn8m0"   class="box"><img src="/d/file/p/2024/09-05/1876e14d8aca3b32a5fc0ea96078aee5.jpg" /></div>    </li></ul></body></html>

上一篇：一個自定義的網頁滾動條，支持圖片顯示

下一篇：打開即全屏的網頁窗口