<!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> </body> </html> [Ctrl+A 全選 注:如需引入外部Js需刷新才能執行] JavaScript技術:比較炫的圖片播放器 js 焦點效果代碼,轉載需保留來源! 鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。