`

页面输出时一些常用的小技巧

IECSS浏览器JavaScript框架 
阅读更多

1. 菜单一 | 菜单二 | 菜单三(demo1.zip )

 

代码结构：

Html代码 复制代码
  1. <ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>  
<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>

 通常我们会li加css

Html代码 复制代码
  1. border-right:1px solid #000  
border-right:1px solid #000

 这样最后一个li也有右边框，是多余的，只能为最后一个li添加一个class来区分(左边框的情况类似)

 

 而demo1中我们为li加css

Html代码 复制代码
  1. ul{overflow:hidden;}   
  2. ul li{float:left;list-style-type:none;border-left:1px solid #000;padding:0 20px;margin-left:-1px;}  
ul{overflow:hidden;}
ul li{float:left;list-style-type:none;border-left:1px solid #000;padding:0 20px;margin-left:-1px;}

ul的overflow:hidden和li的margin-left:-1px是为了让最左边li的左边框隐藏起来，这样每个li都可以用一样的样式，便于给li循环

 

2 .压缩图片

通常web页面中从后台传的图片和设计师设计的图片大小不一样，这个时候需要按照原图长宽的比例进行压缩，不能超过设计师设定的图片大小。

initial是原始图片大小;goal是压缩后的图片大小;max是最大值

当原始图片长宽有任意一个大于对应的最大值或者两个都小于最大值时对图片大小进行压缩

其它情况不压缩

 

Js代码 复制代码
  1. function imgSize(element,maxWidth,maxHeight){   
  2.     $(element).each(function() {   
  3.         var initialWidth = $(this).attr("width");   
  4.         var initialHeight = $(this).attr("height");   
  5.         var goalWidth = initialWidth;   
  6.         var goalHeight = initialHeight;   
  7.         if (initialWidth > maxWidth || initialHeight > maxHeight) {   
  8.             if (initialWidth / maxWidth >= initialHeight / maxHeight) {   
  9.                 var goalWidth = maxWidth;   
  10.                 var goalHeight = (initialHeight * maxWidth) / initialWidth;   
  11.             }   
  12.             else {   
  13.                 var goalWidth = (initialWidth * maxHeight) / initialHeight;   
  14.                 var goalHeight = maxHeight;   
  15.             }   
  16.         }   
  17.         else if (initialWidth < maxWidth && initialHeight < maxHeight) {   
  18.             if (initialWidth / maxWidth >= initialHeight / maxHeight) {   
  19.                 var goalWidth = maxWidth;   
  20.                 var goalHeight = (initialHeight * maxWidth) / initialWidth;   
  21.   
  22.             }   
  23.             else {   
  24.                 var goalWidth = (initialWidth * maxHeight) / initialHeight;   
  25.                 var goalHeight = maxHeight;   
  26.             }   
  27.         }   
  28.         $(this).attr("width", goalWidth);   
  29.         $(this).attr("height", goalHeight);   
  30.     });   
  31. }  
function imgSize(element,maxWidth,maxHeight){
    $(element).each(function() {
        var initialWidth = $(this).attr("width");
        var initialHeight = $(this).attr("height");
        var goalWidth = initialWidth;
        var goalHeight = initialHeight;
        if (initialWidth > maxWidth || initialHeight > maxHeight) {
            if (initialWidth / maxWidth >= initialHeight / maxHeight) {
                var goalWidth = maxWidth;
                var goalHeight = (initialHeight * maxWidth) / initialWidth;
            }
            else {
                var goalWidth = (initialWidth * maxHeight) / initialHeight;
                var goalHeight = maxHeight;
            }
        }
        else if (initialWidth < maxWidth && initialHeight < maxHeight) {
            if (initialWidth / maxWidth >= initialHeight / maxHeight) {
                var goalWidth = maxWidth;
                var goalHeight = (initialHeight * maxWidth) / initialWidth;

            }
            else {
                var goalWidth = (initialWidth * maxHeight) / initialHeight;
                var goalHeight = maxHeight;
            }
        }
        $(this).attr("width", goalWidth);
        $(this).attr("height", goalHeight);
    });
}

 

3 .布局

（图一） （图二） （图三）

要实现如图的这种布局，可以用三个并列关系的div加上样式就可以实现

代码结构：

Html代码 复制代码
  1. <div id="first"></div>     
  2. <div id="second"></div>     
  3. <div id="third"></div>   
<div id="first"></div>  
<div id="second"></div>  
<div id="third"></div>

这种代码结构非常灵活，可以仅仅通过样式达到多种布局效果

 

图一(demo3.1.zip)的css：

Html代码 复制代码
  1. <style type="text/css">  
  2.     body{margin:10px;padding:0;}   
  3.     div{background:#ccc;}      
  4.     #first{float:left;width:100px; height:150px}      
  5.     #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}     
  6.     #third{margin-left:110px;_margin-left:107px; height:310px}   
  7. </style>  
  8. /*_margin-left:107px;为了ie6多出的3像素而写的hack*/   
<style type="text/css">
	body{margin:10px;padding:0;}
	div{background:#ccc;}   
	#first{float:left;width:100px; height:150px}   
	#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}  
	#third{margin-left:110px;_margin-left:107px; height:310px}
</style>
/*_margin-left:107px;为了ie6多出的3像素而写的hack*/

图二(demo3.2.zip)的css

Html代码 复制代码
  1. <style type="text/css">  
  2.     body{margin:10px;padding:0;}   
  3.     div{background:#ccc;}      
  4.     #first{float:left;width:100px; height:300px}      
  5.     #second{float:right;width:100px;height:300px}     
  6.     #third{margin:0 110px;_margin:0 107px; height:300px}   
  7. </style>  
  8. /*_margin:0 107px; 为了ie6多出的3像素而写的hack*/   
<style type="text/css">
	body{margin:10px;padding:0;}
	div{background:#ccc;}   
	#first{float:left;width:100px; height:300px}   
	#second{float:right;width:100px;height:300px}  
	#third{margin:0 110px;_margin:0 107px; height:300px}
</style>
/*_margin:0 107px; 为了ie6多出的3像素而写的hack*/

图三(demo3.3.zip)的css和js，鼠标hover时当前模块放大比例

Html代码 复制代码
  1. <style type="text/css">  
  2.     body{margin:0;padding:0;}   
  3.     div{background:#ccc;position:absolute;}   
  4.     #first{width:100px; height:150px;top:10px;left:10px;}      
  5.     #second{width:100px;height:150px;top:170px;left:10px;}     
  6.     #third{height:310px;top:10px;left:120px;width:200px;}    
  7. </style>  
  8. <script type="text/javascript" language="text/javascript">  
  9.     function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）      
  10.         var obj=document.getElementById(id); // 获取元素对象值    
  11.         var dW=obj.clientWidth; // 获取元素宽度      
  12.         var dH=obj.clientHeight; // 获取元素高度          
  13.         obj.onmouseover=function(){ // 鼠标移入      
  14.             this.style.width=dW*x+"px"; // 横向缩放      
  15.             this.style.height=dH*y+"px"; // 纵向缩放      
  16.             this.style.backgroundColor="#f00"; // 设置调试背景      
  17.             this.style.zIndex=1; // 设置z轴优先      
  18.         }      
  19.         obj.onmouseout=function(){ // 鼠标移出，设回默认值      
  20.             this.style.width="";      
  21.             this.style.height="";      
  22.             this.style.padding="";      
  23.             this.style.backgroundColor="";      
  24.             this.style.zIndex="";      
  25.         }      
  26.     }   
  27. zoom("first",1.25,1.25);   
  28. zoom("second",1.25,1.25);   
  29. zoom("third",1.25,1.25);   
  30. </script>   
<style type="text/css">
	body{margin:0;padding:0;}
	div{background:#ccc;position:absolute;}
	#first{width:100px; height:150px;top:10px;left:10px;}   
	#second{width:100px;height:150px;top:170px;left:10px;}  
	#third{height:310px;top:10px;left:120px;width:200px;} 
</style>
<script type="text/javascript" language="text/javascript">
	function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）   
		var obj=document.getElementById(id); // 获取元素对象值 
		var dW=obj.clientWidth; // 获取元素宽度   
		var dH=obj.clientHeight; // 获取元素高度   	 
		obj.onmouseover=function(){ // 鼠标移入   
			this.style.width=dW*x+"px"; // 横向缩放   
			this.style.height=dH*y+"px"; // 纵向缩放   
			this.style.backgroundColor="#f00"; // 设置调试背景   
			this.style.zIndex=1; // 设置z轴优先   
		}   
		obj.onmouseout=function(){ // 鼠标移出，设回默认值   
			this.style.width="";   
			this.style.height="";   
			this.style.padding="";   
			this.style.backgroundColor="";   
			this.style.zIndex="";   
		}   
	}
zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);
</script>

 

4 .获取浏览器可见区域的宽高，通用方法：

Js代码 复制代码
  1. //以下的方法对于很多浏览器都适用   
  2. function windowHeight() {   
  3.     var windowHeight;//最后传出的值   
  4.     if (self.innerHeight) { // 除了IE以外的浏览器   
  5.         windowHeight = self.innerHeight;   
  6.     }    
  7.     else if (document.documentElement && document.documentElement.clientHeight) { /* IE6 浏览器 */  
  8.         windowHeight = document.documentElement.clientHeight;   
  9.     }    
  10.     else if (document.body) { //其他版本的IE浏览器   
  11.         windowHeight = document.body.clientHeight;   
  12.     }   
  13.     return windowHeight;   
  14. }   
  15.   
  16. function windowWidth() {   
  17.     var windowWidth;//最后传出的值   
  18.     if (self.innerWidth) { // 除了IE以外的浏览器   
  19.         windowWidth = self.innerWidth;   
  20.     }    
  21.     else if (document.documentElement && document.documentElement.clientWidth) { /* IE6 浏览器 */  
  22.         windowWidth = document.documentElement.clientWidth;   
  23.     }    
  24.     else if (document.body) { // 其他版本的IE浏览器   
  25.         windowWidth = document.body.clientWidth;   
  26.     }   
  27.     return windowWidth;   
  28. }  
//以下的方法对于很多浏览器都适用
function windowHeight() {
    var windowHeight;//最后传出的值
    if (self.innerHeight) { // 除了IE以外的浏览器
        windowHeight = self.innerHeight;
    } 
	else if (document.documentElement && document.documentElement.clientHeight) { /* IE6 浏览器 */
        windowHeight = document.documentElement.clientHeight;
    } 
	else if (document.body) { //其他版本的IE浏览器
        windowHeight = document.body.clientHeight;
    }
    return windowHeight;
}

function windowWidth() {
    var windowWidth;//最后传出的值
    if (self.innerWidth) { // 除了IE以外的浏览器
        windowWidth = self.innerWidth;
    } 
	else if (document.documentElement && document.documentElement.clientWidth) { /* IE6 浏览器 */
        windowWidth = document.documentElement.clientWidth;
    } 
	else if (document.body) { // 其他版本的IE浏览器
        windowWidth = document.body.clientWidth;
    }
    return windowWidth;
}

 

5 .淘宝的简易框架(demo5.zip)

偶然的机会看到了淘宝的这个框架，写得很不错，玉伯的css也非常工整

圆角的切图也挺有意思的，值得我去学习效仿。

 

6 .滚动消息(demo6.zip)

上下往返滚动的消息一般常出现在公告栏或者新闻栏，以前比较喜欢用Marquee标签来实现，不过Marquee实现的滚动会有头尾不能连接起来而导致消息栏出现短暂的空白的缺陷，而且w3c也不支持Marquee标签。所以用js来实现更完美一些。

Js代码 复制代码
  1. function scroll(element, delay, speed, lineHeight) {   
  2.     var numpergroup = 5;   
  3.     var slideBox = (typeof element == 'string')?document.getElementById(element):element;   
  4.     var delay = delay||1000;   
  5.     var speed=speed||20;   
  6.     var lineHeight = lineHeight||20;   
  7.     var tid = null, pause = false;   
  8.     var liLength = slideBox.getElementsByTagName('li').length;   
  9.     var lack = numpergroup-liLength%numpergroup;   
  10.     for(i=0;i<lack;i++){   
  11.     slideBox.appendChild(document.createElement("li"));   
  12.     }   
  13.     var start = function() {   
  14.          tid=setInterval(slide, speed);   
  15.     }   
  16.     var slide = function() {   
  17.          if (pause) return;   
  18.          slideBox.scrollTop += 2;   
  19.          if ( slideBox.scrollTop % lineHeight == 0 ) {   
  20.                 clearInterval(tid);   
  21.                 for(i=0;i<numpergroup;i++){   
  22.                     slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);   
  23.                 }   
  24.                 slideBox.scrollTop = 0;   
  25.                 setTimeout(start, delay);   
  26.          }   
  27.     }   
  28.     slideBox.onmouseover=function(){pause=true;}   
  29.     slideBox.onmouseout=function(){pause=false;}   
  30.     setTimeout(start, delay);   
  31. }   
  32. 四个参数分别是:操作对象， 停留时间，相对速度（越小越快）,每次滚动多少(最好和Li的Line-height一致)。  
function scroll(element, delay, speed, lineHeight) {
	var numpergroup = 5;
	var slideBox = (typeof element == 'string')?document.getElementById(element):element;
	var delay = delay||1000;
	var speed=speed||20;
	var lineHeight = lineHeight||20;
	var tid = null, pause = false;
	var liLength = slideBox.getElementsByTagName('li').length;
	var lack = numpergroup-liLength%numpergroup;
	for(i=0;i<lack;i++){
	slideBox.appendChild(document.createElement("li"));
	}
	var start = function() {
		 tid=setInterval(slide, speed);
	}
	var slide = function() {
		 if (pause) return;
		 slideBox.scrollTop += 2;
		 if ( slideBox.scrollTop % lineHeight == 0 ) {
				clearInterval(tid);
				for(i=0;i<numpergroup;i++){
					slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
				}
				slideBox.scrollTop = 0;
				setTimeout(start, delay);
		 }
	}
	slideBox.onmouseover=function(){pause=true;}
	slideBox.onmouseout=function(){pause=false;}
	setTimeout(start, delay);
}
四个参数分别是:操作对象， 停留时间，相对速度（越小越快）,每次滚动多少(最好和Li的Line-height一致)。

 

分享到：
| JQuery操作checkbox、radio等示例收藏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsp 页面上图片分行输出小技巧.docx

    jsp 页面上图片分行输出小技巧.docx

    JSP实用技巧集合，jsp编程的一些小技巧总结

    jsp编程的一些小技巧总结，绝对实用。包括JSP编程中常用的js技术。 1.JSP编程中常用的js技术 2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4. 两级下拉列表框联动菜单? 5. java中如何把一个目录...

    jsp 页面上图片分行输出小技巧

    有时候需要图片分行显示，下面是比较不错的代码。

    jsp页面生成word或excel

    小技巧： 12 2 在客户端输出存在数据库中的word实体 12 四、 控制Word,Excel在浏览器中打开,还是下载 15 五、 用JSP输出Word文档，如何去掉“文件下载”提示？ 15 问题文件源代码： 15 回答： 16 六、 怎么把JSP页面...

    ASP.NET的网页代码模型及生命周期

    在浏览器浏览该页面时，.aspx页面的类实例化并输出到浏览器，反馈给浏览者。ASP.NET单文件页模型运行示例图如图4-3所示。 图4-3 单文件页模型 4.1.3 代码隐藏页模型 代码隐藏页模型与单文件页模型不同的是，代码...

    C#编程经验技巧宝典

    85 &lt;br&gt;0130　复制字符串中指定的字符　85 &lt;br&gt;0131　巧截字符串的数字　86 &lt;br&gt;0132　如何存储变长字符串　86 &lt;br&gt;0133　在进行字符串比较时忽略大小写　87 &lt;br&gt;0134　如何去除字符串尾空格　87 ...

    操作系统安全：lynic系统安全审计报告分析.docx

    小技巧 如果lynis 不是通过带有man 页面的包进行安装的话，可以输入 # man ?lynis 对于那些SHELL终端背景是浅色的某些系统，可以使用 # lynis --nocolors 后者 # lynis --reverse-colors 可以使用-h 选项去显示所有...

    TCPIP高效编程：改善网络程序的44个技巧 PDF中文版带书签-目录

    说明--TCPIP高效编程：改善网络程序...4.11 技巧43：访问RFC编辑者的页面 243 4.12 技巧44：经常访问新闻组 244 附录A 各种UNIX代码 247 附录B 各种Windows代码 250 参考书目 253 索引 257 ======================

    IBM WebSphere Portal门户开发笔记01

    7、搜索跳转页面 14 8、搜索表单的部署 14 9、详细内容页面 14 10、其他组件 14 11、搜索功能会遇到的问题及其解决方案 14 12、搜索过滤 16 13、注意 16 14、WCM高级搜索参数 16 ADVANCED WCM/WEBSPHERE PORTAL ...

    delphi开发的基本流程.doc

    此外，还可以参考一些Delphi的技巧和小窍门，如判断字符串是否包含于另一个字符串、使窗口全屏显示、数字格式化输出等，这些都可以提高编程效率和程序的实用性。 对于想要深入学习Delphi的开发者，还可以参考一些...

    高效能办公必修课：Word图文处理.pdf

    第1篇主要讲解Word 2007功能与应用技巧，主要包括Word 2007的基本操作、编辑文档、格式化文档、图文混排等，如设置字体和段落格式、添加项目符号、插入图片、绘制图形等，还介绍了在Word 2007中插入表格和图表对数据...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例074 控制页面中数据的输出数量 108 实例075 动态改变页面中单元格的背景颜色 109 实例076 屏蔽偶数次的数据输出 110 实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例074 控制页面中数据的输出数量 108 实例075 动态改变页面中单元格的背景颜色 109 实例076 屏蔽偶数次的数据输出 110 实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 ...

    linux与unix shell编程指南.rar

    linux/unix shell编程指南,全面介绍了Linu/unix shell编程的常用知识和技巧，是不可多得的编程宝典。 目 录 译者序 前言 第一部分 shell 第1章 文件安全与权限 1 1.1 文件 1 1.2 文件类型 2 1.3 权限 2 1.4 改变权限...

    Linux与Unix Shell编程指南(PDF格式，共30章)

    本书共分五部分，详细介绍了shell编程技巧，各种UNIX命令及语法，还涉及了UNIX下的文字处理以及少量的系统管理问题。本书内容全面、文字简洁流畅，适合Shell编程人员学习、参考。 目 录 译者序 前言 第一部分 ...

    shell编程和unix命令

    本书共分五部分，详细介绍了shell编程技巧，各种UNIX命令及语法，还涉及了UNIX下的文字处理以及少量的系统管理问题。本书内容全面、文字简洁流畅，适合Shell编程人员学习、参考。 目 录 译者序 前言 第一部分 ...

    Linux shell编程指南

    本书共分五部分，详细介绍了shell编程技巧，各种UNIX命令及语法，还涉及了UNIX下的文字处理以及少量的系统管理问题。本书内容全面、文字简洁流畅，适合Shell编程人员学习、参考。 目 录 译者序 前言 第一部分 ...

Magicbox
Global site tag (gtag.js) - Google Analytics