一个js 特效。

hetengfei_ 2011-12-13 11:22:20

为什么当div 的宽度变小时，会压扁中文。

即中文会变成两行，三行。。。
我想要它不要变行，就一行，大小不够隐藏右边。



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title></title>

    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>

	<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>

    <style type="text/css">

		#divMoveTest

		{

			width: 200px;

			height: 500px;

			top:100px;

			left:100px;

			margin: 1px;

			padding: 1px;

			border-color:Green;

			border-width:1px;

			border-style:solid;

			background-color:#e0e0e5;

			overflow:scroll;

		}

		

		#divClickTest

		{

			border-color:Yellow;

			background-color:#304054;

			color:White;

			border-width:1px;

			border-style:solid;

			height:20px;

			width:100%;

		}

		#divContent

		{

			height:auto;

			width:100%;

		}

		#labInfo

		{

			height:20px;

		}

    </style>



	<script  type="text/javascript">

	setInterval

		$(function(){

			$("#btnHiding").click(function(){

				hiding($("#divMoveTest"));

			

			});

			$("#btnShowing").click(function(){

				showing($("#divMoveTest"));

			});

		});

		var timer;

		function hiding(JQthis){

			if(timer){

				clearInterval(timer);

				timer=null;

			}

			timer = setInterval((function(){

				return function(){

					var width=parseInt(JQthis.css("width"));

					if(width>4)

					{

						JQthis.css("width",(width-4).toString()+"px");

					}

					else

					{

						JQthis.css("width","1px");

						clearInterval(timer);

						timer=null;

					}

				};

			})(JQthis),80);

		}

		function showing(JQthis){

			if(timer){

				clearInterval(timer);

				timer=null;

			}

			timer = setInterval((function(){

				return function(){

					var width=parseInt(JQthis.css("width"));

					if(width<204)

					{

						JQthis.css("width",(width+4).toString()+"px");

					}

					else

					{

						clearInterval(timer);

						timer=null;												

					}

				};

			})(JQthis),80);

		

		}

}

	</script>

</head>

<body>

    <form id="form1" runat="server">

		<div>

			<input type="button" id="btnHiding" value="隐藏" />

			<input type="button" id="btnShowing" value="显示" />

				<div id="divMoveTest">

					<div id="divClickTest">title</div>

					<div id="divContent">

						<table id="tableData">

						这里的文字会压扁：

							<thead>

								<tr>

									<th>名称：</th>

									<th>数值：</th>				 

								</tr>

							</thead>

							<tbody>

								<tr>

									<td>width</td>

									<td>88</td>

								</tr><tr>

									<td>height</td>

									<td>123</td>

								</tr><tr>

									<td>Color</td>

									<td>#880022</td>

								</tr>

							</tbody>

						</table>

					</div>

				</div>

		</div>

    </form>

</body>

</html>

...全文

227 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

hetengfei_ 2011-12-14

打赏
举报

   //每次 缩放时 执行下面

 {

    var 可容几个字 = parseInt($("#borderDiv").css("width"))/20;

    string 剩下字串 =  $("#testText").html().substring(0,可容几个字);

   //下面就把   剩下字串  赋值回去。

 }

hetengfei_ 2011-12-14

打赏
举报

[Quote=引用 1 楼 qianjin036a 的回复:]
试试直接控制文本的长度,截去不能显示的部分.
[/Quote]

这个。
是下面吗

<div id="borderDiv"><label id="testText">这里的文字会压扁:</label></div>



   //每次 缩放时 执行下面

 {

    var 可容几个字 = parseInt($("#borderDiv").css("width"))/20;

    string 剩下字串 =  $("#testText").html().ht.substring(0,可容几个字);

   //下面就把   剩下字串  赋值回去。

 }

hetengfei_ 2011-12-14

打赏
举报

[Quote=引用 2 楼 easyuu 的回复:]
你的table标签下，怎么直接放内容？
[/Quote]
var data="DATA";
var key = "KEY";
$("#tableData tbody").append("<tr><td>"+key+"</td><td>"+data+"</td></tr>");