zoukankan      html  css  js  c++  java
  • 鼠标放在小图片上显示大图标

    <!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>jQuery图片预览</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            var ShowImage = function() {
                xOffset = 10;
                yOffset = 30;
                jQuery("#imglist").find("img").hover(function(e) {
                    jQuery("<img id='imgshow' src='" + this.src + "' />").appendTo("body");
                    jQuery("#imgshow")
                        .css("top", (e.pageY - xOffset) + "px")
                     .css("left", (e.pageX + yOffset) + "px")
               .fadeIn("fast");
                }, function() {
                    jQuery("#imgshow").remove();
                });

                jQuery("#imglist").find("img").mousemove(function(e) {
                    jQuery("#imgshow")
                       .css("top", (e.pageY - xOffset) + "px")
                 .css("left", (e.pageX + yOffset) + "px")
                });
            };

            jQuery(document).ready(function() {
                ShowImage();
            });
        </script>
        <style type="text/css">
            body{ 600px; margin:0 auto;}
            img{border:none;}
            ul,li{
             margin:0;
             padding:0;
            }
            li{
             list-style:none;
             float:left;
             display:inline;
             margin-right:10px;
            }
            #imglist img{150px;height:120px;}
            #imgshow{
             position:absolute;
             border:1px solid #ccc;
             background:#333;
             padding:5px;
             color:#fff;
             display:none;
         }
        </style>
    </head>
    <body>
    <ul id="imglist">
        <li><a><img src="http://www.jquery001.com/images/demo/35624390.jpg" alt="安以轩" /></a></li>
        <li><a><img src="http://www.jquery001.com/images/demo/35624390.jpg" alt="安以轩" /></a></li>
    </ul>
    </body>
    </html>

  • 相关阅读:
    三目运算符
    程序流程结构——if语句
    类型转换
    运算符
    scanf函数与getchar函数
    结构体成员有冒号 位域 位段
    AI作曲的一个点子
    《惯性导航》邓正隆 第一章 惯性导航的基础知识
    《C陷阱与缺陷》 第0章导读 第1章词法陷阱
    类与类之间的关系 18
  • 原文地址:https://www.cnblogs.com/haiying520/p/5337412.html
Copyright © 2011-2022 走看看