Jquery特效

wzm10455發表於2014-04-10
jQuery特效

呼叫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++;
				
                }
            }
        })



相關文章