行列的转换

通过点击行列的图标进行转换,以下为效果图片及代码。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
	*{
                    margin:0px;
                    padding:0px;
                }
	body{
                        font:"微软雅黑";
                        font-size:14px;
                    }
	a{
                      text-decoration:none;
                 }
	ul,li{
                        list-style:none;
                    }
	#box{
                        height:auto;
                        width:550px;
                        border:1px solid #aaa;
                        margin:0 auto;
                        overflow:hidden;
                    }
	.top{
                        height:40px;
                    }
	.top a{
                        height:16px;
                        width:16px;
                        display:block;
                        float:right;
                        margin:5px;
                    }
	.btn-list-off{
                                    background:#fff url(‘./images/btns.jpg‘) no-repeat /*@如何定位背景图片@-38px 0px*/-38px 0px;
                                }
            .btn-car-on{
                                background:#fff url(‘./images/btns.jpg‘) no-repeat -21px -34px;
                              }
	.btn-list-on{
                                 background:#fff url(‘./images/btns.jpg‘) no-repeat -21px 0px;
                             }
	.btn-car-off{
                                        background:#fff url(‘./images/btns.jpg‘) no-repeat -38px -32px;
                                }

	#box ul li{
                                height:auto;width:164px;
                                border:1px solid #aaa;/*@问题?如何让每个@float:left*/
                                float:left;
                                margin:7px;
                            }
	.a-img{
                            height:164px;
                            width:164px;
                            display:block;
                            overflow:hidden;/*问题overflow:hide,如何隐藏超出部分的图片?overflow:hidden;还有其他什么左右?*/
                            }
	p a,p span{
		display:block;
		line-height:23px;
		padding-left:10px;
	}
	.bottom{
                            height:40px;
                            line-height:40px;
                            text-align:center;
                            background-color:#ccc;
                        }
	.small{
                            height:50px;
                            width:50px;
                            /*问题@float:left;如何让文字从图片下方至图片的右侧呢@*/
                            float:left;
                            margin:5px;
                        }
                        img{
                            width: 160px;
                            height: 180px;
                        }
</style>
<script type="text/javascript">
	window.onload =function(){   //@@问题:window.onload 的作用是什么?
		//获取按钮
		var listBtn = document.getElementById("btn1");
		var carBtn = document.getElementById("btn2");
		var imgs = document.getElementsByTagName("img");//@@问题:如何获取多个DOM元素?

		listBtn.onclick = function(){
			//改变按钮的class的值                     //@@问题:如何改变一个元素的样式?
			listBtn.className  = "btn-list-on";
			carBtn.className = "btn-car-off";
			//改变每一个图片的路径以及它的对应的父节点的class的值
			for(var i=0;i<imgs.length;i++)
			{
				imgs[i].src = "./images/small.jpg";				//@@问题,怎么更换一个图片呢?
				imgs[i].parentNode.className = "a-img small"; //@@问题,怎么获取一个元素的父节点?
			}
		}
		carBtn.onclick = function(){
			//改变按钮的class
			listBtn.className  = "btn-list-off";
			carBtn.className = "btn-car-on";
			//改变每一个图片的路径以及它的对应的父节点的class的值
			for(var i=0;i<imgs.length;i++)
			{
				imgs[i].src = "./images/big.jpg";
				imgs[i].parentNode.className = "a-img";
			}
		}	

	}

</script>
</head>
<body>
<div id="box">
	<div class="top">
		<a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
		<a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
	</div>
	<ul>
		<li>
			<div class="con">
			<a href="#" class="a-img ">
				<img src="images/big.jpg" />
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p>
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li>

		 <li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="images/big.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p>
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li><li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="images/big.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p>
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li>
		<li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="images/big.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p>
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li><li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="images/big.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p>
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li><li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="images/big.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p>
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li>
	</ul>
</div>
</body>
</html>

  

时间: 2024-10-05 11:13:49

行列的转换的相关文章

Mysql实现行列转换

前言: 最近又玩起了sql语句,想着想着便给自己出了一道题目:“行列转换”.起初瞎折腾了不少时间也上网参考了一些博文,不过大多数是采用oracle数据库当中的一些便捷函数进行处理,比如”pivot”.那么,在Mysql环境下如何处理? 自己举了个小例子: sql代码实现: 1 -- Step1:建表并插入数据 2 3 -- Step2:中间转换,即“二维转一维”得到一维表. 4 5 -- Step3:利用IF判断并“group by”即可得到目标结果表. 6 7 8 9 -- 加载 10 11

T-SQL PIVOT 行列转换

前面几个例子: http://www.cnblogs.com/insus/articles/1969896.html http://www.cnblogs.com/insus/articles/1970577.html http://www.cnblogs.com/insus/articles/1970707.html 全是SQL Server行列转换或是列行转换的相关例子.不过在SQL Server2005版本开始,有一个新的函数PIVOT()可以很轻易实现这些功能.参考下面代码: SELEC

我为NET狂官方面试题-数据库篇

求结果:select "1"? 查找包含"objs"的表?查找包含"o"的数据库? 求今天距离2002年有多少年,多少天? 请用一句SQL获取最后更新的事务号(ID) 有如下两个表: ①请查询11 ~ 15记录的User ②查询用户类型type=1总积分排名前十的user ③写一条存储过程,实现往User中插入一条记录并返回当前UserId(自增长id) 请求出每个班级的数学平均分,并按照高低进行排序 一个TestDB表有A,B两个字段.①写一句

从shp矢量图制作栅格导航地图(01数据)过程

从shp矢量图制作栅格导航地图(01数据)过程 从shp矢量图制作栅格导航地图01数据过程 1查看原始图像 2重分类 3更新门数据 4矢量转栅格 5栅格转ASCII文件 6相对坐标到栅格行列号的转换 7使用A导航算法进行导航实现 1查看原始图像 首先使用ArcGIS打开原始shp矢量图, 2重分类 然后将shp线文件进行重分类,以color为标准进行空间对象的分类,若以其他属性字段为分类依据,则将该属性设置为Value Fields. 3更新门数据 由于shp图中门的位置不一定能够保证连通性,需

【GDAL】聊聊GDAL的数据模型

GDAL是个非常优秀的GIS数据操作库,最近在和实习生介绍GDAL的简单使用,顺手写下记录 本篇记录栅格数据,代码环境为C# 在GDAL中,栅格数据大致是以一个Dataset对应一个栅格数据文件(.Tif/GeoTiff格式),而这个栅格中的各种信息被包含在Dataset的对象中作为属性. 基本上一个栅格数据在GDAL的数据模型中存储是基于波段的方式,一般一个单波段数据在GDAL中读取后,所得到的Dataset中仅包含一个Band对象,而BandCount属性也为1.多波段数据类似,即是说在GD

Excel动画教程50例(一)

Excel动画教程50例(一) 1.自动筛选 2.在Excel中字符替换 3.在Excel中冻结行列标题 4.在Excel中为导入外部数据 5.在Excel中行列快速转换 6.共享Excel工作簿 7.在Excel中添加说明文字 8.在Excel中数据分列整理 9.在Excel中数据合并 10.在Excel中添加常用文件夹 11.在Excel中添加多个视图 12.在Excel中设置打印区域 13.在Excel中录制“宏” 14.在Excel中建立图表 15.在Excel中获取网络数据

我为NET狂官方面试题-数据库篇答案

?说明:如有错误可以批评指正,有更好写法也可以提点下~ ? 1.?求结果:select "1"? 报错,SQL里面只有单引号,列如:'xx' ? ? 2.?查找包含"objs"的表?查找包含"o"的数据库? select?*?from?sys.objects?where?name?like?'%objs%' select?*?from?sys.databases?where?name?like?'%o%'?? ? ? 3.?求今天距离2002年有

PC主板故障维修技巧

1.熟悉PC主板的总线类型及I/O总线插槽中各信号排列情况,以I/O插槽中重要信号为线索进行故障点查找是维修PC主板致命性故障的关键.微机主板常用总线有PC/XT.PC/AT.VESA.PCI等类型,不同总线的I/O槽中信号排列有所差别,熟悉I/O槽中重要信号是查找因总线类故障系统死机.屏幕无显示等严重故障的前提. 对死机类故障,首先区分故障原因是由I/O设备故障引起还是主板本身故 障引起.确诊故障在系统板后,可检测系统板I/O槽中地址总线或数据总线的脉冲状态初步判断系统故障部位:若所有地址总线

设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(RowSpan)与跨列(ColSpan).同时它还支持报表Excel导出.图表显示及固定表头与左边列的功能.总体架构如下图所示: 目录 开发环境(Development Environment) 安装与部署(Installation & Deployment) 从源代码安装(From Source Co