javascript收缩,javascript网页强制缩放

如何用js实现一个可收缩扩展列的表格？

1、外部全局变量记录伸展或收缩；

2、点击按钮增加点击事件----判断全局变量；

3、如果是显示，js在本行插入一行并赋值：（找到td的父tr，在tr后追加html新的tr，并填充内容）。

4、隐藏，找到对应新加的那行，hide或直删除即可。

相关问答

Q1: js和css怎么实现收缩和展开？

给你举个例子：

script language="javascript"

function show_div(){

var obj_div=document.getElementById("starlist");

obj_div.style.display=(obj_div.style.display=='none')?'block':'none';

}

function hide_div(){

var obj_div=document.getElementById("starlist");

obj_div.style.display=(obj_div.style.display=='none')?'block':'none';

}

/script

a href="javascript:show_div()" 显示/展开/a

div id="starlist"

内容br/

内容br/

内容br/

内容br/

/div

这样就可以实现

追问

用jQuery实现，该怎么实现？就是不能弹出的那种，就要一个点击了之后就在下方显示的那种，谢谢！

回答

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gbk" /

titleStripingTable/title

script type="text/javascript" src=""/script

script type="text/javascript"

!--

$(document).ready(function(){ });

function changeDisplay(){

var helloDivObj = $("#helloDiv");

var buttonObj = $("#btnDisplay");

var val = buttonObj.attr("value");

if(val=="隐藏"){

helloDivObj.hide();

buttonObj.attr("value","显示");

}else{

helloDivObj.show();

buttonObj.attr("value","隐藏");

}

}

--

/script

/head

body

input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()"/

div id="helloDiv"

Hello,everyonep/p

Hello,everytwop/p

Hello,everythreep/p

/div

/bdoy

/html

Q2: JS展开-收缩

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /

title步步惊心/title

style

span#hd {

cursor:hand;

}

/style

script language="JavaScript"

!--

onload = function() {

var p1 = document.getElementsByTagName('p')[0];

p1.style.display = 'none';

var span = document.getElementsByTagName('span')[0];

span.onclick = function() {

if (span.innerText == '+')

{

span.innerText = '-';

p1.style.display = 'block';

}

else {

span.innerText = '+';

p1.style.display = 'none';

}

}

}

//--

/script

/head

body

div class="jq mb"h2电视剧《步步惊心》剧情介绍/h2

ulspan id="hd"+/spanp由吴奇隆,刘诗诗,郑嘉颖,袁弘,林更新领衔主演br

故事讲述繁华都市的一名普通白领张晓，因一脚踏空而穿越了时空隧道，带着对清史的洞悉进入风云诡变的宫廷。她知道自己不该卷入九王夺嫡的争斗中，可心不由己，因为这里有她所爱的，

也有爱着她的作为一个朝九晚五的普通白领，除了模样长得挺招人喜爱，现年二十多岁的张晓和周围其他忙忙碌碌的都市人基本没什么区别。张晓谈过几次无疾而终的恋爱，谈不上深刻却也对

她有点影响。做着一份不喜爱也不讨厌的工作，为了薪水再多一些位置再高一些，她也能整天乐呵呵地投入到与战争一样残酷的职场斗争中去。她按部就班地计划着自己的未来的人生房子，旅

游，恋爱。在张晓的前半生里，无论她做的还是她想的，几乎都与普通人一样，为了更好的生活奋斗着，乐此不疲。但张晓的内心总有着一种牵动，她自己也说不出个名堂来，只觉得冥冥之中

，似乎还存在着另一种生活那一天，张晓与男友黄棣在路上吵架，不料，在争吵中，张晓撞到了连着电线的广告板上，而这一撞击，也把她的灵魂撞进了清朝的宫廷中。就像铺天盖地的穿越小

说里写的那样，张晓的灵魂跨过时间的隧道，在一个叫马尔泰.若曦的十三岁清朝女孩的体内，重生了时年，康熙第四十三年。天下太平，但一场震动历史的九龙夺嫡正在暗潮涌动。权利的厮

杀，爱情的灼烧，在被无限放大的历史舞台上，张晓，不，是马尔泰若曦的命运无可避免的与众位亲王阿哥们交织在一起故事讲述繁华都市的一名普通白领张晓，因一脚踏空而穿越了时空隧道

，带着对清史的洞悉进入风云诡变的宫廷。她知道自己不该卷入九王夺嫡的争斗中，可心不由己，因为这里有她所爱的，也有爱着她的作为一个朝九晚五的普通白领，除了模样长得挺招人喜爱

，现年二十多岁的张晓和周围其他忙忙碌碌的都市人基本没什么区别。张晓谈过几次无疾而终的恋爱，谈不上深刻却也对她有点影响。做着一份不喜爱也不讨厌的工作，为了薪水再多一些位置

再高一些，她也能整天乐呵呵地投入到与战争一样残酷的职场斗争中去。她按部就班地计划着自己的未来的人生房子，旅游，恋爱。在张晓的前半生里，无论她做的还是她想的，几乎都与普通

人一样，为了更好的生活奋斗着，乐此不疲。但张晓的内心总有着一种牵动，她自己也说不出个名堂来，只觉得冥冥之中，似乎还存在着另一种生活那一天，张晓与男友黄棣在路上吵架，不料

，在争吵中，张晓撞到了连着电线的广告板上，而这一撞击，也把她的灵魂撞进了清朝的宫廷中。就像铺天盖地的穿越小说里写的那样，张晓的灵魂跨过时间的隧道，在一个叫马尔泰.若曦的

十三岁清朝女孩的体内，重生了时年，康熙第四十三年/p

pfont color="red"内容2，不需要隐藏br /p/ul

/div

!--/Footer--

/body

/html

我是写的+和-，你可以替换成2个图片。

Q3: 如何压缩javascript和css文件

一、压缩html和javascript：

我们用站长工具的JavaScript-HTML格式化工具，我们打开页面，我今天要压缩的文件js文件：common.js ，把js代码复制到到JavaScript/HTML格式化工具里面如下图所示：

点击下面的“普通压缩”和“加密压缩”按钮，经过我的精心测试，使用“加密压缩”，对文件压缩率是最好的，所以点击“加密压缩”，压缩后如图：

javascript代码压缩后，我们就把这些代码在复制到common.js文件里面，在吧这个文件上传到空间原来的位置，进行访问是否存在一些错误，如果没有什么问题说明压缩成功；

我的common.js 文件压缩前和压缩后的对比：

压缩前：

压缩后：

文件压缩前和压缩后确实有明确的减少，说明压缩确实减少文件的大小，

我们来测试文件压缩前和压缩后所有能的时间做对比(我是用火狐插件测试传输速度)：

压缩前所用时间：

压缩后所用时间：

压缩前所用时间是：125ms，压缩后所用时间：78ms ，文件压缩后给我们节省大量的时间，如果每个js都进行压缩，我们房子访问速度会更快的。

(注：html文件和javascript压缩原来一样的，当时压缩html要用到“普通压缩”按钮压缩)

二、压缩css文件：

我们打开站长工具的Css压缩/格式化工具页面，我要压缩的文件是五色旗保健品商城的css主文件style.css，首先我们打开站长工具的Css压缩/格式化工具页面 ，把style.css 代码放到Css压缩/格式化工具里面，如下图所示：

点击“压缩代码”按钮后，css代码压缩成功，如下图所示：

后边就是压缩后的css代码，你要不右边的代码复制到源文件style.css里面在上传到服务器空间里面，在访问一下网，看看网页样式有没有改变，如果有点变化就需要简单的调试一下，如果没有变样，说明你的css压缩成功了；

下面我们来看看styl.css文件压缩前和压缩后的大小和放在访问速度的大小：

文件大小对比：

压缩前：

压缩后：

压缩前30kb，压缩后23kb，明显的文件大小减小了

压缩前所用时间：

css压缩前的时间.jpg (7.36 KB, 下载次数: 0)

下载附件

css压缩前的时间.jpg

2013-11-2 00:35 上传

压缩后所用时间：

压缩前所用时间是：188ms，压缩后所用时间：93ms ，css压缩后明显的节省了95ms；

总结：一个大的网站可能会有很多的javascript和css，如果没有都进行压缩的话，一定会减少很多文件大小的，其实减少文件大少并不是很重要，最重要的是，文件容量减少了，能够快速的提高网站访问的速度，给用户带来好的体验，我们尽量的把文件压缩到最小，这样才有利于用户快速的打开网站，至此我的五色旗保健品商城优化后，我的每天的访问量也增加了很多。

Q4: JS控制实现 点击展开 再点击收缩

function showOtherFundSource(propertyName)

{

var label="${portletInstanceLabel}";

var fundSources = document.getElementsByName(label+propertyName);

var fundSource = fundSources[0];

var fundSourceValue = fundSource.options[fundSource.selectedIndex].value;

if (fundSourceValue == 'OTHERS')

{

document.getElementById("otherFundSourceDiv").style.display = "block";

}

else

{

document.getElementById("otherFundSourceDiv").style.display = "none";

}

}

用DIV控制，点击事件，改display的属性，很简单的！

Q5: JS控制单个DIV在页面加载时收缩

楼主看看是不是你要的效果。写的比较粗糙。你借鉴下思路就好了。这种效果如果用jquery来做就非常的简单。建议楼主想用JS做效果的话可以去学jquery

html

head

titletest/title

style

body{

text-align:center;

}

#area{

border:1px solid black;

width:500px;

height:15px;

position:relative;

overflow:hidden;

paddding:0;

}

#title{

background-color:cyan;

position:absolute;

left:3px;

display:block;

height:10px;

width:100%;

margin:0;

padding:0;

}

/style

script

var timeId;

function show(){

clearInterval(timeId);

var node = document.getElementById("area");

var tempHeight = node.offsetHeight;

if(document.getElementById("eflag").innerText == "+"){

document.getElementById("eflag").innerText = "-"

document.getElementById("msg").innerHTML = "font color='blue'点击收缩/font"

timeId = setInterval(function(){

tempHeight += 1;

node.style.height = tempHeight;

if(tempHeight 150){

clearInterval(timeId);

}

},30);

}else{

document.getElementById("eflag").innerText = "+"

document.getElementById("msg").innerHTML = "font color='red'点击展开/font"

timeId = setInterval(function(){

tempHeight -= 1;

node.style.height = tempHeight;

if(tempHeight = 15){

clearInterval(timeId);

}

},30);

}

}

/script

/head

body

div id="area" onClick="show()"

span id="title"span id="eflag"+/span      span id="msg" style="color:red"点击展开/span/span

div id="content"

测试测试测试测试测试测试测试测试测试测试br

测试测试测试测试测试测试测试测试测试测试br

测试测试测试测试测试测试测试测试测试测试br

测试测试测试测试测试测试测试测试测试测试br

测试测试测试测试测试测试测试测试测试测试br

测试测试测试测试测试测试测试测试测试测试br

测试测试测试测试测试测试测试测试测试测试br

/div

/div

/body

/html