比較炫的圖片播放器 js 焦點效果代碼

更新時間：2008年07月18日 13:13:04 作者：

之前做過一個,有點不理想, 改進下兒,測試一下，果然厲害

<!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> <style type="text/css">     #focus_m{position:relative; width:420px; height:384px; background:#133775}     .f_img_roll{width:350px; height:300px; position:relative;}     .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}     .f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}     .f_img_tree div{position:absolute; z-index:201; top:3px; right:0; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}     .f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}     .f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}     .f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}     .f_con{color:#fff; height:70px;}     .f_con .f_title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}     .f_con .f_title a:link, .f_con .f_title a:visited{color:#fff; text-decoration:none}     .f_con .f_title a:hover{text-decoration:underline}     .f_con .f_con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}   </style>    </head> <body> <div   class="ublnpf9mb"   id="focus_m">   <div   id="ublnpf9mb"   class="f_img_roll"></div><div   id="ublnpf9mb"   class="f_img_tree"></div>   <div   id="ublnpf9mb"   class="f_con">     <div   id="ublnpf9mb"   class="f_title"></div>     <div   id="ublnpf9mb"   class="f_con"></div>   </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: