打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
鼠标滑过,缩略图放大显示(纯CSS)
  • 纯CSS实现鼠标经过放大图片,可能不是太好,因为缩略图实际上加载的仍然是完整的大幅图片,只不过是用CSS控制了显示的区域,因此可能会影响网页加载,不过CSS方法是不错,初学者参考一下。
  • <!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>鼠标滑过,缩略图放大显示</title>
    <style type="text/css">
    <!--
    * {margin:0;padding:0;}
    img {border:0}
    #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 a img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;}
    #imgmove a:hover {border:none }
    #imgmove a:hover img {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);}
    -->
    </style>
    </head>
    <body>
    <br />
    <ul id="imgmove">
      <li><a href="#"><img src="/jscss/demoimg/wall1.jpg" /></a></li>
      <li><a href="#"><img src="/jscss/demoimg/wall2.jpg" /></a></li>
    </ul>
    </body>
    </html>

    本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
    打开APP,阅读全文并永久保存 查看更多类似文章
    猜你喜欢
    类似文章
    【热】打开小程序,算一算2024你的财运
    style type=
    代码学习群简易教程(5)
    DIV+CSS 常用代码大全
    各大网站CSS代码初始化集合
    CSS+JS自动改变切换方向的图片幻灯切换效果
    网站制作规范
    更多类似文章 >>
    生活服务
    热点新闻
    分享 收藏 导长图 关注 下载文章
    绑定账号成功
    后续可登录账号畅享VIP特权!
    如果VIP功能使用有故障,
    可点击这里联系客服!

    联系客服