JQuery实现操作Checkbox,Table,鼠标放在图片上放大效果

最新推荐文章于 2021-03-24 17:40:51 发布

C979170768

最新推荐文章于 2021-03-24 17:40:51 发布

阅读量1.9k

点赞数

文章标签： table jquery class function input homework

本文链接：https://blog.csdn.net/C979170768/article/details/7350320

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Homework.aspx.cs" Inherits="Homework" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
    .imgclass{ position:absolute; border:solid 1px #eee; width:200px; height:350px; display:none;}

    </style>
    <script src="Scripts/Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#ChckAll").click(function () {
                if ($("#ChckAll").is(":checked")) {
                    //this is unchecked
                    $("input[type=checkbox]").each(function () {
                        $(this).attr("checked", "checked");
                    });
                } else {
                    $("input[type=checkbox][checked=checked]").each(function () {
                        $(this).attr('checked', !$(this).attr('checked'));
                    });
                    $("#ChckAll").attr("checked", !$(this).attr("checked"));
                }
            })
            $("#Button1").click(function () {
                $("table tr input[type=checkbox][checked=checked][name=1]").each(function () {
                    //alert($(this).val());
                    // $('table tr[' + $(this).val() + ']').remove();   //第一种（灵活性不好）
                    $(this).parent().parent().remove();                 //第二种
                });
            })
            $("table tr td img").mousemove(function (e) {
                // $("#disp").append($("table tr td img").clone());
                //$("#disp img").attr("src", $(this).attr("src"));
               // $("#disp img").css("display", "block"); //.css("Top", 5000);
                $('#disp img').attr('src', this.src).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();
               // $('#img1').attr('src', this.src).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();

//$("#disp img").css("display", "block").css("margin-top", event.offsetY);

})

$("table tr td img").mouseout(function () {
// $("#disp").append($("table tr td img").clone());

                //$("#disp img").attr("src", $(this).attr("src"));
                // $("#disp img").css("display", "none");
               $("#disp img").hide();

            })
        })


    </script>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            text-align: center;
        }
        .style3
        {
            text-align: center;
            font-weight: bold;
        }
        #imgpic
        {
            height: 221px;
        }
        #imgpic
        {
            display:none;

            }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 652px">

        <table class="style1">
            <tr>
                <td class="style3">
                    选择</td>
                <td class="style3">
                    封面</td>
                <td class="style3">
                    作者</td>
                <td class="style3">
                    数量</td>
                <td class="style3">
                    价格</td>
            </tr>
            <tr id="0">
                <td class="style2">
                    <input id="Checkbox1" name="1" type="checkbox" value="1" /></td>
                <td class="style2">
                    <img alt="" src="ImageHomework/1.jpg" style="height: 57px; width: 52px" /></td>
                <td class="style2">
                    白宁宁</td>
                <td class="style2">
                    20</td>
                <td class="style2">
                    45.5</td>
            </tr>
            <tr id="1">
                <td class="style2">
                    <input id="Checkbox2" name="1" type="checkbox" value="2" /></td>
                <td class="style2">
                    <img alt="" src="ImageHomework/2.jpg" style="height: 57px; width: 52px" /></td>
                <td class="style2">
                    小明</td>
                <td class="style2">
                    30</td>
                <td class="style2">
                    75.3</td>
            </tr>
            <tr id="2">
                <td class="style2">
                    <input id="Checkbox3" name="1" type="checkbox" value="3" /></td>
                <td class="style2">
                    <img alt="" src="ImageHomework/3.jpg" style="height: 57px; width: 52px" /></td>
                <td class="style2">
                    大刚</td>
                <td class="style2">
                    50</td>
                <td class="style2">
                    65.3</td>
            </tr>
            <tr>
                <td class="style2">
                    全选<input id="ChckAll" type="checkbox"/></td>
                <td class="style2">
                    <input id="Button1" type="button" value="删除" /></td>
                <td class="style2">
                     </td>
                <td class="style2">
                     </td>
                <td class="style2">
                     </td>
            </tr>
        </table>

    </div>
    <div id="disp">
    <img id="imgpic" class="imgclass" src="" alt="asd" />
    </div>
    </form>
</body>
</html>

.imgclass{ position:absolute; border:solid 1px #eee; width:200px; height:350px; display:none;} //这句样式中的position:absolute十分的重要,如果没有这个

程序将不会有鼠标悬停时的大图片显示,这个小问题纠结了一个多小时才找到，大家一定不要像我一样出像这样的小问题了

C979170768

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现操作Checkbox,Table,鼠标放在图片上放大效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> .imgclass{ position:absolute; border:solid 1px #eee; width:200px; height:350px; display:non
复制链接

扫一扫