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

davice_li

浏览: 93755 次
性别:
来自: 北京

最近访客更多访客>>

wang1985886

ChaoWuZhang

same-ww

18565628432

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JavaScript

IE CSS 浏览器 JavaScript HTML

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

代码结构：

Html代码

<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>

Html代码

<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>

<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>

通常我们会li加css

Html代码

border-right:1px solid #000

Html代码

border-right:1px solid #000

border-right:1px solid #000

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

而demo1中我们为li加css

Html代码

ul{overflow:hidden;}
ul li{float:left;list-style-type:none;border-left:1px solid #000;padding:0 20px;margin-left:-1px;}

Html代码

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;}
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代码

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);
});
}

Js代码

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);
});
}

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代码

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

Html代码

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

<div id="first"></div>  
<div id="second"></div>  
<div id="third"></div>

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

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

Html代码

<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*/

Html代码

<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*/

<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代码

<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*/

Html代码

<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*/

<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代码

<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>

Html代码

<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>

<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代码

//以下的方法对于很多浏览器都适用
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;
}

Js代码

//以下的方法对于很多浏览器都适用
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;
}

//以下的方法对于很多浏览器都适用
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代码

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"));
}
<span st

分享到：

两个js文件之间函数互相调用 | 完美的js验证url（jackey正则表达式）

2010-10-09 11:17

浏览 866

评论(0)

分类:Web前端

查看更多

评论

发表评论

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

相关推荐

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

JSP 页面图片分行输出小技巧 JSP（Java Server Pages）是一种广泛应用于 Web 开发的技术，它允许开发者在 HTML 文档中嵌入 Java 代码，以生成动态的 Web 内容。今天，我们来讨论如何在 JSP 页面上实现图片的分行...

php优化页面输出实例

在PHP开发中，优化页面输出是提升网站性能和用户体验的关键环节。这涉及到多个方面，包括减少HTTP请求、压缩代码、缓存利用、正确设置字符集和头部信息等。本实例将探讨如何通过PHP实现这些优化策略，同时确保对搜索...

mapgis页面输出

#### 四、页面输出后的处理技巧 1. **页面输出后在PS中的处理**：在某些情况下，为了确保地图与其他地图正确对齐，需要在Photoshop (PS) 中进行进一步的处理。例如，如果MapGIS中的输出分辨率为250dpi，可以通过...

107条javascript常用小技巧[推荐]

### JavaScript常用小技巧详解 #### 1. `document.write("")` 输出语句 `document.write()` 是一个在页面上直接写入HTML、JavaScript代码或文本的简单方法。它常用于测试或快速输出结果到页面中，但不推荐用于动态...

用Proteus做毕业设计提交时打印图纸的一些小技巧

在进行毕业设计时，Proteus 是一个常用的电路仿真软件，尤其对于电子工程专业的学生来说。但是，Proteus 原理图的标题栏可能不符合标准图纸的要求，需要进行调整。以下是一些关于如何使用Proteus和相关工具进行图纸...

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

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

关于CAD中几个常用的小技巧.pdf

为了解决这些问题，文章中提供了一些实用的技巧。 1. **字体不匹配和乱码的解决方法** - **块内文字调整**：在早期版本中，CAD不支持在块中修改文字属性。升级至2002版本后，可以更改块内子块的属性来解决问题。 ...

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

### jsp 页面上图片分行输出小技巧在Web开发中，特别是使用JSP（JavaServer Pages）技术进行页面渲染时，经常会遇到需要将一组图片按照特定格式排列的需求，比如按行展示图片。本文将详细介绍一个实用的小技巧，...

JSP编程小技巧集锦121

本篇将详细讲解"JSP编程小技巧集锦121"中的核心知识点，帮助开发者提升效率，优化代码。 1. **使用EL表达式（Expression Language）**：EL简化了从作用域内获取对象的复杂性。例如 `${variable}` 可以直接获取到...

LRU页面置换算法

LRU（Least Recently Used，最近最少使用）页面置换算法是一种常用的内存管理策略，它用于解决在有限的物理内存中管理大量虚拟内存页的问题。当内存不足时，LRU算法会淘汰那些最近最少使用的页面，以腾出空间供新...

ASP.net小技巧

这个“ASP.NET小技巧”压缩包似乎包含了一些实用的工具和数据，帮助开发者更高效地利用ASP.NET进行编程。下面将详细讨论ASP.NET的一些核心概念和常见技巧。 1. **页面生命周期理解**：在ASP.NET中，每个网页都有一...

js中的小技巧，十分的实用

以下是一些关于JS的实用小技巧，对于初学者来说，掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`：这是一个常用的输出语句，常用于在页面加载时动态插入HTML内容。 2. 注释：JS支持单行...

JSP编程小技巧集锦

在JSP（JavaServer Pages）编程中，开发者经常会遇到各种挑战，掌握一些实用的小技巧能够极大地提高开发效率和代码质量。以下是一些精选的JSP编程小技巧集锦，涵盖了从基本语法到优化实践的多个方面。 1. **使用EL...

PHP网站开发中常用的8个小技巧_.docx

在PHP网站开发中，掌握一些实用的小技巧可以显著提高开发效率和代码质量。以下是对给定文件中提到的8个PHP开发小技巧的详细说明： 1. **PHP批量获取Checkbox的值**：当需要处理多个Checkbox并将其值用于SQL查询时...

PHP动态网站开发中常用的几个小技巧.pdf

在PHP动态网站开发中，掌握一些实用的小技巧可以极大地提高开发效率和代码质量。以下将详细探讨几个在实际开发中常见的技巧。 1. **错误处理与日志记录** 在PHP开发过程中，良好的错误处理机制至关重要。使用`try-...

Ajax的一些有用的小技巧.pdf

### Ajax的一些有用的小技巧 #### 使用JavaScript库提升开发效率在使用Ajax进行Web开发时，开发者往往会遇到诸如浏览器兼容性、编码问题等挑战。为了更好地应对这些难题，使用现成的JavaScript库是一种高效的解决...

javascript小技巧-js小技巧收集.doc

以下是一些JavaScript的基本小技巧和知识点： 1. **输出语句**：`document.write("")` 可用于在HTML文档中输出内容，但在页面加载完成后使用可能会覆盖已有的HTML。 2. **注释**：在JavaScript中，单行注释使用 `/...

eplan p8小技巧

在这个软件中，有一些小技巧可以提高效率，特别是在处理PLC输入输出图时。 1. **PLC输入输出图绘制技巧**： - 在项目数据中设置PLC型号和编制类型，例如设置为西门子200系列。一旦首次配置好一个输入模块，如I0.0~...

Excel表格一些常用操作完整版资料.ppt

Excel表格是数据分析和处理的重要工具，掌握其常用操作能极大地提高...以上是Excel表格一些常用操作的关键点，熟练掌握这些技巧，能够使你在处理数据时更加得心应手。记得不断实践和探索，Excel的强大功能远不止于此。

利用AutoCAD的布局设计输出图纸的技巧.pdf

布局是模拟图纸页面的环境，它设定了视口并确定了输出时的页面设置，为打印提供了直观的设置界面。在布局中，设计者可以按1:1的比例直接出图，避免了因配置不当导致的比例错误。此外，布局允许在一个图形文件中设定...

引用百度地图JS脚本
2011-05-26 10:08 2687

<!DOCTYPE HTML PUBLIC " ...

js页面跳转方法大全(转)
2011-01-14 08:27 1256

js页面跳转方法大全自己的：function toUrl(ul ...

Javascript正则表达式笔记(修正版)
2010-12-28 18:20 748

^ The caret (^) tel ...

javascript常用函数大全2
2010-10-09 11:50 980

JavaScript就这么回事1：基础知识创建 ...

js函数集合大全1
2010-10-09 11:29 841

4.格式化字符串变量 <script> ...

利用js给select添加option并选中该option
2010-10-09 11:22 1166

<script> function addOpt ...

两个js文件之间函数互相调用
2010-10-09 11:19 1668

这里是解决方案，把下面的代码保存为同一目录下a.htm, ...

完美的js验证url（jackey正则表达式）
2010-10-09 11:13 1052

它验证的情况包括：IP，域名（domain），ftp 二级域 ...

js函数小集
2010-10-09 11:07 757

js表单函数小集 <script language ...

网页特效收集
2010-10-09 09:40 775

1. oncontextmenu="window.e ...

js二维数组遍历,select选中状态，设置input默认值
2010-10-08 17:19 1968

//方案3.2恢复默认值 var array32=new ...

js三维数组定义和使用。
2010-10-08 17:15 5836

<script type="text/java ...

CSS实现描边效果
2010-10-08 15:02 1443

方法1.<span style="positi ...

JS 内存溢出，调试工具介绍
2010-06-07 11:30 1450

javascript内存泄露的问题 ...

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

引用百度地图JS脚本

js页面跳转方法大全(转)

Javascript正则表达式笔记(修正版)

javascript常用函数大全2

js函数集合大全1

利用js给select添加option并选中该option

两个js文件之间函数互相调用

完美的js验证url（jackey正则表达式）

js函数小集

网页特效收集

js二维数组遍历,select选中状态，设置input默认值

js三维数组定义和使用。

CSS实现描边效果

JS 内存溢出，调试工具介绍

最近访客更多访客>>