滑鼠滑過縮圖時放大圖片(純Css)_經驗交流

來源:互聯網
上載者:User
寫著好玩的,並無技術含量,見笑了。
沒有使用到Js,純Css控制的。
彈出的圖片不會把旁邊的容器“擠”開。
測試通過IE7 Firefox2.11。(理論相容IE6)
<!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=utf-8" /> <title>www.jb51.net 指令碼之家 滑鼠滑過縮圖時放大圖片</title> <style type="text/css"> <!-- * {margin:0;padding:0;} body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;} img {border:0} p {font-size:14px;} #imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid;position:relative;*position:static;} #imgmove img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;} #imgmove img:hover {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);} --> </style> </head> <body> <p>本例旨在展示滑鼠滑到縮圖上時,放大圖片。</p> <!--[if IE 6]><![endif]--> <ul id="imgmove"> <li></li> <li></li> <li></li> </ul> <!--[if IE 6]><![endif]--> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.