zoukankan      html  css  js  c++  java
  • 【荐】CSS实现的鼠标点击小图无刷新放大图片代码

    代码简介:

    这个图片特效在很多相册中用到,当鼠标点击小图片的时候无刷新窗口显示大图,基于上是用CSS实现,非常实用。

    代码内容:

    View Code
    <html>
    <head>
    <title>【荐】CSS实现的鼠标点击小图无刷新放大图片代码 - www.webdm.cn</title>
    <style>
    body
    {font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif;}
    a
    {color:#000; text-decoration:none;}
    .img
    {border:0px;}
    .black_overlay
    {
    display
    : none;
    position
    : absolute;
    top
    : 0%;
    left
    : 0%;
    width
    : 100%;
    height
    : 100%;
    background-color
    : black;
    z-index
    :1001;
    -moz-opacity
    : 0.8;
    opacity
    :.80;
    filter
    : alpha(opacity=80);
    }
    .white_content
    {
    display
    : none;
    position
    : absolute;
    top
    : 15%;
    left
    : 25%;
    width
    : 535px;
    height
    : 420px;
    border
    : 16px solid #FFF;
    border-bottom
    :none;
    background-color
    : white;
    z-index
    :1002;
    overflow
    : auto;
    }
    </style>
    </head>
    <body>
    <p><a href = "#" onclick = "document.getElementById('light').style.display='block';document.getElementById

    ('fade').style.display='block'"
    ><img src="http://www.webdm.cn/images/wall1_s.jpg" width="100" height="89"/></a></p>
    <div id="light" class="white_content"><img src="http://www.webdm.cn/images/wall1.jpg"/> <a href = "javascript:void(0)"

    onclick
    = "document.getElementById('light').style.display='none';document.getElementById

    ('fade').style.display='none'"
    >Close</a></div>
    <div id="fade" class="black_overlay"></div>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

    代码来自http://www.webdm.cn/webcode/48802159-d5de-4d88-bca3-292bd6b1d839.html

  • 相关阅读:
    TypeScript--变量
    TypeScript--Hello
    前端跨域的方式
    内存泄漏与垃圾回收机制
    前端拷贝
    React生命周期16版本
    Redux三大原则
    IE6常见CSS解析Bug及hack
    Redux的应用
    vue-router-基础
  • 原文地址:https://www.cnblogs.com/webdm/p/2322261.html
Copyright © 2011-2022 走看看