教程集 > 脚本编程 > javascript > 正文 googlei效果

googlei效果

发布时间：2023-06-23 编辑：jiaochengji.com

教程集为您提供googlei效果等资源，欢迎您收藏本站，我们将为您提供最新的googlei效果资源

提示：您可以先修改部分代码再运行

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; utf-8" />  <title>Sortables demo - Interface plugin for <a href="http://www.jiaochengji.com/
" target="_blank" class="inner-link">jquery</a></title>  		<script type="text/javascript" src="http://bbs.okajax.com/ximen/kj/jqinterface/jquery/jquery.js"></script>  		<script type="text/javascript" src="http://bbs.okajax.com/ximen/kj/jqinterface/interface/interface.js"></script> <style type="text/css" media="all">  html  {  	height: 100%;  }  img{  	border: none;  }  body  {  	background: #fff;  	height: 100%;  	font-family: Arial, Helvetica, sans-serif;  	font-size: 11px;  }  .groupWrapper  {  	width: 32%;  	float: left;  	margin-right: 1%;  	min-height: 400px;  }  .serializer  {  	clear: both;  }  .groupItem  {  	margin-bottom: 20px;  }  .groupItem .itemHeader  {  	line-height: 28px;  	background-color: #DAFF9F;  	border-top: 2px solid #B5EF59;  	color: #000;  	padding: 0 10px;  	cursor: move;  	font-weight: bold;  	font-size: 16px;  	height: 28px;  	position: relative;  }    .groupItem .itemHeader a  {  	position: absolute;  	right: 10px;  	top: 0px;  	font-weight: normal;  	font-size: 11px;  	text-decoration: none;  }  .sortHelper  {  	border: 3px dashed #666;  	width: auto !important;  }  .groupWrapper p  {  	height: 1px;  	overflow: hidden;  	margin: 0;  	padding: 0;  }  </style>  </head>  <body>  <div id="sort1" class="groupWrapper">  	<div id="newsFeeder" class="groupItem">  		<div class="itemHeader">Feeds[-]</div>  		<div class="itemContent">  			<ul>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  			</ul>  		</div>  	</div>  	<div id="news" class="groupItem">  		<div class="itemHeader">News[-]</div>  		<div class="itemContent">  			<ul>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  			</ul>  		</div>  	</div>  	<p> </p>  </div>  <div id="sort2" class="groupWrapper">  	<div id="shop" class="groupItem">  		<div class="itemHeader">Shopping[-]</div>  		<div class="itemContent">  			<ul>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  			</ul>  		</div>  	</div>  	<p> </p>  </div>  <div id="sort3" class="groupWrapper">  	<div id="links" class="groupItem">  		<div class="itemHeader">Links[-]</div>  		<div class="itemContent">  			<ul>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  			</ul>  		</div>  	</div>  	<div id="images" class="groupItem">  		<div class="itemHeader">Images[-]</div>  		<div class="itemContent">  			<ul>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  				<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>  			</ul>  		</div>  	</div>  	<p> </p>  </div>  <script type="text/javascript">  $(document).ready(  	function () {  		$('a.closeEl').bind('click', toggleContent);  		$('div.groupWrapper').Sortable(  			{  				accept: 'groupItem',  				helperclass: 'sortHelper',  				activeclass : 	'sortableactive',  				hoverclass : 	'sortablehover',  				handle: 'div.itemHeader',  				tolerance: 'pointer',  				onChange : function(ser)  				{  				},  				onStart : function()  				{  					$.iAutoscroller.start(this, document.getElementsByTagName('body'));  				},  				onStop : function()  				{  					$.iAutoscroller.stop();  				}  			}  		);  	}  );  var toggleContent = function(e)  {  	var targetContent = $('div.itemContent', this.parentNode.parentNode);  	if (targetContent.css('display') == 'none') {  		targetContent.slideDown(300);  		$(this).html('[-]');  	} else {  		targetContent.slideUp(300);  		$(this).html('[ ]');  	}  	return false;  };  function serialize(s)  {  	serial = $.SortSerialize(s);  	alert(serial.hash);  };  </script>  <div  class="serializer">  serialize all lists  serialize list 1  serialize list 2  serialize list 3  serialize lists 2 and 3  </div>  		<script language="JavaScript" type="text/javascript">var client_id = 1;</script>  		<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>  		<noscript>  		<p><img alt="" src="" width="1" height="1" /></p>  		</noscript>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
网站收录被google的原因是什么？
15个jQuery和CSS3页面切换动画效果
 半透明效果 blur.js
jQuery幻灯片插件 SlidesJS
jQuery的效果集工具包 Glimmer
jquery (show,fadeOut,Animate)简单效果
 Illustrator打造曲线效果的字体效果绘制教程
 photoshop把图片转为模仿建筑景观蓝图效果教程
 jQuery特效字体插件 Font effect
链接渐变效果 jQuery glow

上一篇：js幻灯片效果奥林匹克运动下一篇：改变textarea的大小

[关闭]

googlei效果

最近更新

浏览排行