首页 > PHP资讯 > HTML5培训技术 > jQuery实现操作Checkbox,Table,鼠标放在图片上放大效果

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

HTML5培训技术

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



   
   
    <scriptsrc="http://blog.csdn.net/c979170768/article/details/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  trinput[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").mou ut(function () {
// $("#disp").append($("table tr td img").clone());

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

})
        })
    《script》
   


   


   

       



































       

选择

封面

作者

数量

价格



白宁宁

20

45.5



小明

30

75.3



大刚

50

65.3

全选


 

 

 

   

   

   
   

   


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

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

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持42不支持0