Jquery特效

来源：互联网发布：虚拟固定电话软件编辑：程序博客网时间：2024/04/29 11:11

调用js

<script type="text/javascript" src="../js/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>　<link rel="stylesheet" href="../css/minh.css" /> 　 <script type="text/javascript" src="../js/min.js"></script><script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>  <script src="../layer/layer.js" type="text/javascript"></script>

1.生成一个table

function addtable(){       var dom_tbody = $('<tbody></tbody>');       for (var j = 0; j < 200; j++) {           var dom_tr = $('<tr></tr>');           for (var i = 0; i < 200; i++) {             var id="r"+j+"l"+i;              var dom_td = $("<td id="+id+"></td>");               dom_tr.append(dom_td);           }           dom_tbody.append(dom_tr);       }       var dom_table = $('<table id="maptable" style="border:1; margin:auto;width:auto;"></table>');       dom_table.append(dom_tbody);      $("#tablediv").append(dom_table);          }

2.弹出图片

$(function(){$("#hide1").on("click",function(){ var xy=$("#hide2").html().split(",");;var pagex,pagey;pagex=xy[0];pagey=xy[1];layerid++;var div_img='<div id="layer'+layerid+'"  name="layer" class="layer" style="position: absolute;left:'+xx+'px;top:'+yy+'px;width:auto;height:auto;z-index: 50;"><div id="layer_handle'+layerid+'" class="layer_handle'+layerid+'" name="layer_handle"><img src="../img/6.png" id=img'+layerid+' style="height:30px;width:30px;position:absolute;left:0;top:0;"></img></div></div>';$("#putimg").append(div_img);      var idd='#layer'+layerid;      var handle_id="#layer_handle"+layerid;      var imgid="#img"+layerid;      $(idd).Draggable( { zIndex: 2000000000, ghosting:false, opacity: 0.7, handle:handle_id });  $(imgid).on('click',function(e){ //获取坐标后，在旁边弹出一个div   var div_edit='<div id="ee'+layerid+'" style="height:35px; text-align:center; width:100px;position: absolute; z-index: 20000000; left:'+e.pageX+'px ;top:'+e.pageY+'px"><input type="button" id="delete'+layerid+'" style="background-color: #FFF;border: 1px solid #CDCDCD;height: 30px;width: 40%;align:left" value="删除"><input type="button" id="edit'+layerid+'" style="background-color: #FFF;border: 1px solid #CDCDCD;height: 30px;width: 40%;align:right" value="修改"></div>'; $("#putEdit").append(div_edit); var deletebtn="#delete"+layerid; var editbtn="#edit"+layerid; var editdiv="#ee"+layerid; editdivid=editdiv; $(deletebtn).on('click',function(e){ $(editdiv).remove(); $(idd).remove(); }) $(editbtn).on('click',function(e){ $(editdiv).hide(); var iframtop=e.pageY+'px'; var iframleft=e.pageX+'px'; //此刻弹出一个iFrame对相关信息进行修改   $.layer({                type: 2,                title: '修改/查看',                shadeClose: true, //开启点击遮罩关闭层                offset: [iframtop ,iframleft],                area : ['280px' , '170px'],                iframe: {id:"Edit.html",src: 'editap.html'}            }); }) });});$("#hide3").on('click',function(){$(editdivid).remove();});});

<body>  <div id="putimg" ></div>  <div id="putEdit" ></div><input type="button" id="hide1" style="display:none;" ><input type="button" id="hide3" style="display:none;" ><div id="hide2" style="display:none;"></div><div style="height:45px; block" ></div><div class="file-box">     <form action="" method="post" enctype="multipart/form-data">      <input type='text' name='textfield' id='textfield' class='txt' />        <input type='button' class='btn' value='浏览...' />       <input type="file" name="imageUpload" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />      <input type="button" name="button" class="btn" value="上传" />     </form> </div> <div id="list"></div> <div id="tablediv"  style="text-align:center" ></div></body>

3.弹出layer

$(function(){$("table").on('click',function(e){var x=e.pageX.toString()+'px';var y=e.pageY.toString()+'px';xx=e.pageX.toString();yy=e.pageY.toString();$.layer({        type: 2,        title: '添加AP',        shadeClose: true, //开启点击遮罩关闭层        offset: [y , x],        area : ['280px' , '170px'],        iframe: {id:"addaps",src: 'addap.html'}    });});});

4.子页面调用父页面控件

  $(function(){  $("#yes").on('click',function(){  var returnvalue="100px,200px";  $("#hide3", window.parent.document).trigger("click");  var i = parent.layer.getFrameIndex(window.name);                                        parent.layer.close(i);  });  $("#no").on('click',function(){  $("#hide3", window.parent.document).trigger("click");//触发父页面响应事件  var i = parent.layer.getFrameIndex(window.name);//关闭该iframe                                        parent.layer.close(i);  });  })

5.根据控件出发事件进行处理

$("ul").on("click",function(e){ var event = e || window.event, elementId = event.target.id; if (elementId == "xxxx"){xxxxx}})

6.选择器

li has son

7.选择器

 $(".next").click(function () {            var i = 0;            var $parent = $(this).parents("div .v_show");            var $v_show = $parent.find("div .v_content_list");            var $v_content = $parent.find(".v_content a");            var v_width = $v_content.width();            var len = $v_show.find("li").length;            if (!$v_show.is(":animated")) {                if (i == len) {                    $v_show.animate({ left: '0px' }, "slow");                    i = 0;                } else {                    $v_show.animate({ left: '-=' + v_width }, "slow");                    i++;                }            }        })

0 0