网站如果分为上、左下,和右下三部分,用什么方式做比较好呢?

夏夜花花的太阳 2014-02-11 11:01:38
我要做一个网站,分为上、左下,和右下。上和左下基本内容固定的话,大家做这种网站最常用的是什么方式呢?
...全文
333 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
引用 5 楼 u013104783 的回复:
[quote=引用 4 楼 zuo_hy 的回复:] 网上找div 布局样例,可以先熟悉用div直接布局。
div已经熟悉了,只是没做过这种的。想知道大家用的什么方法,我用的是asp.net。[/quote] 之前给你说错了,HTML里面才是 iframe标签,asp.net中封装成了 frameset 具体用法和例子:http://www.cnblogs.com/sunfeiwto/archive/2008/11/20/1337542.html
  • 打赏
  • 举报
回复
引用 4 楼 zuo_hy 的回复:
网上找div 布局样例,可以先熟悉用div直接布局。
div已经熟悉了,只是没做过这种的。想知道大家用的什么方法,我用的是asp.net。
弘毅致远 2014-02-11
  • 打赏
  • 举报
回复
网上找div 布局样例,可以先熟悉用div直接布局。
弘毅致远 2014-02-11
  • 打赏
  • 举报
回复
MVC4吧, <body> <div class="header"> </div> <div class="content"> <div class="left">content left</di> <div class="right">@RenderBody()</di> </div> @Html.Partial("~/Views/Shared/Foot.cshtml") </body> 做一个这样的_layout, 具体页面可以写成这样

@{
    ViewBag.Title = "Title";
    Layout = "~/Views/Shared/_Public.cshtml";
}
@section Head {
	<script type="text/javascript" src="@Url.Content("~/Content/js/jquery.slides.min.js")"></script>
}
<div id="container" class="container">
	<div class="article">
		发生的发生的
	</div>
	<div class="aside">
		啊时代发生的发
		</div>
	</div>
</div>
  • 打赏
  • 举报
回复
引用 1 楼 a01589 的回复:
你的意思已经很明显了,使用 iframe 相关资料:http://www.w3school.com.cn/tags/tag_iframe.asp
请问,有没有例子之类的?谢谢哈。
  • 打赏
  • 举报
回复
你的意思已经很明显了,使用 iframe 相关资料:http://www.w3school.com.cn/tags/tag_iframe.asp
  • 打赏
  • 举报
回复
要SEO的话明显做母版页啊。。。 否则的话直接Iframe
小灰狼 2014-02-11
  • 打赏
  • 举报
回复
引用 1 楼 a01589 的回复:
你的意思已经很明显了,使用 iframe 相关资料:http://www.w3school.com.cn/tags/tag_iframe.asp
网站用iframe 不是很好,不好做SEO
额小白 2014-02-11
  • 打赏
  • 举报
回复
div+css布局。简单易学
申江渔夫 2014-02-11
  • 打赏
  • 举报
回复
iframe据说对SEO不友好,一般用div布局。
tossgoon 2014-02-11
  • 打赏
  • 举报
回复
如果要简单的话,可以用控件easyui。
  • 打赏
  • 举报
回复
引用 7 楼 u013104783 的回复:
我发现有用母版的,也有用iframe的,请问这两个有什么区别,用哪种比较好呀?
母版?是定义一个规则,然后每个页面的基本布局框架都和母版中的一致,后者就是我楼上所说的那些,没有什么好不好之说
  • 打赏
  • 举报
回复
我发现有用母版的,也有用iframe的,请问这两个有什么区别,用哪种比较好呀?
数据结构算法演示(Windows版) 使 用 手 册 一、 功能简介 本课件是一个动态演示数据结构算法执行过程的辅助教学软件, 它可适应读者对算法的输入数据和过程执行的控制方式的不同需求, 在计算机的屏幕上显示算法执行过程中数据的逻辑结构或存储结构的变化状况或递归算法执行过程中栈的变化状况。整个系统使用菜单驱动方式, 每个菜单包括若干菜单项。每个菜单项对应一个动作或一个子菜单。系统一直处于选择菜单项或执行动作状态, 直到选择了退出动作为止。 二、 系统内容 本系统内含84个算法,分属13部分内容,由主菜单显示,与《数据结构》教科书中自第2章至第11章中相对应。各部分演示算法如下: 1. 顺序表 (1)在顺序表中插入一个数据元素(ins_sqlist) (2)删除顺序表中一个数据元素(del_sqlist) (3)合并两个有序顺序表(merge_sqlist) 2. 链表 (1)创建一个单链表(Crt_LinkList) (2)在单链表中插入一个结点(Ins_LinkList) (3)删除单链表中的一个结点(Del_LinkList) (4)两个有序链表求并(Union) (5)归并两个有序链表(MergeList_L) (6)两个有序链表求交(ListIntersection_L) (7)两个有序链表求差(SubList_L) 3. 栈和队列 (1)计算阿克曼函数(AckMan) (2)栈的输出序列(Gen、Perform) (3)递归算法的演示  汉诺塔的算法(Hanoi)  解皇后问题的算法(Queen)  解迷宫的算法(Maze)  解背包问题的算法(Knap) (4)模拟银行(BankSimulation) (5)表达式求值(Exp_reduced) 4. 串的模式匹配 (1)古典算法(Index_BF) (2)求Next 函数值(Get_next)和按Next 函数值进行匹配 (Index_KMP(next)) (3)求 Next 修正值(Get_nextval)和按 Next 修正值进行匹配(Index_KMP(nextval)) 5. 稀疏矩阵 (1)矩阵转置 (Trans_Sparmat) (2)快速矩阵转置 (Fast_Transpos) (3)矩阵乘法 (Multiply_Sparmat) 6. 广义表 (1)求广义表的深度(Ls_Depth) (2)复制广义表(Ls_Copy) (3)创建广义表的存储结构(Crt_Lists) 7. 二叉树 (1)遍历二叉树  二叉树的线索化  先序遍历(Pre_order)  中序遍历(In_order)  后序遍历(Post_order) (2) 按先序建二叉树(CrtBT_PreOdr) (3) 线索二叉树  二叉树的线索化  生成先序线索(前驱或后继) (Pre_thre)  中序线索(前驱或后继) (In_thre)  后序线索(前驱或后继) (Post_thre)  遍历中序线索二叉树(Inorder_thlinked)  中序线索树的插入(ins_lchild_inthr)和删除(del_lchild_inthr)结点 (4)建赫夫曼树和求赫夫曼编码(HuffmanCoding) (5)森林转化成二叉树(Forest2BT) (6)二叉树转化成森林(BT2Forest) (7)按表达式建树(ExpTree)并求值(CalExpTreeByPostOrderTrav) 8. 图 (1)图的遍历  深度优先搜索(Travel_DFS)  广度优先搜索(Travel_BFS) (2)求有向图的强连通分量(Strong_comp) (3)有向无环图的两个算法  拓扑排序(Toposort)  关键路径(Critical_path) (4)求最小生成树  普里姆算法(Prim)  克鲁斯卡尔算法(Kruscal) (5)求关节点和重连通分量(Get_artical) (6)求最短路径  弗洛伊德算法(shortpath_Floyd)  迪杰斯特拉算法(shortpath_DIJ) 9. 存储管理 (1)边界标识法 (Boundary_tag_method) (2)伙伴系统 (Buddy_system) (3)紧缩无用单元 (Storage_compaction) 10. 静态查找 (1)顺序查找(Search_Seq) (2)折半查找 (Serch_Bin) (3)插值查找 (Search_Ins) (4)斐波那契查找 (Search_Fib) (5)次优查找树(BiTree_SOSTree) 11. 动态查找 (1)在二叉排序树上进行查找(bstsrch)、插入结点(ins_bstree)和删除结点(del_bstree) (2)在二叉平衡树上插入结点(ins_AVLtree) 和删除结点(del_AVLtree) (3)在 B-树上插入结点(Ins_BTree) 和 删除结点(Del_BTree) (4)在 B+树上插入结点(Ins_PBTree) 和 删除结点(Del_PBTree) 12. 内部排序 (1)简单排序法  直接插入排序(Insert_sort)  表插入排序(内含插入(Ins_Tsort) 重排(Arrange)两个算法)  起泡排序(BubbleSort)  简单选择排序(SelectSort) (2)复杂排序法  堆排序(HeapSort)  快速排序(QuickSort)  锦标赛排序(Tournament) (3)其他  快速地址排序(QkAddrst)  基数排序(RadixSort) 13. 外部排序 (1)多路平衡归并排序(K-Merge) (2)置换-选择排序(Repl_Selection) 、 运行环境 1. 硬件:Pentium100以上PC机。 2. 软件:Windows95及以上版本的操作系统。 四、 运行 本系统的执行文件为DSDEMOW.EXE。 五、 如何使用本课件 读者可以利用鼠标移动光标选择“演示算法”或“菜单命令”来控制课件的运行过程。 1. 课件的演示算法菜单为页式菜单。第一级菜单中的各项与上述“系统内容”中各大项相对应,读者运行“算法演示课件”后, 即进入“算法选择一级菜单”画面,此时可移动光标进行选择,当光标所在菜单项改为红色时,单击鼠标即进入“算法选择二级菜单”,进行相同操作之后,或进入算法选择级菜单(如图1所示),或进入算法演示的执行状态(如图2所示)。 图1 图2 在算法选择菜单画面中,形如 的图标意为尚有下级菜单,形如 的图标则表示将直接进入算法演示状态。此时也可直接单击一级菜单或二级菜单的标题直接返回之,注意:菜单侧上方的“退出”按钮意为退出整个演示课件。 2. 算法演示执行状态下的屏幕分为部分:第一行为“标题行”,第二行为“菜单命令”,以下为算法演示屏上各菜单的说明。 菜单命令中各项自左至的功能分别为:  数据——设置算法演示的数据(数据结构)。  调用栈——察看当前函数(或过程)嵌套或递归的历程。  说明——察看算法说明。  暂停——中断演示过程。  执行——连续执行算法直至所设断点或至算法执行完毕。  单步——执行一行算法,遇到子程序调用时,连续执行完子程序。  跟踪——执行一行算法,遇到子程序调用时,进入子程序。  执行到——演示算法到当前所设最近的断点或算法窗口中的当前行。  恢复——重置屏幕为当前算法执行前的初始状态。  断点——在算法窗口的当前选择行设置断点或清除断点。  设置——设置连续演示时的速度或开/闭背景音乐(或动作音效)开关。  返回——返回算法选择菜单。 3. 断点的设置方法为:移动光标至“断点语句”所在行,点击鼠标后即出现绿色光条,之后单击“断点”菜单中的“设置断点”命令项即可,此时该断点语句所在行上将出现红色光条。 六、 算法演示屏的详细说明 本系统对屏幕设计的基本原则是集数据结构、算法和其他重要信息(如栈等)于同一屏幕。一般情况下演示屏由图示、算法和变量个窗口组成,特殊情况下将根据演示内容适当增加。一般情况下, 左侧图示窗口显示演示数据的逻辑结构或存储结构,侧上方窗口显示算法文本,侧下方窗口显示当前算法中各变量的值或递归工作栈的状态。各窗口间的边界大小均可自由调节,且可按需扩大至全屏。 算法窗口显示当前演示的算法文本,并以深蓝色的光条覆盖将要执行的语句。若算法中含有函数或过程调用语句,则当光条覆盖到该过程调用语句时,随即自动隐去原算法文本而显示子过程的文本,而从此过程返回时再重新显示原算法文本。类似地,在演示递归算法执行过程时,每当执行递归调用本过程的语句时,随即隐去当前层次的算法文本而显示下一层的算法文本,并且以不同颜色的算法文本表示递归的不同层次。如第一层的算法文本为深绿色,第二层为紫色,第层为深红色,第四层为深蓝色,第五层为浅蓝色,第六层为玫瑰红色等。 当演示递归算法执行过程中递归工作栈的变化状态时,递归工作栈显示在侧下窗口,递归工作栈的状态和算法文本窗口中相应语句执行后的结果相对应,栈顶记录为当前递归层的参量值。每进入一层递归时,就产生一个新的工作记录(包括调用语句行号、变量参数或全程变量、数值参数和局部变量)压入栈顶;每退出一层递归时,先根据栈顶的调用语句行号返回至上层,然后在传递完变量参数的值后退栈。 各个算法演示屏的补充说明如下: 1. 顺序表和链表的插入、删除和链表的生成 算法演示屏由显示顺序表或链表的图示、算法文本及变量等个窗口组成。在演示算法之前,需先在弹出的小窗口中输入线性表的数据元素及算法参数 i(插入或删除的位置)和 b(被插的数据元素)的值。顺序表的图示窗口在演示屏的上方,链表的图示窗口在左侧。 2. 有序表的操作 算法演示屏的状态和 1 中所述相同。 3. 汉诺塔问题 算法演示屏由4个窗口组成。侧上方为算法文本,在算法中有4个形式参量,其中值参 n 为圆盘个数,x、y、和 z 分别表示3个塔座;侧下方为递归工作栈,栈中每个记录包含调用语句行号 adr 及值参 n 和 x、y、z;左侧上方显示汉诺塔图形及移动操作结果;左侧下方显示移动操作的记录。 4. 迷宫问题 左侧窗口显示迷宫的逻辑结构,由 N×N 个方格组成,左上[1,1]为入口,下[N,N]为出口,并且以红色钉子填充表示障碍,空白表示通路,红色交通灯表示已游历过的路,箭头表示继续游历的方向,演示结束时显示一条通路或迷宫不通的信息。侧下窗口为递归工作栈,栈中每个记录含6个数据项,其中 adr 指示调用语句行号,k 指示步数,(x,y) 表示当前坐标,i 指示路径方向(起始方向为 1,顺时针方向旋转搜索)。 5. 皇后问题 左侧图示窗口包含棋盘和递归工作栈两部分,栈中记录含3个数据项,其中 adr 指示调用语句行号,k 指示列号,i 指示行号。此算法演示可求得所有可行结果,在求得每一种排布的结果之后,均会弹出一个窗口显示“找到第 j (j=1,2,…) 种排布”,单击“确定”按钮将继续进行,直至找到所有可能构成的排布。 6. 背包问题 侧图示窗口的上方显示背包、物件及其体积。 若有解,则在求得每一组结果之后,均会弹出一个窗口提示求得一组解,单击提示窗口中的小人将继续进行。该窗口的下方为递归工作栈,栈中的记录含3个数据项,其中 adr 指示调用语句所在行号,n 指示物件个数,t 指示背包总体积。 7. 阿克曼函数 整个演示屏只有显示算法文本和显示算法执行过程中栈的状态两个窗口。在执行算法之前,首先应按照提示输入参数 m 和 n 的值。 8. 栈的输出序列 图示窗口的内容为:由算法 Gen 生成的栈的操作序列(列出在窗口的下方)、算法 Perform 执行时栈的操作过程(该窗口的上方)以及算法 Perform 执行的结果——栈的输出序列(列出在图示窗口的侧)。 9. 表达式求值 图示窗口的内容主要为显示表达式求值过程中操作数栈和运算符栈的变化情况以及主要操作。上方的小窗口显示在算法演示之前设定的表达式。 10. 离散事件模拟 图示窗口分成3部分:中间部分或显示客户流动情况的动画,或显示程序执行过程中事件表和4个队列的数值,上方两个按钮用以切换动画或静态数据,下方则显示客户总人数、客户逗留的累计时间以及调节动画中小人移动速度的指针。 11. 串的模式匹配 上窗口显示算法文本,下窗口显示串的匹配过程或求 next 函数的过程。 12. 稀疏矩阵 图示窗口显示矩阵的状态或其元组的表示。 13. 求广义表的深度 图示窗口显示广义表的存储结构,图中指针 ls 指向当前所求深度的广义表,值为空时不显示。演示结束时弹出窗口显示求得的深度。 14. 复制广义表 图示窗口的上方显示已知广义表的存储结构,图示窗口的下方显示复制求得的广义表的存储结构。递归工作栈中含调用语句行号 adr、变参 nls 和值参 ls。 15. 创建广义表的存储结构 图示窗口显示广义表存储结构的建立过程和算法执行过程中参数Sub的当前值。 16. 遍历二叉树 图示窗口显示二叉树的逻辑结构和遍历结果输出的结点序列,图中指针 bt 指向当前遍历的二叉树的根结点。 17. 线索二叉树 图示窗口显示二叉树的存储结构,但结点中只含标志域,而以结点间的黑色连线表示指针,红色连线表示前驱线索,蓝色连线表示后继线索。在二叉树线索化的过程中,图中指针 p 指向当前层二叉树的根结点,指针 pre 指向当前被访问的结点的前驱。在演示线索树的插入和删除过程时,图示窗口的下方还包括“输入行”和“提示行”。 18. 按先序序列建二叉链表 图示窗口显示输入的先序序列和生成二叉链表的过程。 19. 森林和二叉树的相互转换 图示窗口在显示屏的上方,其左侧为森林,侧为二叉树。 20. 赫夫曼树和赫夫曼编码 图示窗口显示生成的赫夫曼树的逻辑结构和每个叶子结点的编码。 21. 图的深度优先搜索 图示窗口的上半部分显示图的逻辑结构,初始状态用青色圆圈表示顶点,结点间的黑色连线表示边或弧(连线上画有箭头)。演示过程中用红色覆盖已访问的顶点和边(或弧)。窗口下方显示图的邻接表,演示过程中以红色框边表示已访问过的弧。图示窗口的下方显示遍历后输出的顶点序列。 22. 图的广度优先搜索 与深度优先不同的是,在窗口的下方增加一个队列,其左端为队头,端为队尾。 23. 求有向图的强连通分量 图示窗口自上而下分别显示有向图的逻辑结构、存储结构和 Finished 数组在算法执行过程中的变化情况。所求得的各个强连通分量,将以不同颜色的顶点组表示。 24. 求关节点和重连通分量 图示窗口的上半部分显示无向图,下半部分自上而下分别显示 Vexnum、Vexdata、Visited、Low、Squlow(求得 low 值的顺序)和 artpoint(关节点)的信息。 25. 有向图的拓扑排序 图示窗口由5部分组成。其中左上显示有向图的邻接表;左下显示有向图,其中顶点和弧的初始状态分别为绿色和黑色,从栈中退出的顶点(i)用红色表示,分别以蓝色和红色指示当前访问的邻接点(k)和它们之间的弧(ik),灰白色表示已经输出的顶点;下显示顶点的入度;上显示入度为零的栈。当拓扑排序不成功时,在演示屏的中央将会弹出一个窗口,显示提示信息“网中存在自环!”,此时用户可在左下显示的有向图中由绿色顶点和黑色弧构成的子图中找到这个环。 26. 有向图的关键路径 图示窗口包含5部分信息。左上显示带入度域的邻接表;左下显示有向网的逻辑结构和顶点的入度及各顶点事件的最早发生时间和最迟发生时间;下显示拓扑排序过程中入度为零的顶点的栈S,上显示的栈 T 存放拓扑序列,其入栈顺序和栈 S 的出栈顺序相同,从栈顶到栈底的顶点顺序即为顶点的逆拓扑序列。算法执行结束后将弹出窗口列出全部结果,其中红色字体的弧表示关键活动。 27. 普里姆算法 图示窗口包含3部分内容。上是邻接矩阵;左上是无向网的逻辑结构,图中顶点的初始状态为黄色,算法执行过程中,红色覆盖的顶点和边则表示已加入生成树的顶点和生成树上的边;窗口的下方则显示 closedge 数组中的值。 28. 克鲁斯卡尔算法 图示窗口的左侧为无向网,以红色标定已落在生成树上的边;侧自上而下列出各条边的信息以及选择生成树的边的执行过程。 29. 边界标识法 图示窗口的初始状态为 64KB 的模拟存储器,演示过程中,以绿色覆盖占用块。各个存储块的头部左侧所示为该块的起始地址,头部结构或其他信息参见教科书。用户可根据弹出窗口的操作提示信息进行操作,输入请求分配的空间大小或释放块的首地址。 30. 伙伴系统 在图示窗口中,左侧为可利用空间链表的逻辑结构,侧为存储结构,其中红色覆盖部分为占用块。弹出窗口为输入窗口,由用户输入请求分配的空间大小或释放块的首地址。 31. 紧缩无用单元 侧显示存储空间,空白表示空闲块,其他颜色覆盖表示占用块,在存储空间不足分配时将进行空闲块压缩。左侧显示存储映像。弹出窗口为输入窗口,由用户输入请求分配的空间大小和分配或释放块的块名。 32. 静态查找 上窗口为图示窗口,演示查找过程;左下下分别为算法文本和变量窗口。 33. B-树和B+树 整个屏幕分为上、下两个窗口,上窗口演示插入或删除结点过程中B-树或B+ 树结构的变化状况;下窗口内显示如查找关键字、插入位置、结点分裂等操作信息。下窗口上面左侧的小窗口为编辑窗口,由用户输入待插或待删的关键字,输入之后其侧的操作命令将由隐式状态改为显式状态。 34. 内部排序 图示窗口演示排序过程以及排序过程中关键字之间进行的比较次数和记录移动的次数。 七、 用户自行输入数据指南 算法操作的对象——数据结构,或由用户自行输入,或由系统随机产生,并在获得用户的确认之前,可反复随机产生,直至用户满意,用鼠标点击“OK”按钮确认为止。 多数情况下的输入界面上有足够的提示信息,以指示用户需要进行何种操作。补充说明如下: 1. 表的数据元素为任意的单个字符。 2. 迷宫的输入界面如图3所示。图中砖墙图案表示障碍,连续点击鼠标可将光标所在位置设置成通道或者障碍,建议用户先点击“随机生成”按钮随机生成一个迷宫,然后移动鼠标调整成所需。所设迷宫可以利用“保存数据”按钮生成dat类型文件,并在需要时可以利用“取出数据”按钮读入。 图3 3. 演示背包问题的算法之前,首先需要输入物品个数,之后将出现如图4所示的输入界面,可以利用“随机生成”的按钮或各个相应的小窗口输入物品体积 wi 和背包体积 T 。背包的总体积不得超过 30 ,单个物品的体积不得超过 10 。 图4 4. “表达式求值”和“建表达式树”时的输入界面如图5所示。用户可在窗口内自行输入,并以“Enter”键为结束符;也可以连续点击左侧蓝色的表达式由系统自动生成,直至用户点击侧的计算器表示确认为止。“求值”可实现带括弧的四则运算和幂次运算,并支持sin、cos、tan、arcsin 和 arccos 等函数计算,其操作数为实数。“建树”的表达式仅限于带括弧的四则运算,其操作数为单个字母的字符。 图5 5. 稀疏矩阵的输入界面如图6所示。用户可随意进行矩阵中任意位置元素的输入,只要将光标移动至待输入的元素位置,单击鼠标后将弹出计算器,单击数字按钮,可进行随意输入,之后点击“OK”按钮表示确认。 图6 6. 广义表的数据输入方式为自左向顺序输入广义表的字符串。输入过程中,图7所示输入界面中的“确定”为灰色字体,只有当用户正确输入完毕时,“确定”两字才改为黑色字体,此时用户可单击此按钮表示确认。 图7 7. 图的输入界面如图8所示。之前尚需确认是否为有向图和带权图。在用户自行输入图时,首先按下“创建节点”按钮,之后可移动光标至窗口的任意位置单击鼠标创建顶点;然后单击“创建弧”按钮,可在任意两个顶点之间构建弧或边。构建弧(或边)的操作为:先将光标移动至弧尾的顶点,单击一次鼠标,然后移动光标至弧头位置,再单击一次鼠标。对于带权的图,则在构建弧(或边)的同时,在当时弹出的窗口中输入权值,权值的默认值为 1。 图8 8. 内部排序的关键字均为单个字符。
序一(08/07/21) 很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪、图片剪切(设置一下也可以出放大镜等类似的效果)。 当时觉得很神奇,碍于水平有限,没出来。 前些日子突然想一个透镜效果,就突然想到了这个效果,于是找出当年“珍藏”的代码决定一尝所愿。 序二(08/12/06) 自上一个版本的图片切割效果出来后,虽然也经常看到“框架开发这个如何如何容易”之类的评论,但也受到很多人的肯定,小弟在此感谢大家的支持。 上一个版本由于是初次接触这类效果,而且是个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。 后来我知道这个效果叫ImageCropper,找了些这类效果参考,完善了切割的部分。 近来我把其中的拖放效果和缩放效果单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考图片切割系统。 先看看效果: 图片地址: 程序说明 这个效果主要分部分:层的拖放、层的缩放、图片切割(包括预览)。 其中层的拖放和层的缩放我已经在其他两篇文章中有详细说明,这里就说说图片切割这部分吧。 【图片切割】 关于图片切割的设计,有个方法: 1.定位四个半透明层,遮住要盖住的部分,没试过,感觉比较麻烦; 2.把图片设为背景图,通过设置背景图的位置来实现,但这样的缺点是只能按图片的正常比例实现,不够灵活; 3.把图片放到切割对象里面,通过设置图片的top和left实现,这个方法是可行,但下面有更简单的方法实现; 4.通过设置图片的clip来实现。 这里介绍方法4的实现方法,这个方法是从当年“珍藏”的代码中看到的,先说说clip: clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。” 依据上--下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。 例如: div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } 注意position:absolute的设置是必须的(详细看手册)。 下面说说具体实现原理: 首先需要一个容器(_Container),容器里面会插入个层: 底图层(_layBase):那个半透明的图片; 切割层(_layCropper):正常显示的那个部分; 控制层(_layHandle):就是控制显示的那个部分。 其中为了底图层和切割层是程序自动创建的图片,控制层是自己定义的层(程序中是一个div)。 底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角: this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; 层叠顺序也要设置一下保证各层顺序。 下面说说各部分的作用: 容器:除了容器本身的作用,通过设置其背景色来设置透明的渐变色,由于图片本身没有背景色所以要通过容器来设置; 底图层:在容器最底部,作用是显示非选择区域的图片,透明效果就是在这层设置; 切割层:最关键的一个层,在底图层和控制层之间,在这个层通过clip设置其可视区域来实现切割图片的效果; 控制层:位于顶部,拖放(_drag)和缩放(_resize)效果就是在这个层实现,根据其拖放和缩放的结果控制切割层的切割效果。 这里要注意的是控制层的_drag拖放效果的Transparent要设为true(详细看拖放效果的透明背景bug部分)。 要使用缩放需要把Resize设为true,并设置各个拖拉对象,程序通过_resize设置缩放的比例和最少范围(详细看拖拉缩放效果)。 下面说说控制层如何控制切割效果: 控制层的拖放和缩放过程中加入了SetPos设置切割样式程序,在SetPos程序中根据控制层的样式设置切割层的可视区域范围: var p = this.GetPos(); this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; 其中GetPos程序,它可以把当前控制层的样式参数作为一个对象返回: with(this._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } } 如果理解了的话就会觉得其实原理挺简单的,不过要想出来还是要一定创意才行,为想出这个方法的人致敬! 【切割预览】 预览效果需要设置Preview属性为预览容器对象,程序会自动给容器插入一个预览对象(图片)。 预览效果的关键在于如何根据控制层的数据来给预览对象定位,这个主要在SetPreview预览效果程序中处理。 首先根据控制层的高宽比置预览对象显示的宽和高(不是图片本身的宽高哦),这里可以用GetSize程序获取: var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; 其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小: Code var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例设置 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } //返回尺寸对象 return { Width: iWidth, Height: iHeight } 可以看出如果后两个参数(viewWidth和this.viewHeight)都不设置就会按原来大小显示了, 然后再按预览图跟控制层的比例设置预览图的样式参数: var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = o.Top * scale, pLeft = o.Left * scale; 最后根据参数对预览对象进行样式设置和切割: Code with(this._view.style){ //设置样式 width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px"; //切割预览图 clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)"; } 这里有点烦乱,但应该不难理解就不详细说明了。 【图片大小】 容器的大小一般是固定的,但图片的大小就不是固定的,这里又可以使用SetSize程序用来设置图片大小: Code var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //设置底图和切割图 this._layBase.style.width = this._layCropper.style.width = s.Width + "px"; this._layBase.style.height = this._layCropper.style.height = s.Height + "px"; 有了图片大小就可以用来设置拖放和缩放的范围限制了: Code this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; } ps:程序中的Init程序是用来把个性设置呈现出来,所以一般设置过属性之后(例如图片地址、透明度等)就执行一次Init程序就可以显示效果了。 【ie6渲染bug】 在拖放效果中说到插入一个div解决ie的透明背景bug,这里就需要修复这个bug。 跟缩放效果配合使用时,不得不说ie6的一个渲染bug,用下面的代码测试(ie6): Code
<script>setTimeout("aa.style.height=200",0) window.__INITIAL_STATE__= {"csrf":"zmu17bw8-vwh6ttiPBR9cBo6mlCkWKnz3iUg","origin":"http:\u002F\u002Fbbs.csdn.net","isMobile":false,"cookie":"uuid_tt_dd=10_36287182540-1752537749640-481424; dc_session_id=10_1752537749640.890321; dc_sid=c3fc0f0c612f9354bd5d5b0c48893ee5; uuid_tt_dd=10_36287182540-1752537749640-481424; csrfToken=sEr4IyBW2fTTtyeM0v_Tkbua","ip":"216.73.216.174","pageData":{"page":{"pageId":143,"title":"社区详情","keywords":"社区详情","description":"社区详情","ext":{"isMd":"true","armsfe1":"{pid:\"dyiaei5ihw@1a348e4d05c2c78\",appType:\"web\",imgUrl:\"https:\u002F\u002Farms-retcode.aliyuncs.com\u002Fr.png?\",sendResource:true,enableLinkTrace:true,behavior:true}","redPacketCfg":"{\"presetTitle\":[\"成就一亿技术人!\",\"大吉大利\",\"节日快乐\",\"Bug Free\",\"Hello World\",\"Be Greater Than Average!!\"],\"defaultTitle\":\"成就一亿技术人!\",\"preOpenSty\":{},\"redCardSty\":{}}","blogStar":"[{\"year\":\"2021\",\"enable\":true,\"communityIds\":[3859],\"url\":\"https:\u002F\u002Fbbs.csdn.net\u002Fsummary2021\"},{\"year\":\"2022\",\"enable\":true,\"communityIds\":[3860],\"url\":\"https:\u002F\u002Fbbs.csdn.net\u002Fsummary2022\"}]","mdVersion":"https:\u002F\u002Fcsdnimg.cn\u002Frelease\u002Fmarkdown-editor\u002F1.1.0\u002Fmarkdown-editor.js","componentSortCfg":"{ \"right\":[\"ratesInfo\",\"cty-profile\",\"pub-comp\",\"user-right-introduce\",\"post-event\",\"my-mission\", \"user-right-rank\",\"user-right-rule\",\"user-right-adimg\"] }","showCknowDetail":"{\"show\":true,\"reportView\":true,\"url\":\"https:\u002F\u002Fai.csdn.net\u002Fhomework?utm_source=cknow_bbs_detail\",\"spm\":\"1035.2022.3001.10801\"}","show_1024":"{\"enable\":false,\"useWhitelist\":false,\"whitelist\":[76215],\"home\":\"https:\u002F\u002F1111.csdn.net\u002F\",\"logo\":\"https:\u002F\u002Fimg-home.csdnimg.cn\u002Fimages\u002F20221104102741.png\",\"hideLive\":true}","iframes":"[\"3859\"]","pageCfg":"{\"disableDownloadPDF\": false,\"hideSponsor\":false}"}},"template":{"templateId":71,"templateComponentName":"ccloud-detail","title":"ccloud-detail","floorList":[{"floorId":562,"floorComponentName":"floor-user-content","title":"社区详情页","description":"社区详情页","indexOrder":3,"componentList":[{"componentName":"baseInfo","componentDataId":"cloud-detail1","componentConfigData":{},"relationType":3},{"componentName":"user-right-introduce","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-recommend","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-right-rank","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-right-rule","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-right-adimg","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"default2014LiveRoom","componentDataId":"20221024DefaultLiveRoom","componentConfigData":{},"relationType":3}]}]},"data":{"baseInfo":{"customDomain":"","uriName":"DotNET","communityHomePage":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET","owner":{"userName":"community_93","nickName":"ASP.NET","avatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","position":"","companyName":""},"user":{"userRole":3,"userName":null,"nickName":null,"avatarUrl":null,"rank":null,"follow":2,"communityBase":null,"joinCollege":null,"isVIP":null},"community":{"name":".NET社区","description":".NET技术交流专区","avatarUrl":"https:\u002F\u002Fimg-community.csdnimg.cn\u002Favatar\u002F745f64491f2744dcbce3cd7127270b93.png?x-oss-process=image\u002Fresize,m_fixed,h_88,w_88","qrCode":"","createTime":"2007-09-28","communityAvatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","communityNotice":null,"userCount":62243,"contentCount":668998,"followersCount":49798,"communityRule":"\u003Cp\u003E.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。\u003C\u002Fp\u003E\n\n\u003Cp\u003E希望和大家一起共同营造一个活跃、友好的社区氛围。\u003C\u002Fp\u003E\n","communityId":211,"bgImage":"","hashId":"2lwpzdnk","domain":"","uriName":"DotNET","externalDisplay":1,"adBanner":{"img":"","url":"","adType":0,"adCon":null},"rightBanner":{"img":"","url":"","adType":0,"adCon":null},"tagId":null,"tagName":null,"communityType":2,"communityApplyUrl":"https:\u002F\u002Fmarketing.csdn.net\u002Fquestions\u002FQ2106040308026533763","joinType":0,"visibleType":0,"collapse":0,"topicMoveAble":0,"allowActions":{},"communityOwner":"community_93","tagNameInfo":{"provinceTag":null,"areaTag":null,"technologyTags":[{"id":190,"name":"javascript"},{"id":400064,"name":"云原生"}],"customTags":[{"id":1,"name":"企业社区"}]}},"tabList":[{"tabId":862,"tabName":"问答","tabUrl":"https:\u002F\u002Fask.csdn.net\u002Flist\u002F3\u002Ftag\u002F576","tabSwitch":1,"tabType":0,"tabContribute":0,"indexOrder":0,"iframe":true,"sortType":1},{"tabId":20680,"tabName":".NET Conf China","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":1,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=20680","iframe":false,"sortType":1},{"tabId":1370,"tabName":"全部","tabUrl":"","tabSwitch":1,"tabType":4,"tabContribute":0,"cardType":0,"indexOrder":2,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=1370","iframe":false,"sortType":1},{"tabId":420,"tabName":"招聘","tabUrl":"","tabSwitch":1,"tabType":3,"tabContribute":0,"indexOrder":3,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=420","iframe":false,"sortType":1},{"tabId":23493,"tabName":"社区公告","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":3,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=23493","iframe":false,"sortType":1},{"tabId":22149,"tabName":"寻找 .NET 技术达人","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":4,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=22149","iframe":false,"sortType":1},{"tabId":714,"tabName":".NET Framework","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":5,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=714","iframe":false,"sortType":1},{"tabId":21249,"tabName":".NET Core","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":6,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21249","iframe":false,"sortType":1},{"tabId":21248,"tabName":"微服务","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":7,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21248","iframe":false,"sortType":1},{"tabId":21250,"tabName":".NET5 \u002F 6","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":8,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21250","iframe":false,"sortType":1},{"tabId":21498,"tabName":".NET技术前瞻","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":9,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21498","iframe":false,"sortType":1},{"tabId":21500,"tabName":"VC","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":10,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21500","iframe":false,"sortType":1},{"tabId":21499,"tabName":".NET技术其他语言","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":11,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21499","iframe":false,"sortType":1},{"tabId":21251,"tabName":"ASP_NET","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":12,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21251","iframe":false,"sortType":1},{"tabId":21253,"tabName":"EF","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":13,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21253","iframe":false,"sortType":1},{"tabId":21254,"tabName":"EF Core","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":14,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21254","iframe":false,"sortType":1},{"tabId":715,"tabName":"Web Services","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":15,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=715","iframe":false,"sortType":1},{"tabId":717,"tabName":"桌面应用","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":16,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=717","iframe":false,"sortType":1},{"tabId":716,"tabName":"VB","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":17,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=716","iframe":false,"sortType":1},{"tabId":718,"tabName":"图表区","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":18,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=718","iframe":false,"sortType":1},{"tabId":21258,"tabName":"前端","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":19,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21258","iframe":false,"sortType":1},{"tabId":4055689,"tabName":"博文收录","tabUrl":"","tabSwitch":1,"tabType":2,"tabContribute":0,"cardType":0,"indexOrder":19,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=4055689","iframe":false,"sortType":1},{"tabId":719,"tabName":"分析与设计","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":20,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=719","iframe":false,"sortType":1},{"tabId":1638782,"tabName":"Ada助手","tabUrl":"","tabSwitch":1,"tabType":2,"tabContribute":0,"cardType":0,"indexOrder":20,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=1638782","iframe":false,"sortType":1},{"tabId":720,"tabName":"组件\u002F控件开发","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":21,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=720","iframe":false,"sortType":1},{"tabId":721,"tabName":"AppLauncher","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":22,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=721","iframe":false,"sortType":1},{"tabId":21252,"tabName":"圈内交友","tabUrl":"","tabSwitch":1,"tabType":1,"tabContribute":1,"cardType":0,"indexOrder":23,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET?typeId=21252","iframe":false,"sortType":1}],"dataResource":{"mediaType":"c_cloud","subResourceType":"8_c_cloud_long_text","showType":"long_text","tabId":0,"communityName":".NET社区","communityHomePageUrl":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FDotNET","communityType":2,"content":{"id":"390705916","contentId":390705916,"cateId":0,"cateName":null,"url":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F390705916","shareUrl":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F390705916","createTime":"2014-02-11 11:01:38","updateTime":"2021-05-28 19:05:39","resourceUsername":"u013104783","best":0,"top":0,"text":null,"publishDate":"2014-02-11","lastReplyDate":"2014-02-11","type":"13","nickname":"夏夜花花的太阳","avatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fc84038708ce342f59ff63573de95185f_u013104783.jpg!1","username":"u013104783","commentCount":13,"diggNum":0,"digg":false,"viewCount":333,"hit":false,"resourceSource":6,"status":10,"taskStatus":null,"expired":false,"taskCate":0,"taskAward":0,"taskExpired":null,"checkRedPacket":null,"avgScore":0,"totalScore":0,"topicTitle":"网站如果分为上、左下,和右下三部分,用什么方式做比较好呢?","insertFirst":false,"likeInfo":null,"description":"我要做一个网站,分为上、左下,和右下。上和左下基本内容固定的话,大家做这种网站最常用的是什么方式呢?","coverImg":"https:\u002F\u002Fimg-home.csdnimg.cn\u002Fimages\u002F20221026061951.png","content":"我要做一个网站,分为上、左下,和右下。上和左下基本内容固定的话,大家做这种网站最常用的是什么方式呢?","mdContent":null,"pictures":null,"videoInfo":null,"linkInfo":null,"student":{"isCertification":false,"org":"","bala":""},"employee":{"isCertification":false,"org":"","bala":""},"userCertification":[],"dependId":"0","dependSubType":null,"videoUrl":null,"favoriteCount":0,"favoriteStatus":false,"taskType":null,"defaultScore":null,"syncAsk":false,"videoPlayLength":null},"communityUser":null,"allowPost":false,"submitHistory":[{"user":{"registerurl":"https:\u002F\u002Fg.csdnimg.cn\u002Fstatic\u002Fuser-reg-year\u002F1x\u002F12.png","avatarurl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fc84038708ce342f59ff63573de95185f_u013104783.jpg!1","nickname":"夏夜花花的太阳","selfdesc":"","createdate":"2013-12-10 16:05:31","days":"4235","years":"12","username":"u013104783","school":null,"company":null,"job":null},"userName":"u013104783","event":"创建了帖子","body":"2014-02-11 11:01","editId":null}],"resourceExt":{}},"contentReply":{"pageNo":1,"pageSize":20,"totalPages":1,"totalCount":13,"total":0,"list":[{"hit":null,"hitMsg":null,"content":"\u003Cfieldset\u003E\u003Clegend class=\"font_bold\"\u003E引用 5 楼 u013104783 的回复:\u003C\u002Flegend\u003E\u003Cblockquote\u003E[quote=引用 4 楼 zuo_hy 的回复:]\n网上找div 布局样例,可以先熟悉用div直接布局。\u003C\u002Fblockquote\u003E\u003C\u002Ffieldset\u003E\ndiv已经熟悉了,只是没做过这种的。想知道大家用的什么方法,我用的是asp.net。[\u002Fquote]\n之前给你说错了,HTML里面才是 iframe标签,asp.net中封装成了 frameset\n具体用法和例子:\u003Ca href=\"http:\u002F\u002Fwww.cnblogs.com\u002Fsunfeiwto\u002Farchive\u002F2008\u002F11\u002F20\u002F1337542.html\" target=\"_blank\" \u003Ehttp:\u002F\u002Fwww.cnblogs.com\u002Fsunfeiwto\u002Farchive\u002F2008\u002F11\u002F20\u002F1337542.html\u003C\u002Fa\u003E","topicTitle":null,"description":"引用 5 楼 u013104783 的回复:[quote=引用 4 楼 zuo_hy 的回复:] 网上找div 布局样例,可以先熟悉用div直接布局。 div已经熟悉了,只是没做过这种的。想知道大家用的什么方法,我用的是asp.net。[\u002Fquote] 之前给你说错了,HTML里面才是 iframe标签,asp.net中封装成了 frameset 具体用法和例子:http:\u002F\u002Fwww.cnblogs.com\u002Fsunfeiwto\u002Farchive\u002F2008\u002F11\u002F20\u002F1337542.html","id":396719901,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"a01589","userNickName":"走出一条新道路","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fa73469c531484852ad7ff9d7d265105d_a01589.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":1904509090,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 11:45:52","updateTime":"2014-03-04 02:43:34","formatTime":"2014-02-11","userRoleHonorary":{"userName":"a01589","roleId":216,"roleType":0,"roleStatus":1,"honoraryId":0,"roleName":"","honoraryName":null,"communityNickname":"","communitySignature":""},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"\u003Cfieldset\u003E\u003Clegend class=\"font_bold\"\u003E引用 4 楼 zuo_hy 的回复:\u003C\u002Flegend\u003E\u003Cblockquote\u003E网上找div 布局样例,可以先熟悉用div直接布局。\u003C\u002Fblockquote\u003E\u003C\u002Ffieldset\u003E\ndiv已经熟悉了,只是没做过这种的。想知道大家用的什么方法,我用的是asp.net。","topicTitle":null,"description":"引用 4 楼 zuo_hy 的回复:网上找div 布局样例,可以先熟悉用div直接布局。 div已经熟悉了,只是没做过这种的。想知道大家用的什么方法,我用的是asp.net。","id":396719744,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"u013104783","userNickName":"夏夜花花的太阳","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fc84038708ce342f59ff63573de95185f_u013104783.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":2362331198,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 11:32:10","updateTime":"2014-02-11 11:38:35","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"网上找div 布局样例,可以先熟悉用div直接布局。","topicTitle":null,"description":"网上找div 布局样例,可以先熟悉用div直接布局。","id":396719609,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"zuo_hy","userNickName":"弘毅致远","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fb62302447b1f44f893487103fd021ff6_zuo_hy.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":989768889,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 11:23:20","updateTime":"2014-02-11 11:30:46","formatTime":"2014-02-11","userRoleHonorary":{"userName":"zuo_hy","roleId":216,"roleType":0,"roleStatus":1,"honoraryId":0,"roleName":"","honoraryName":null,"communityNickname":"","communitySignature":""},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"MVC4吧,\n<body>\n<div class="header">\n<\u002Fdiv>\n<div class="content">\n <div class="left">content left<\u002Fdi>\n <div class="right">@RenderBody()<\u002Fdi>\n<\u002Fdiv>\n@Html.Partial("~\u002FViews\u002FShared\u002FFoot.cshtml")\n<\u002Fbody>\n做一个这样的_layout,\n\n具体页面可以写成这样\n\u003Cpre\u003E\u003Ccode class=\"language-cs\"\u003E\n@{\n ViewBag.Title = "Title";\n Layout = "~\u002FViews\u002FShared\u002F_Public.cshtml";\n}\n@section Head {\n\t<script type="text\u002Fjavascript" src="@Url.Content("~\u002FContent\u002Fjs\u002Fjquery.slides.min.js")"><\u002Fscript>\n}\n<div id="container" class="container">\n\t<div class="article">\n\t\t发生的发生的\n\t<\u002Fdiv>\n\t<div class="aside">\n\t\t啊时代发生的发\n\t\t<\u002Fdiv>\n\t<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E","topicTitle":null,"description":"MVC4吧, \u003Cbody\u003E \u003Cdiv class=\"header\"\u003E \u003C\u002Fdiv\u003E \u003Cdiv class=\"content\"\u003E \u003Cdiv class=\"left\"\u003Econtent left\u003C\u002Fdi\u003E \u003Cdiv class=\"right\"\u003E@RenderBody()\u003C\u002Fdi\u003E \u003C\u002Fdiv\u003E @Html.Partial(\"~\u002FViews\u002FShared\u002FFoot.cshtml\") \u003C\u002Fbody\u003E 做一个这样的_layout, 具体页面可以写成这样 @{ ViewBag.Title = \"Title\";","id":396719587,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"zuo_hy","userNickName":"弘毅致远","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fb62302447b1f44f893487103fd021ff6_zuo_hy.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":989768889,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 11:22:06","updateTime":"2014-02-11 11:30:16","formatTime":"2014-02-11","userRoleHonorary":{"userName":"zuo_hy","roleId":216,"roleType":0,"roleStatus":1,"honoraryId":0,"roleName":"","honoraryName":null,"communityNickname":"","communitySignature":""},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"\u003Cfieldset\u003E\u003Clegend class=\"font_bold\"\u003E引用 1 楼 a01589 的回复:\u003C\u002Flegend\u003E\u003Cblockquote\u003E你的意思已经很明显了,使用 iframe\n相关资料:\u003Ca href=\"http:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp\" target=\"_blank\" \u003Ehttp:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\u003C\u002Ffieldset\u003E\n请问,有没有例子之类的?谢谢哈。","topicTitle":null,"description":"引用 1 楼 a01589 的回复:你的意思已经很明显了,使用 iframe 相关资料:http:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp 请问,有没有例子之类的?谢谢哈。","id":396719516,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"u013104783","userNickName":"夏夜花花的太阳","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fc84038708ce342f59ff63573de95185f_u013104783.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":2362331198,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 11:16:53","updateTime":"2014-02-11 11:29:41","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"你的意思已经很明显了,使用 iframe\n相关资料:\u003Ca href=\"http:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp\" target=\"_blank\" \u003Ehttp:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp\u003C\u002Fa\u003E","topicTitle":null,"description":"你的意思已经很明显了,使用 iframe 相关资料:http:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp","id":396719419,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"a01589","userNickName":"走出一条新道路","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fa73469c531484852ad7ff9d7d265105d_a01589.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":1904509090,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 11:08:49","updateTime":"2014-03-04 02:43:34","formatTime":"2014-02-11","userRoleHonorary":{"userName":"a01589","roleId":216,"roleType":0,"roleStatus":1,"honoraryId":0,"roleName":"","honoraryName":null,"communityNickname":"","communitySignature":""},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"要SEO的话明显做母版页啊。。。\n否则的话直接Iframe","topicTitle":null,"description":"要SEO的话明显做母版页啊。。。 否则的话直接Iframe","id":396722274,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"starfd","userNickName":"娃都会打酱油了","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F093de97143344a099aeb67a5723de298_starfd.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":3030977379,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 03:55:31","updateTime":"2014-03-04 02:43:34","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"\u003Cfieldset\u003E\u003Clegend class=\"font_bold\"\u003E引用 1 楼 a01589 的回复:\u003C\u002Flegend\u003E\u003Cblockquote\u003E你的意思已经很明显了,使用 iframe\n相关资料:\u003Ca href=\"http:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp\" target=\"_blank\" \u003Ehttp:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp\u003C\u002Fa\u003E\u003C\u002Fblockquote\u003E\u003C\u002Ffieldset\u003E\n\n网站用iframe 不是很好,不好做SEO","topicTitle":null,"description":"引用 1 楼 a01589 的回复:你的意思已经很明显了,使用 iframe 相关资料:http:\u002F\u002Fwww.w3school.com.cn\u002Ftags\u002Ftag_iframe.asp 网站用iframe 不是很好,不好做SEO","id":396721993,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"hemowolf","userNickName":"小灰狼","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F7d458e42ae064e79a7eb9063e2561ebf_hemowolf.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":3658506658,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 03:35:18","updateTime":"2014-02-11 03:40:58","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"div+css布局。简单易学","topicTitle":null,"description":"div+css布局。简单易学","id":396721953,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"u010176806","userNickName":"额小白","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fe68e6b7b43294c5fa93e3973ce101fa5_u010176806.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":1893806493,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 03:32:19","updateTime":"2014-02-11 03:40:58","formatTime":"2014-02-11","userRoleHonorary":{"userName":"u010176806","roleId":216,"roleType":0,"roleStatus":1,"honoraryId":0,"roleName":"","honoraryName":null,"communityNickname":"","communitySignature":""},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"iframe据说对SEO不友好,一般用div布局。","topicTitle":null,"description":"iframe据说对SEO不友好,一般用div布局。","id":396721934,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"sjyforg","userNickName":"申江渔夫","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fbefce65e61924ab1853786783cb112ac_sjyforg.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":3727433636,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 03:30:44","updateTime":"2014-03-04 02:43:34","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"如果要简单的话,可以用控件easyui。","topicTitle":null,"description":"如果要简单的话,可以用控件easyui。","id":396721615,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"tossgoon","userNickName":"tossgoon","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fe445c7119a9d4e51aad4cde080b46418_tossgoon.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":22355618,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 03:02:51","updateTime":"2014-02-11 03:34:54","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"\u003Cfieldset\u003E\u003Clegend class=\"font_bold\"\u003E引用 7 楼 u013104783 的回复:\u003C\u002Flegend\u003E\u003Cblockquote\u003E我发现有用母版的,也有用iframe的,请问这两个有什么区别,用哪种比较好呀?\u003C\u002Fblockquote\u003E\u003C\u002Ffieldset\u003E\n母版?是定义一个规则,然后每个页面的基本布局框架都和母版中的一致,后者就是我楼上所说的那些,没有什么好不好之说","topicTitle":null,"description":"引用 7 楼 u013104783 的回复:我发现有用母版的,也有用iframe的,请问这两个有什么区别,用哪种比较好呀? 母版?是定义一个规则,然后每个页面的基本布局框架都和母版中的一致,后者就是我楼上所说的那些,没有什么好不好之说","id":396721119,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"a01589","userNickName":"走出一条新道路","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fa73469c531484852ad7ff9d7d265105d_a01589.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":1904509090,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 02:20:58","updateTime":"2014-02-11 02:37:34","formatTime":"2014-02-11","userRoleHonorary":{"userName":"a01589","roleId":216,"roleType":0,"roleStatus":1,"honoraryId":0,"roleName":"","honoraryName":null,"communityNickname":"","communitySignature":""},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"我发现有用母版的,也有用iframe的,请问这两个有什么区别,用哪种比较好呀?","topicTitle":null,"description":"我发现有用母版的,也有用iframe的,请问这两个有什么区别,用哪种比较好呀?","id":396720817,"contentResourceId":390705916,"bindContentResourceId":0,"communityId":211,"username":"u013104783","userNickName":"夏夜花花的太阳","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fc84038708ce342f59ff63573de95185f_u013104783.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":2362331198,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2014-02-11 01:53:27","updateTime":"2014-02-11 02:10:32","formatTime":"2014-02-11","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null}],"maxPageSize":3000},"defaultActiveTab":20680,"recommends":[{"url":"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Flsz532652692\u002F5503867","title":"数据结构演示软件","desc":"数据结构算法演示(Windows版) \n\n使 用 手 册\n\n\n一、 功能简介\n\n本课件是一个动态演示数据结构算法执行过程的辅助教学软件, 它可适应读者对算法的输入数据和过程执行的控制\u003Cem\u003E方式\u003C\u002Fem\u003E的不同需求, 在计算机的屏幕上显示算法执行过程中数据的逻辑结构或存储结构的变化状况或递归算法执行过程中栈的变化状况。整个系统使用菜单驱动\u003Cem\u003E方式\u003C\u002Fem\u003E, 每个菜单包括若干菜单项。每个菜单项对应一个动作或一个子菜单。系统一直处于选择菜单项或执行动作状态, 直到选择了退出动作为止。\n\n\n二、 系统内容\n\n本系统内含84个算法,分属13\u003Cem\u003E部分\u003C\u002Fem\u003E内容,由主菜单显示,与《数据结构》教科书中自第2章至第11章中相对应。各\u003Cem\u003E部分\u003C\u002Fem\u003E演示算法如下:\n\n1. 顺序表\n\n (1)在顺序表中插入一个数据元素(ins_sqlist)\n\n(2)删除顺序表中一个数据元素(del_sqlist)\n\n(3)合并两个有序顺序表(merge_sqlist)\n\n2. 链表\n\n (1)创建一个单链表(Crt_LinkList)\n\n(2)在单链表中插入一个结点(Ins_LinkList)\n\n(3)删除单链表中的一个结点(Del_LinkList)\n\n(4)两个有序链表求并(Union)\n\n(5)归并两个有序链表(MergeList_L)\n\n(6)两个有序链表求交(ListIntersection_L)\n\n(7)两个有序链表求差(SubList_L)\n\n3. 栈和队列\n\n (1)计算阿克曼函数(AckMan)\n\n(2)栈的输出序列(Gen、Perform)\n\n(3)递归算法的演示\n\n 汉诺塔的算法(Hanoi)\n\n 解皇后问题的算法(Queen)\n\n 解迷宫的算法(Maze)\n\n 解背包问题的算法(Knap)\n\n(4)模拟银行(BankSimulation)\n\n(5)表达式求值(Exp_reduced)\n\n4. 串的模式匹配\n\n (1)古典算法(Index_BF)\n\n(2)求Next 函数值(Get_next)和按Next 函数值进行匹配 (Index_KMP(next))\n\n(3)求 Next 修正值(Get_nextval)和按 Next 修正值进行匹配(Index_KMP(nextval))\n\n5. 稀疏矩阵\n\n (1)矩阵转置 (Trans_Sparmat)\n\n(2)快速矩阵转置 (Fast_Transpos)\n\n(3)矩阵乘法 (Multiply_Sparmat)\n\n6. 广义表\n\n (1)求广义表的深度(Ls_Depth)\n\n (2)复制广义表(Ls_Copy)\n\n(3)创建广义表的存储结构(Crt_Lists)\n\n7. 二叉树\n\n (1)遍历二叉树\n\n 二叉树的线索化\n\n 先序遍历(Pre_order)\n\n 中序遍历(In_order)\n\n 后序遍历(Post_order)\n\n (2) 按先序建二叉树(CrtBT_PreOdr) \n\n(3) 线索二叉树\n\n 二叉树的线索化\n\n 生成先序线索(前驱或后继) (Pre_thre)\n\n 中序线索(前驱或后继) (In_thre)\n\n 后序线索(前驱或后继) (Post_thre)\n\n 遍历中序线索二叉树(Inorder_thlinked)\n\n 中序线索树的插入(ins_lchild_inthr)和删除(del_lchild_inthr)结点\n\n (4)建赫夫曼树和求赫夫曼编码(HuffmanCoding)\n\n(5)森林转化成二叉树(Forest2BT)\n\n(6)二叉树转化成森林(BT2Forest)\n\n(7)按表达式建树(ExpTree)并求值(CalExpTreeByPostOrderTrav)\n\n8. 图\n\n (1)图的遍历\n\n 深度优先搜索(Travel_DFS)\n\n 广度优先搜索(Travel_BFS)\n\n(2)求有向图的强连通分量(Strong_comp)\n\n(3)有向无环图的两个算法\n\n 拓扑排序(Toposort)\n\n 关键路径(Critical_path)\n\n(4)求最小生成树\n\n 普里姆算法(Prim)\n\n 克鲁斯卡尔算法(Kruscal)\n\n(5)求关节点和重连通分量(Get_artical)\n\n(6)求最短路径\n\n 弗洛伊德算法(shortpath_Floyd)\n\n 迪杰斯特拉算法(shortpath_DIJ)\n\n9. 存储管理\n\n (1)边界标识法 (Boundary_tag_method)\n\n(2)伙伴系统 (Buddy_system)\n\n(3)紧缩无用单元 (Storage_compaction)\n\n10. 静态查找\n\n (1)顺序查找(Search_Seq)\n\n(2)折半查找 (Serch_Bin)\n\n(3)插值查找 (Search_Ins)\n\n(4)斐波那契查找 (Search_Fib)\n\n(5)次优查找树(BiTree_SOSTree)\n\n11. 动态查找\n\n (1)在二叉排序树上进行查找(bstsrch)、插入结点(ins_bstree)和删除结点(del_bstree)\n\n(2)在二叉平衡树上插入结点(ins_AVLtree) 和删除结点(del_AVLtree)\n\n(3)在 B-树上插入结点(Ins_BTree) 和 删除结点(Del_BTree)\n\n(4)在 B+树上插入结点(Ins_PBTree) 和 删除结点(Del_PBTree)\n\n12. 内部排序\n\n (1)简单排序法\n\n 直接插入排序(Insert_sort)\n\n 表插入排序(内含插入(Ins_Tsort) 重排(Arrange)两个算法)\n\n 起泡排序(BubbleSort) \n\n 简单选择排序(SelectSort)\n\n(2)复杂排序法\n\n 堆排序(HeapSort)\n\n 快速排序(QuickSort)\n\n 锦标赛排序(Tournament) \n\n(3)其他\n\n 快速地址排序(QkAddrst)\n\n 基数排序(RadixSort)\n\n13. 外部排序\n\n (1)多路平衡归并排序(K-Merge)\n\n(2)置换-选择排序(Repl_Selection)\n\n\n\u003Cem\u003E三\u003C\u002Fem\u003E、 运行环境\n\n1. 硬件:Pentium100以上PC机。\n\n2. 软件:Windows95及以上版本的操作系统。\n\n\n四、 运行\n\n 本系统的执行文件为DSDEMOW.EXE。\n\n\n五、 如何使用本课件\n\n读者可以利用鼠标移动光标选择“演示算法”或“菜单命令”来控制课件的运行过程。\n\n1. 课件的演示算法菜单为页式菜单。第一级菜单中的各项与上述“系统内容”中各大项相对应,读者运行“算法演示课件”后, 即进入“算法选择一级菜单”画面,此时可移动光标进行选择,当光标所在菜单项改为红色时,单击鼠标即进入“算法选择二级菜单”,进行相同操作之后,或进入算法选择\u003Cem\u003E三\u003C\u002Fem\u003E级菜单(如图1所示),或进入算法演示的执行状态(如图2所示)。\n\n \n\n图1\n\n\n \n\n图2\n\n\n在算法选择菜单画面中,形如 的图标意为尚有下级菜单,形如 的图标则表示将直接进入算法演示状态。此时也可直接单击一级菜单或二级菜单的标题直接返回之,注意:菜单\u003Cem\u003E右\u003C\u002Fem\u003E侧上方的“退出”按钮意为退出整个演示课件。\n\n2. 算法演示执行状态下的屏幕\u003Cem\u003E分为\u003C\u002Fem\u003E\u003Cem\u003E三\u003C\u002Fem\u003E\u003Cem\u003E部分\u003C\u002Fem\u003E:第一行为“标题行”,第二行为“菜单命令”,以下为算法演示屏上各菜单的说明。\n\n菜单命令中各项自左至\u003Cem\u003E右\u003C\u002Fem\u003E的功能分别为:\n\n 数据——设置算法演示的数据(数据结构)。\n\n 调用栈——察看当前函数(或过程)嵌套或递归的历程。\n\n 说明——察看算法说明。\n\n 暂停——中断演示过程。\n\n 执行——连续执行算法直至所设断点或至算法执行完毕。\n\n 单步——执行一行算法,遇到子程序调用时,连续执行完子程序。\n\n 跟踪——执行一行算法,遇到子程序调用时,进入子程序。\n\n 执行到——演示算法到当前所设最近的断点或算法窗口中的当前行。\n\n 恢复——重置屏幕为当前算法执行前的初始状态。\n\n 断点——在算法窗口的当前选择行设置断点或清除断点。\n\n 设置——设置连续演示时的速度或开\u002F闭背景音乐(或动作音效)开关。\n\n 返回——返回算法选择菜单。\n\n3. 断点的设置方法为:移动光标至“断点语句”所在行,点击鼠标后即出现绿色光条,之后单击“断点”菜单中的“设置断点”命令项即可,此时该断点语句所在行上将出现红色光条。\n\n\n六、 算法演示屏的详细说明\n\n 本系统对屏幕设计的基本原则是集数据结构、算法和其他重要信息(如栈等)于同一屏幕。一般情况下演示屏由图示、算法和变量\u003Cem\u003E三\u003C\u002Fem\u003E个窗口组成,特殊情况下将根据演示内容适当增加。一般情况下, 左侧图示窗口显示演示数据的逻辑结构或存储结构,\u003Cem\u003E右\u003C\u002Fem\u003E侧上方窗口显示算法文本,\u003Cem\u003E右\u003C\u002Fem\u003E侧下方窗口显示当前算法中各变量的值或递归工作栈的状态。各窗口间的边界大小均可自由调节,且可按需扩大至全屏。\n\n 算法窗口显示当前演示的算法文本,并以深蓝色的光条覆盖将要执行的语句。若算法中含有函数或过程调用语句,则当光条覆盖到该过程调用语句时,随即自动隐去原算法文本而显示子过程的文本,而从此过程返回时再重新显示原算法文本。类似地,在演示递归算法执行过程时,每当执行递归调用本过程的语句时,随即隐去当前层次的算法文本而显示下一层的算法文本,并且以不同颜色的算法文本表示递归的不同层次。如第一层的算法文本为深绿色,第二层为紫色,第\u003Cem\u003E三\u003C\u002Fem\u003E层为深红色,第四层为深蓝色,第五层为浅蓝色,第六层为玫瑰红色等。\n\n 当演示递归算法执行过程中递归工作栈的变化状态时,递归工作栈显示在\u003Cem\u003E右\u003C\u002Fem\u003E侧下窗口,递归工作栈的状态和算法文本窗口中相应语句执行后的结果相对应,栈顶记录为当前递归层的参量值。每进入一层递归时,就产生一个新的工作记录(包括调用语句行号、变量参数或全程变量、数值参数和局部变量)压入栈顶;每退出一层递归时,先根据栈顶的调用语句行号返回至上层,然后在传递完变量参数的值后退栈。\n\n 各个算法演示屏的补充说明如下:\n\n1. 顺序表和链表的插入、删除和链表的生成\n\n 算法演示屏由显示顺序表或链表的图示、算法文本及变量等\u003Cem\u003E三\u003C\u002Fem\u003E个窗口组成。在演示算法之前,需先在弹出的小窗口中输入线性表的数据元素及算法参数 i(插入或删除的位置)和 b(被插的数据元素)的值。顺序表的图示窗口在演示屏的上方,链表的图示窗口在左侧。\n\n2. 有序表的操作\n\n算法演示屏的状态和 1 中所述相同。\n\n3. 汉诺塔问题\n\n 算法演示屏由4个窗口组成。\u003Cem\u003E右\u003C\u002Fem\u003E侧上方为算法文本,在算法中有4个形式参量,其中值参 n 为圆盘个数,x、y、和 z 分别表示3个塔座;\u003Cem\u003E右\u003C\u002Fem\u003E侧下方为递归工作栈,栈中每个记录包含调用语句行号 adr 及值参 n 和 x、y、z;左侧上方显示汉诺塔图形及移动操作结果;左侧下方显示移动操作的记录。\n\n4. 迷宫问题\n\n 左侧窗口显示迷宫的逻辑结构,由 N×N 个方格组成,左上[1,1]为入口,\u003Cem\u003E右\u003C\u002Fem\u003E下[N,N]为出口,并且以红色钉子填充表示障碍,空白表示通路,红色交通灯表示已游历过的路,箭头表示继续游历的方向,演示结束时显示一条通路或迷宫不通的信息。\u003Cem\u003E右\u003C\u002Fem\u003E侧下窗口为递归工作栈,栈中每个记录含6个数据项,其中 adr 指示调用语句行号,k 指示步数,(x,y) 表示当前坐标,i 指示路径方向(起始方向为 1,顺时针方向旋转搜索)。\n\n5. 皇后问题\n\n 左侧图示窗口包含棋盘和递归工作栈两\u003Cem\u003E部分\u003C\u002Fem\u003E,栈中记录含3个数据项,其中 adr 指示调用语句行号,k 指示列号,i 指示行号。此算法演示可求得所有可行结果,在求得每一种排布的结果之后,均会弹出一个窗口显示“找到第 j (j=1,2,…) 种排布”,单击“确定”按钮将继续进行,直至找到所有可能构成的排布。\n\n6. 背包问题\n\n \u003Cem\u003E右\u003C\u002Fem\u003E侧图示窗口的上方显示背包、物件及其体积。 若有解,则在求得每一组结果之后,均会弹出一个窗口提示求得一组解,单击提示窗口中的小人将继续进行。该窗口的下方为递归工作栈,栈中的记录含3个数据项,其中 adr 指示调用语句所在行号,n 指示物件个数,t 指示背包总体积。\n\n7. 阿克曼函数\n\n 整个演示屏只有显示算法文本和显示算法执行过程中栈的状态两个窗口。在执行算法之前,首先应按照提示输入参数 m 和 n 的值。\n\n8. 栈的输出序列\n\n 图示窗口的内容为:由算法 Gen 生成的栈的操作序列(列出在窗口的下方)、算法 Perform 执行时栈的操作过程(该窗口的上方)以及算法 Perform 执行的结果——栈的输出序列(列出在图示窗口的\u003Cem\u003E右\u003C\u002Fem\u003E侧)。\n\n9. 表达式求值\n\n图示窗口的内容主要为显示表达式求值过程中操作数栈和运算符栈的变化情况以及主要操作。上方的小窗口显示在算法演示之前设定的表达式。\n\n10. 离散事件模拟\n\n图示窗口分成3\u003Cem\u003E部分\u003C\u002Fem\u003E:中间\u003Cem\u003E部分\u003C\u002Fem\u003E或显示客户流动情况的动画,或显示程序执行过程中事件表和4个队列的数值,上方两个按钮用以切换动画或静态数据,下方则显示客户总人数、客户逗留的累计时间以及调节动画中小人移动速度的指针。\n\n11. 串的模式匹配\n\n 上窗口显示算法文本,下窗口显示串的匹配过程或求 next 函数的过程。\n\n12. 稀疏矩阵\n\n图示窗口显示矩阵的状态或其\u003Cem\u003E三\u003C\u002Fem\u003E元组的表示。\n\n13. 求广义表的深度\n\n 图示窗口显示广义表的存储结构,图中指针 ls 指向当前所求深度的广义表,值为空时不显示。演示结束时弹出窗口显示求得的深度。\n\n14. 复制广义表\n\n图示窗口的上方显示已知广义表的存储结构,图示窗口的下方显示复制求得的广义表的存储结构。递归工作栈中含调用语句行号 adr、变参 nls 和值参 ls。\n\n15. 创建广义表的存储结构\n\n图示窗口显示广义表存储结构的建立过程和算法执行过程中参数Sub的当前值。\n\n16. 遍历二叉树\n\n图示窗口显示二叉树的逻辑结构和遍历结果输出的结点序列,图中指针 bt 指向当前遍历的二叉树的根结点。\n\n17. 线索二叉树\n\n图示窗口显示二叉树的存储结构,但结点中只含标志域,而以结点间的黑色连线表示指针,红色连线表示前驱线索,蓝色连线表示后继线索。在二叉树线索化的过程中,图中指针 p 指向当前层二叉树的根结点,指针 pre 指向当前被访问的结点的前驱。在演示线索树的插入和删除过程时,图示窗口的下方还包括“输入行”和“提示行”。\n\n18. 按先序序列建二叉链表\n\n图示窗口显示输入的先序序列和生成二叉链表的过程。\n\n19. 森林和二叉树的相互转换\n\n图示窗口在显示屏的上方,其左侧为森林,\u003Cem\u003E右\u003C\u002Fem\u003E侧为二叉树。\n\n20. 赫夫曼树和赫夫曼编码\n\n图示窗口显示生成的赫夫曼树的逻辑结构和每个叶子结点的编码。\n\n21. 图的深度优先搜索\n\n图示窗口的上半\u003Cem\u003E部分\u003C\u002Fem\u003E显示图的逻辑结构,初始状态用青色圆圈表示顶点,结点间的黑色连线表示边或弧(连线上画有箭头)。演示过程中用红色覆盖已访问的顶点和边(或弧)。窗口下方显示图的邻接表,演示过程中以红色框边表示已访问过的弧。图示窗口的下方显示遍历后输出的顶点序列。\n\n22. 图的广度优先搜索\n\n 与深度优先不同的是,在窗口的下方增加一个队列,其左端为队头,\u003Cem\u003E右\u003C\u002Fem\u003E端为队尾。\n\n23. 求有向图的强连通分量\n\n图示窗口自上而下分别显示有向图的逻辑结构、存储结构和 Finished 数组在算法执行过程中的变化情况。所求得的各个强连通分量,将以不同颜色的顶点组表示。\n\n24. 求关节点和重连通分量\n\n图示窗口的上半\u003Cem\u003E部分\u003C\u002Fem\u003E显示无向图,下半\u003Cem\u003E部分\u003C\u002Fem\u003E自上而下分别显示 Vexnum、Vexdata、Visited、Low、Squlow(求得 low 值的顺序)和 artpoint(关节点)的信息。\n\n25. 有向图的拓扑排序\n\n图示窗口由5\u003Cem\u003E部分\u003C\u002Fem\u003E组成。其中左上显示有向图的邻接表;\u003Cem\u003E左下\u003C\u002Fem\u003E显示有向图,其中顶点和弧的初始状态分别为绿色和黑色,从栈中退出的顶点(i)用红色表示,分别以蓝色和红色指示当前访问的邻接点(k)和它们之间的弧(ik),灰白色表示已经输出的顶点;\u003Cem\u003E右\u003C\u002Fem\u003E下显示顶点的入度;\u003Cem\u003E右\u003C\u002Fem\u003E上显示入度为零的栈。当拓扑排序不成功时,在演示屏的中央将会弹出一个窗口,显示提示信息“网中存在自环!”,此时用户可在\u003Cem\u003E左下\u003C\u002Fem\u003E显示的有向图中由绿色顶点和黑色弧构成的子图中找到这个环。\n\n26. 有向图的关键路径\n\n图示窗口包含5\u003Cem\u003E部分\u003C\u002Fem\u003E信息。左上显示带入度域的邻接表;\u003Cem\u003E左下\u003C\u002Fem\u003E显示有向网的逻辑结构和顶点的入度及各顶点事件的最早发生时间和最迟发生时间;\u003Cem\u003E右\u003C\u002Fem\u003E下显示拓扑排序过程中入度为零的顶点的栈S,\u003Cem\u003E右\u003C\u002Fem\u003E上显示的栈 T 存放拓扑序列,其入栈顺序和栈 S 的出栈顺序相同,从栈顶到栈底的顶点顺序即为顶点的逆拓扑序列。算法执行结束后将弹出窗口列出全部结果,其中红色字体的弧表示关键活动。\n\n27. 普里姆算法\n\n图示窗口包含3\u003Cem\u003E部分\u003C\u002Fem\u003E内容。\u003Cem\u003E右\u003C\u002Fem\u003E上是邻接矩阵;左上是无向网的逻辑结构,图中顶点的初始状态为黄色,算法执行过程中,红色覆盖的顶点和边则表示已加入生成树的顶点和生成树上的边;窗口的下方则显示 closedge 数组中的值。\n\n28. 克鲁斯卡尔算法\n\n图示窗口的左侧为无向网,以红色标定已落在生成树上的边;\u003Cem\u003E右\u003C\u002Fem\u003E侧自上而下列出各条边的信息以及选择生成树的边的执行过程。\n\n29. 边界标识法\n\n图示窗口的初始状态为 64KB 的模拟存储器,演示过程中,以绿色覆盖占用块。各个存储块的头部左侧所示为该块的起始地址,头部结构或其他信息参见教科书。用户可根据弹出窗口的操作提示信息进行操作,输入请求分配的空间大小或释放块的首地址。\n\n30. 伙伴系统\n\n在图示窗口中,左侧为可利用空间链表的逻辑结构,\u003Cem\u003E右\u003C\u002Fem\u003E侧为存储结构,其中红色覆盖部\u003Cem\u003E分为\u003C\u002Fem\u003E占用块。弹出窗口为输入窗口,由用户输入请求分配的空间大小或释放块的首地址。\n\n31. 紧缩无用单元\n\n\u003Cem\u003E右\u003C\u002Fem\u003E侧显示存储空间,空白表示空闲块,其他颜色覆盖表示占用块,在存储空间不足分配时将进行空闲块压缩。左侧显示存储映像。弹出窗口为输入窗口,由用户输入请求分配的空间大小和分配或释放块的块名。\n\n32. 静态查找\n\n上窗口为图示窗口,演示查找过程;\u003Cem\u003E左下\u003C\u002Fem\u003E和\u003Cem\u003E右\u003C\u002Fem\u003E下分别为算法文本和变量窗口。\n\n33. B-树和B+树\n\n 整个屏幕\u003Cem\u003E分为\u003C\u002Fem\u003E上、下两个窗口,上窗口演示插入或删除结点过程中B-树或B+ 树结构的变化状况;下窗口内显示如查找关键字、插入位置、结点分裂等操作信息。下窗口上面左侧的小窗口为编辑窗口,由用户输入待插或待删的关键字,输入之后其\u003Cem\u003E右\u003C\u002Fem\u003E侧的操作命令将由隐式状态改为显式状态。\n\n34. 内部排序\n\n图示窗口演示排序过程以及排序过程中关键字之间进行的\u003Cem\u003E比较\u003C\u002Fem\u003E次数和记录移动的次数。\n\n\n\n七、 用户自行输入数据指南\n\n算法操作的对象——数据结构,或由用户自行输入,或由系统随机产生,并在获得用户的确认之前,可反复随机产生,直至用户满意,用鼠标点击“OK”按钮确认为止。\n\n 多数情况下的输入界面上有足够的提示信息,以指示用户需要进行何种操作。补充说明如下:\n\n1. 表的数据元素为任意的单个字符。\n\n2. 迷宫的输入界面如图3所示。图中砖墙图案表示障碍,连续点击鼠标可将光标所在位置设置成通道或者障碍,建议用户先点击“随机生成”按钮随机生成一个迷宫,然后移动鼠标调整成所需。所设迷宫可以利用“保存数据”按钮生成dat类型文件,并在需要时可以利用“取出数据”按钮读入。\n\n \n\n图3\n\n\n3. 演示背包问题的算法之前,首先需要输入物品个数,之后将出现如图4所示的输入界面,可以利用“随机生成”的按钮或各个相应的小窗口输入物品体积 wi 和背包体积 T 。背包的总体积不得超过 30 ,单个物品的体积不得超过 10 。\n\n\n \n\n图4\n\n\n4. “表达式求值”和“建表达式树”时的输入界面如图5所示。用户可在窗口内自行输入,并以“Enter”键为结束符;也可以连续点击左侧蓝色的表达式由系统自动生成,直至用户点击\u003Cem\u003E右\u003C\u002Fem\u003E侧的计算器表示确认为止。“求值”可实现带括弧的四则运算和幂次运算,并支持sin、cos、tan、arcsin 和 arccos 等函数计算,其操作数为实数。“建树”的表达式仅限于带括弧的四则运算,其操作数为单个字母的字符。\n\n \n\n\n图5\n\n\n5. 稀疏矩阵的输入界面如图6所示。用户可随意进行矩阵中任意位置元素的输入,只要将光标移动至待输入的元素位置,单击鼠标后将弹出计算器,单击数字按钮,可进行随意输入,之后点击“OK”按钮表示确认。\n\n\n图6\n\n\n6. 广义表的数据输入\u003Cem\u003E方式\u003C\u002Fem\u003E为自左向\u003Cem\u003E右\u003C\u002Fem\u003E顺序输入广义表的字符串。输入过程中,图7所示输入界面中的“确定”为灰色字体,只有当用户正确输入完毕时,“确定”两字才改为黑色字体,此时用户可单击此按钮表示确认。\n\n \n\n图7\n\n7. 图的输入界面如图8所示。之前尚需确认是否为有向图和带权图。在用户自行输入图时,首先按下“创建节点”按钮,之后可移动光标至窗口的任意位置单击鼠标创建顶点;然后单击“创建弧”按钮,可在任意两个顶点之间构建弧或边。构建弧(或边)的操作为:先将光标移动至弧尾的顶点,单击一次鼠标,然后移动光标至弧头位置,再单击一次鼠标。对于带权的图,则在构建弧(或边)的同时,在当时弹出的窗口中输入权值,权值的默认值为 1。\n\n \n\n图8\n\n8. 内部排序的关键字均为单个字符。","createTime":"2013-06-02 21:32:36","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-5503867-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-5503867-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"1\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Flsz532652692\u002F5503867\",\"strategy\":\"2~default~OPENSEARCH~Paid\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-5503867-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"1\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Flsz532652692\u002F5503867\",\"strategy\":\"2~default~OPENSEARCH~Paid\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-5503867-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"download"},{"url":"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002FZR__MaNong\u002F12036690","title":"jquery图片四角翻页展示效果.rar","desc":"jquery图片四角翻页展示效果.ra","createTime":"2019-12-17 17:59:12","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-12036690-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-12036690-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"2\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002FZR__MaNong\u002F12036690\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-12036690-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"2\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002FZR__MaNong\u002F12036690\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-12036690-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"download"},{"url":"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fxxd851116\u002F1332114","title":"JavaScript 图片切割效果","desc":"序一(08\u002F07\u002F21)\n\n很久之前就在一个\u003Cem\u003E网站\u003C\u002Fem\u003E的截取相片的功能中看到这个效果,也叫图片裁剪、图片剪切(设置一下也可以\u003Cem\u003E做\u003C\u002Fem\u003E出放大镜等类似的效果)。\n当时觉得很神奇,碍于水平有限,没\u003Cem\u003E做\u003C\u002Fem\u003E出来。\n前些日子突然想\u003Cem\u003E做\u003C\u002Fem\u003E一个透镜效果,就突然想到了这个效果,于是找出当年“珍藏”的代码决定一尝所愿。\n\n序二(08\u002F12\u002F06)\n\n自上一个版本的图片切割效果出来后,虽然也经常看到“框架开发这个如何如何容易”之类的评论,但也受到很多人的肯定,小弟在此感谢大家的支持。\n上一个版本由于是初次接触这类效果,而且是\u003Cem\u003E三\u003C\u002Fem\u003E个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。\n后来我知道这个效果叫ImageCropper,找了些这类效果参考,完善了切割的\u003Cem\u003E部分\u003C\u002Fem\u003E。\n近来我把其中的拖放效果和缩放效果单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。\n要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考图片切割系统。\n\n先看看效果:\n\n \n\n \n\n图片地址: \n\n\n程序说明\n\n这个效果主要分\u003Cem\u003E三\u003C\u002Fem\u003E个\u003Cem\u003E部分\u003C\u002Fem\u003E:层的拖放、层的缩放、图片切割(包括预览)。\n其中层的拖放和层的缩放我已经在其他两篇文章中有详细说明,这里就说说图片切割这\u003Cem\u003E部分\u003C\u002Fem\u003E吧。\n\n【图片切割】\n\n关于图片切割的设计,有\u003Cem\u003E三\u003C\u002Fem\u003E个方法:\n1.定位四个半透明层,遮住要盖住的\u003Cem\u003E部分\u003C\u002Fem\u003E,没试过,感觉\u003Cem\u003E比较\u003C\u002Fem\u003E麻烦;\n2.把图片设为背景图,通过设置背景图的位置来实现,但这样的缺点是只能按图片的正常比例实现,不够灵活;\n3.把图片放到切割对象里面,通过设置图片的top和left实现,这个方法是可行,但下面有更简单的方法实现;\n4.通过设置图片的clip来实现。\n\n这里介绍方法4的实现方法,这个方法是从当年“珍藏”的代码中看到的,先说说clip:\nclip的作用是“检索或设置对象的可视区域。可视区域外的\u003Cem\u003E部分\u003C\u002Fem\u003E是透明的。”\n依据上-\u003Cem\u003E右\u003C\u002Fem\u003E-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。\n例如:\n\ndiv { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }\n\n注意position:absolute的设置是必须的(详细看手册)。\n\n下面说说具体实现原理:\n首先需要一个容器(_Container),容器里面会插入\u003Cem\u003E三\u003C\u002Fem\u003E个层:\n底图层(_layBase):那个半透明的图片;\n切割层(_layCropper):正常显示的那个\u003Cem\u003E部分\u003C\u002Fem\u003E;\n控制层(_layHandle):就是控制显示的那个\u003Cem\u003E部分\u003C\u002Fem\u003E。\n\n其中为了底图层和切割层是程序自动创建的图片,控制层是自己定义的层(程序中是一个div)。\n底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角:\n\nthis._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;\n\n层叠顺序也要设置一下保证各层顺序。\n\n下面说说各\u003Cem\u003E部分\u003C\u002Fem\u003E的作用:\n容器:除了容器本身的作用,通过设置其背景色来设置透明的渐变色,由于图片本身没有背景色所以要通过容器来设置;\n底图层:在容器最底部,作用是显示非选择区域的图片,透明效果就是在这层设置;\n切割层:最关键的一个层,在底图层和控制层之间,在这个层通过clip设置其可视区域来实现切割图片的效果;\n控制层:位于顶部,拖放(_drag)和缩放(_resize)效果就是在这个层实现,根据其拖放和缩放的结果控制切割层的切割效果。\n\n这里要注意的是控制层的_drag拖放效果的Transparent要设为true(详细看拖放效果的透明背景bug\u003Cem\u003E部分\u003C\u002Fem\u003E)。\n要使用缩放需要把Resize设为true,并设置各个拖拉对象,程序通过_resize设置缩放的比例和最少范围(详细看拖拉缩放效果)。\n\n下面说说控制层如何控制切割效果:\n控制层的拖放和缩放过程中加入了SetPos设置切割样式程序,在SetPos程序中根据控制层的样式设置切割层的可视区域范围:\n\nvar p = this.GetPos();\nthis._layCropper.style.clip = \"rect(\" + p.Top + \"px \" + (p.Left + p.Width) + \"px \" + (p.Top + p.Height) + \"px \" + p.Left + \"px)\";\n\n其中GetPos程序,它可以把当前控制层的样式参数作为一个对象返回:\n\nwith(this._layHandle){\n return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }\n}\n\n如果理解了的话就会觉得其实原理挺简单的,不过要想出来还是要一定创意才行,为想出这个方法的人致敬!\n\n【切割预览】\n\n预览效果需要设置Preview属性为预览容器对象,程序会自动给容器插入一个预览对象(图片)。\n预览效果的关键在于如何根据控制层的数据来给预览对象定位,这个主要在SetPreview预览效果程序中处理。\n首先根据控制层的高宽比置预览对象显示的宽和高(不是图片本身的宽高哦),这里可以用GetSize程序获取:\n\nvar p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height \u002F p.Height;\n\n其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小:\n\nCode\nvar iWidth = nowWidth, iHeight = nowHeight, scale = iWidth \u002F iHeight;\n\u002F\u002F按比例设置\nif(fixHeight){ iWidth = (iHeight = fixHeight) * scale; }\nif(fixWidth && (!fixHeight || iWidth \u003E fixWidth)){ iHeight = (iWidth = fixWidth) \u002F scale; }\n\u002F\u002F返回尺寸对象\nreturn { Width: iWidth, Height: iHeight }\n\n可以看出如果后两个参数(viewWidth和this.viewHeight)都不设置就会按原来大小显示了,\n\n然后再按预览图跟控制层的比例设置预览图的样式参数:\n\nvar pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = o.Top * scale, pLeft = o.Left * scale;\n\n最后根据参数对预览对象进行样式设置和切割:\n\nCode\nwith(this._view.style){\n \u002F\u002F设置样式\n width = pWidth + \"px\"; height = pHeight + \"px\"; top = - pTop + \"px \"; left = - pLeft + \"px\";\n \u002F\u002F切割预览图\n clip = \"rect(\" + pTop + \"px \" + (pLeft + s.Width) + \"px \" + (pTop + s.Height) + \"px \" + pLeft + \"px)\";\n}\n\n这里有点烦乱,但应该不难理解就不详细说明了。\n\n【图片大小】\n\n容器的大小一般是固定的,但图片的大小就不是固定的,这里又可以使用SetSize程序用来设置图片大小:\n\nCode\nvar s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height);\n\u002F\u002F设置底图和切割图\nthis._layBase.style.width = this._layCropper.style.width = s.Width + \"px\";\nthis._layBase.style.height = this._layCropper.style.height = s.Height + \"px\";\n\n有了图片大小就可以用来设置拖放和缩放的范围限制了:\n\nCode\nthis._drag.mxRight = s.Width; this._drag.mxBottom = s.Height;\nif(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; }\n\nps:程序中的Init程序是用来把个性设置呈现出来,所以一般设置过属性之后(例如图片地址、透明度等)就执行一次Init程序就可以显示效果了。\n\n【ie6渲染bug】\n\n在拖放效果中说到插入一个div解决ie的透明背景bug,这里就需要修复这个bug。\n跟缩放效果配合使用时,不得不说ie6的一个渲染bug,用下面的代码测试(ie6):\n\nCode\n\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd\"\u003E\n\u003Chtml\u003E\n\u003Cbody\u003E\n\u003Cdiv id=\"aa\" style=\"width:300px;height:100px;border:1px solid;\"\u003E\u003Cdiv style=\"background:#00f;height:100%;\"\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\n\u003Cscript\u003EsetTimeout(\"aa.style.height=200\",0)\u003C\u002Fscript\u003E\n\u003C\u002Fbody\u003E\n\u003C\u002Fhtml\u003E\n\n可以对比ie7的效果,可以看出里面的div虽然高度设置了100%,但在外面的div修改高度之后,却不知什么原因没有填充了(外面的div渲染后,没有触发里面的div再渲染)。\n\n解决这个bug的关键是使里面的div能再渲染,这里有几个方法可以解决:\n1,设置控制层的overflow为hidden,好处是只需要设置一次,但这个样式会影响其他效果,当然在不影响效果的情况下这个是最好的方法;\n2,在缩放的时候,通过修改控制层的某些样式,使里面的div再渲染,这样的样式包括zoom,display(应该还有其他吧);\n3,在缩放的时候,通过修改插入div的某些样式,使其再渲染,这样的样式包括display(zoom也不行);\n程序中是通过修改_layHandle的zoom解决的:\n\nif(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; };\n\nps:这个bug的原因貌似跟ie的layout有关,但我查了一下还是没弄清楚,谁有详细的介绍或解析务必跟我分享一下啊。\n\n\n使用说明\n\n实例化时有\u003Cem\u003E三\u003C\u002Fem\u003E个必要参数:容器对象、控制层、图片地址:\n\nvar ic = new ImgCropper(\"bgDiv\", \"dragDiv\", \"1.jpg\");\n\n有以下这些可选参数和属性:\n属性:默认值\u002F\u002F说明\nOpacity: 50,\u002F\u002F透明度(0到100)\nColor: \"\",\u002F\u002F背景色\nWidth: 0,\u002F\u002F图片高度\nHeight: 0,\u002F\u002F图片高度\n\u002F\u002F缩放触发对象\nResize: false,\u002F\u002F是否设置缩放\nRight: \"\",\u002F\u002F\u003Cem\u003E右\u003C\u002Fem\u003E边缩放对象\nLeft: \"\",\u002F\u002F左边缩放对象\nUp: \"\",\u002F\u002F上边缩放对象\nDown: \"\",\u002F\u002F下边缩放对象\nRightDown: \"\",\u002F\u002F\u003Cem\u003E右\u003C\u002Fem\u003E下缩放对象\nLeftDown: \"\",\u002F\u002F\u003Cem\u003E左下\u003C\u002Fem\u003E缩放对象\nRightUp: \"\",\u002F\u002F\u003Cem\u003E右\u003C\u002Fem\u003E上缩放对象\nLeftUp: \"\",\u002F\u002F左上缩放对象\nMin: false,\u002F\u002F是否最小宽高限制(为true时下面min参数有用)\nminWidth: 50,\u002F\u002F最小宽度\nminHeight: 50,\u002F\u002F最小高度\nScale: false,\u002F\u002F是否按比例缩放\nRatio: 0,\u002F\u002F缩放比例(宽\u002F高)\n\u002F\u002F预览对象设置\nPreview: \"\",\u002F\u002F预览对象\nviewWidth: 0,\u002F\u002F预览宽度\nviewHeight: 0\u002F\u002F预览高度","createTime":"2009-05-20 22:56:19","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-1332114-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-1332114-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"3\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fxxd851116\u002F1332114\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-1332114-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"3\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fxxd851116\u002F1332114\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-1332114-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"download"},{"url":"https:\u002F\u002Fblog.csdn.net\u002Fu010121883\u002Farticle\u002Fdetails\u002F40042217","title":"CSS圆角框制作(2)","desc":"可变宽度的圆角框\r\n即,宽度和高度都可以改变的圆角框。这种圆角框可以随心所欲制作页面,背景图可以随意根据自己的需要进行改变。\r\n为大家介绍制作可变宽度的圆角框的方法--五图像圆角框制作方法。\r\n五图像\u003Cem\u003E分为\u003C\u002Fem\u003E哪五个图像呢?\r\n\r\n从图中可以看出五图像是:1、左上\u003Cem\u003E部分\u003C\u002Fem\u003E;2、\u003Cem\u003E左下\u003C\u002Fem\u003E\u003Cem\u003E部分\u003C\u002Fem\u003E;3、\u003Cem\u003E右\u003C\u002Fem\u003E上\u003Cem\u003E部分\u003C\u002Fem\u003E;4、\u003Cem\u003E右\u003C\u002Fem\u003E中\u003Cem\u003E部分\u003C\u002Fem\u003E;5、\u003Cem\u003E右\u003C\u002Fem\u003E下\u003Cem\u003E部分\u003C\u002Fem\u003E。\r\nCSS代码如下:\r\n\u002F*可变宽度的圆角框样式*\u002F\r\n.round2 {   ","createTime":"2014-10-13 11:43:36","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-40042217-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-40042217-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"4\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fu010121883\u002Farticle\u002Fdetails\u002F40042217\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-40042217-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"4\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fu010121883\u002Farticle\u002Fdetails\u002F40042217\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-40042217-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"blog"},{"url":"https:\u002F\u002Fblog.csdn.net\u002Fm0_65484028\u002Farticle\u002Fdetails\u002F135518094","title":"HTML网页设计【足球科普】学生DW静态网页设计","desc":"📔\u003Cem\u003E网站\u003C\u002Fem\u003E布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓\u003Cem\u003E网站\u003C\u002Fem\u003E程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成\u003Cem\u003E网站\u003C\u002Fem\u003E的功能设计。并确保\u003Cem\u003E网站\u003C\u002Fem\u003E代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到\u003Cem\u003E网站\u003C\u002Fem\u003E的效果。📘\u003Cem\u003E网站\u003C\u002Fem\u003E素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS\u003Cem\u003E做\u003C\u002Fem\u003E出适合网页尺寸的图片。📒\u003Cem\u003E网站\u003C\u002Fem\u003E文件方面:\u003Cem\u003E网站\u003C\u002Fem\u003E系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;","createTime":"2024-01-11 09:10:55","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-135518094-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-135518094-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"5\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fm0_65484028\u002Farticle\u002Fdetails\u002F135518094\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-135518094-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"5\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fm0_65484028\u002Farticle\u002Fdetails\u002F135518094\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-135518094-bbs-390705916.264^v3^pc_relevant_bbs_down_v2_opensearchbbsnew\\\",\\\"dist_request_id\\\":\\\"1752537758053_96582\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"blog"}],"staffDOList":[{"id":null,"communityId":211,"username":"community_93","userNickname":"ASP.NET","roleCode":1,"status":1,"createUsername":"","updateUsername":"","avatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","createTime":"2021-05-12 18:07:05","updateTime":"2021-05-12 18:07:05","lastLoginTime":"2021-05-12 18:07:05"},{"id":null,"communityId":211,"username":"dotnetconf","userNickname":".Net开发者社区","roleCode":2,"status":1,"createUsername":"community_93","updateUsername":"","avatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","createTime":"2022-12-01 00:26:57","updateTime":"2022-12-01 00:26:57","lastLoginTime":"2022-12-01 00:26:57"},{"id":null,"communityId":211,"username":"weixin_41960540","userNickname":"R小R","roleCode":2,"status":1,"createUsername":"community_93","updateUsername":"","avatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Faa17748a52c84d88ba031f9895a4ea32_weixin_41960540.jpg!1","createTime":"2022-04-16 21:18:57","updateTime":"2022-04-16 21:18:57","lastLoginTime":"2022-04-16 21:18:57"}],"communityConfig":{"scoreType":0,"scoreItems":{"0":"给本帖投票","1":"锋芒小试,眼前一亮","2":"潜力巨大,未来可期","3":"持续贡献,值得关注","4":"成绩优异,大力学习","5":"贡献巨大,全力支持"}},"shouldApply":false,"subscribeAble":false,"operatorAble":false,"commentNeedJoinCommunity":false},"default2014LiveRoom":[{"itemType":"","description":"高峰论坛","title":"2022 技术英雄会","url":"https:\u002F\u002Flive.csdn.net\u002Froom\u002Fiframe\u002Fcsdnnews\u002FfsNR5NWp?chat=1&title=1&footer=1","images":["https:\u002F\u002Fimg-home.csdnimg.cn\u002Fimages\u002F20221016050009.png"],"ext":{"time":"9:00","liveRoomUrl":"https:\u002F\u002Flive.csdn.net\u002Froom\u002Fcsdnnews\u002FfsNR5NWp"}}]},"isGooglebot":false,"canonical":"https:\u002F\u002Fwww.csdn.net\u002Ftopics\u002F390705916","openUrl":"","isApp":false,"localUrl":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F390705916","typeId":"20680","hasIndex":false},"CFG":{"ALIPLAYER_VERSION":"v4","ALIPLAYER_H5_VERSION":"mobile_v1","ENV":"prod","ROOT_URL":"https:\u002F\u002Fcms-mall.csdn.net\u002F","VUE_APP_API_URL_SERVER":"http:\u002F\u002Fcms-community-api.internal.csdn.net\u002F","VUE_APP_API_URL":"https:\u002F\u002Fcms-api.csdn.net\u002F","LOGIN_URL":"https:\u002F\u002Fpassport.csdn.net\u002Faccount\u002Flogin","VUE_APP_DOMAIN_SKILL":"https:\u002F\u002Fedu.csdn.net\u002F","VUE_APP_DOMAIN_PATH":"https:\u002F\u002Fedu.csdn.net\u002F","VUE_APP_COMMUNITY_API_URL":"https:\u002F\u002Fcommunity-api.csdn.net\u002F","VUE_APP_CCLOUD_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002Fcommunity-cloud\u002Fv1\u002F","VUE_APP_SKILL_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002Fskilltree\u002Fapi\u002F","VUE_APP_SEARCH_PLUGIN_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002Fsearchplugin\u002F","VUE_APP_COMMUNITY_ASK_API_URL":"https:\u002F\u002Fmp-ask.csdn.net\u002F","VUE_APP_ME_URL":"https:\u002F\u002Fme.csdn.net\u002F","VUE_APP_CCLOUD_RESUME":"https:\u002F\u002Fbizapi.csdn.net\u002Fjob-api\u002F","VUE_APP_CCLOUD_MAIN":"https:\u002F\u002Fwww.csdn.net\u002F","VUE_APP_CCLOUD_UC":"https:\u002F\u002Fwww.csdn.net\u002F","VUE_APP_CCLOUD_BZP_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002F","VUE_APP_CCLOUD_START_API_URL":"https:\u002F\u002Fmp-action.csdn.net\u002F","VUE_APP_PRACTIVE":"https:\u002F\u002Fbizapi.csdn.net\u002Fdaily-practice\u002F","VUE_APP_CCLOUD_HOSTPATH":"https:\u002F\u002Fbbs.csdn.net\u002F"},"queries":{"pageId":[],"domain":["ccloud.csdn.net\u002Fccloud\u002Fdetail1"],"id":["390705916"],"deviceType":"pc","isSpider":"","hostname":["bbs.csdn.net"]},"basePath":"bbs.csdn.net\u002Fccloud\u002Ftopics\u002F390705916","hrefUrl":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F390705916","active":0,"navBarFixed":false,"title":"网站如果分为上、左下,和右下三部分,用什么方式做比较好呢?","isLive":false,"contentType":{"text":"text","picture":"picture","link":"link","video":"video","vote":"vote","live":"live","blog":"blog","long_text":"long_text","task_text":"task_text"},"liveUrl":"https:\u002F\u002Flive.csdn.net\u002Froom\u002Fiframe\u002F","spmExtra":{"id":211,"topicId":390705916},"keywords":"","description":"以下内容是CSDN社区关于网站如果分为上、左下,和右下三部分,用什么方式做比较好呢?相关内容,如果想了解更多关于.NET社区社区其他内容,请访问CSDN社区。","mounted":false,"infoNoticeData":{"src":"","href":"","spm":"","delay":5},"showDialogInfoNotice":false}; 可以对比ie7的效果,可以看出里面的div虽然高度设置了100%,但在外面的div修改高度之后,却不知什么原因没有填充了(外面的div渲染后,没有触发里面的div再渲染)。 解决这个bug的关键是使里面的div能再渲染,这里有几个方法可以解决: 1,设置控制层的overflow为hidden,好处是只需要设置一次,但这个样式会影响其他效果,当然在不影响效果的情况下这个是最好的方法; 2,在缩放的时候,通过修改控制层的某些样式,使里面的div再渲染,这样的样式包括zoom,display(应该还有其他吧); 3,在缩放的时候,通过修改插入div的某些样式,使其再渲染,这样的样式包括display(zoom也不行); 程序中是通过修改_layHandle的zoom解决的: if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; }; ps:这个bug的原因貌似跟ie的layout有关,但我查了一下还是没弄清楚,谁有详细的介绍或解析务必跟我分享一下啊。 使用说明 实例化时有个必要参数:容器对象、控制层、图片地址: var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg"); 有以下这些可选参数和属性: 属性:默认值//说明 Opacity: 50,//透明度(0到100) Color: "",//背景色 Width: 0,//图片高度 Height: 0,//图片高度 //缩放触发对象 Resize: false,//是否设置缩放 Right: "",//边缩放对象 Left: "",//左边缩放对象 Up: "",//上边缩放对象 Down: "",//下边缩放对象 RightDown: "",//下缩放对象 LeftDown: "",//左下缩放对象 RightUp: "",//上缩放对象 LeftUp: "",//左上缩放对象 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) //预览对象设置 Preview: "",//预览对象 viewWidth: 0,//预览宽度 viewHeight: 0//预览高度

62,243

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧