- 浏览: 327650 次
- 性别:
- 来自: 上海
文章分类
最新评论
1. 菜单一 | 菜单二 | 菜单三(demo1.zip )
代码结构:
<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>
通常我们会li加css
border-right:1px solid #000
这样最后一个li也有右边框,是多余的,只能为最后一个li添加一个class来区分(左边框的情况类似)
而demo1中我们为li加css
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 .压缩图片( demo2.zip )
通常web页面中从后台传的图片和设计师设计的图片大小不一样,这个时候需要按照原图长宽的比例进行压缩,不能超过设计师设定的图片大小。
initial是原始图片大小;goal是压缩后的图片大小;max是最大值
当原始图片长宽有任意一个大于对应的最大值或者两个都小于最大值时对图片大小进行压缩
其它情况不压缩
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); }); }
附件demo2.zip 是一个类似原理的插件:jquery.LoadImage.demo
3 .布局
(图一) (图二) (图三)
要实现如图的这种布局,可以用三个并列关系的div加上样式就可以实现
代码结构:
<div id="first"></div> <div id="second"></div> <div id="third"></div>
这种代码结构非常灵活,可以仅仅通过样式达到多种布局效果
图一(demo3.1.zip)的css:
<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
<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时当前模块放大比例
<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 .获取浏览器可见区域的宽高,通用方法:
//以下的方法对于很多浏览器都适用 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来实现更完美一些。
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一致)。
7. 闪动的消息
<head> <title>闪动的消息</title> <script type="text/javascript"> var styleChangeTimes=0; function changeStyle(id){ obj=document.getElementById(id); styleChangeTimes = styleChangeTimes+1; if((styleChangeTimes%2)==0){obj.style.display="none";} else{obj.style.display="";} window.setTimeout("changeStyle('"+id+"')",200); } </script> </head> <body onload="changeStyle('text')"> <span id="text">您有新的短消息</span> </body>
- demo1.zip (541 Bytes)
- 下载次数: 1481
- demo3.1.zip (523 Bytes)
- 下载次数: 1133
- demo3.2.zip (498 Bytes)
- 下载次数: 1078
- demo3.3.zip (985 Bytes)
- 下载次数: 1130
- demo5.zip (71 KB)
- 下载次数: 1957
- demo6.zip (1 KB)
- 下载次数: 1374
- demo2.zip (22.1 KB)
- 下载次数: 188
评论
这几个都是来自淘宝早期的一些前端技术文章吧?
是最近整理的,有的是自己工作中经常用到的,有的是淘宝比较新的技术文章
呵呵,整理得很不错啊,辛苦
这几个都是来自淘宝早期的一些前端技术文章吧?
发表评论
-
IE各版本的css hack
2012-12-06 14:34 1406一:IE各版本的css hack HACK EX ... -
如何去掉链接虚线框
2011-10-08 13:58 1699链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用 ... -
chrome浏览器font-size<12px无效解决办法
2010-11-30 15:08 3646当样式表里font-size<12px时,chrome浏 ... -
IE下li内元素浮动产生边距的解决办法
2010-07-16 14:25 2624类似于这样的一个结构 <ul> &l ... -
css命名规范
2009-11-07 21:40 1723最近看到了些关于css命名方面的文章,对于这方面我也有自己的看 ... -
图片和文字的对齐
2009-11-07 15:50 10330最近工作中遇到些关于“图片和文字的对齐”的问题: ... -
img标签下多余空白bug解决方法
2009-06-25 13:56 2242根据原因的不同要用不 ... -
命名规则有利于SEO
2009-05-11 13:21 1293搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很 ... -
button按钮在 IE 中两边被拉伸的解决办法
2009-03-07 18:40 1817大家在写按钮(input (type="button ... -
用div+css模拟表格对角线
2009-02-09 10:59 2189在蓝色理想 上看到一篇用css写的对角线,觉得很有用。 把 ... -
IE6下兼容position:fixed的问题
2009-01-15 17:23 3479做网页时经常会有让某 ... -
[译文]On having layout
2008-12-30 20:44 1982介绍 Internet Explorer 中有很多奇怪的渲染 ... -
css实现垂直居中
2008-12-15 13:53 1429如果是用table写的表格,那么用vertical-align ... -
文本溢出时显示省略标记
2008-11-21 17:55 3538语法:text-overflow : clip | e ... -
是时候不用考虑基于字体大小(em)的设计了
2008-11-01 00:22 1687一篇不错的文章,转自 ... -
网页的栅格系统设计
2008-10-30 21:31 1335栅格系统的形成 1692年,新登基的法国国王路易十四 ... -
CSS滤镜
2008-10-24 14:44 1247下面是一些滤镜的描述, ... -
网站灰黑色CSS滤镜代码
2008-10-24 10:32 1787html { filter:progid:DXImageTra ... -
IE6默认不缓存背景图片,引起鼠标抖动的解决方法
2008-10-09 13:51 3789在IE6下,如果拖动的DOM元素使用了背景图,在Drag的过程 ... -
ink和@import引用css文件方法的区别
2008-09-17 18:11 3303<link> 元素所参考的样式用户可以自由的选择 ...
相关推荐
JSP 页面图片分行输出小技巧 JSP(Java Server Pages)是一种广泛应用于 Web 开发的技术,它允许开发者在 HTML 文档中嵌入 Java 代码,以生成动态的 Web 内容。今天,我们来讨论如何在 JSP 页面上实现图片的分行...
总之,PHP页面输出优化是一个多方面的任务,涉及前端资源管理、服务器端代码优化、SEO策略和爬虫友好性。通过合理运用上述技巧,我们可以显著提升网站的性能和用户体验,同时提高在搜索引擎中的可见度。提供的代码...
#### 一、MapGIS页面输出基础概念 MapGIS是一款专业的地理信息系统软件,广泛应用于地图制作、空间数据分析等领域。在MapGIS中,“页面输出”是指将地图或其他矢量图形以特定格式输出到纸质媒介或电子文件的过程。...
jsp编程的一些小技巧总结,绝对实用。包括JSP编程中常用的js技术。 1.JSP编程中常用的js技术 2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4. 两级下拉列表框联动菜单? 5. java中如何把一个目录...
在进行毕业设计时,Proteus 是一个常用的电路仿真软件,尤其对于电子工程专业的学生来说。但是,Proteus 原理图的标题栏可能不符合标准图纸的要求,需要进行调整。以下是一些关于如何使用Proteus和相关工具进行图纸...
### JavaScript常用小技巧详解 #### 1. `document.write("")` 输出语句 `document.write()` 是一个在页面上直接写入HTML、JavaScript代码或文本的简单方法。它常用于测试或快速输出结果到页面中,但不推荐用于动态...
### jsp 页面上图片分行输出小技巧 在Web开发中,特别是使用JSP(JavaServer Pages)技术进行页面渲染时,经常会遇到需要将一组图片按照特定格式排列的需求,比如按行展示图片。本文将详细介绍一个实用的小技巧,...
为了解决这些问题,文章中提供了一些实用的技巧。 1. **字体不匹配和乱码的解决方法** - **块内文字调整**:在早期版本中,CAD不支持在块中修改文字属性。升级至2002版本后,可以更改块内子块的属性来解决问题。 ...
LRU(Least Recently Used,最近最少使用)页面置换算法是一种常用的内存管理策略,它用于解决在有限的物理内存中管理大量虚拟内存页的问题。当内存不足时,LRU算法会淘汰那些最近最少使用的页面,以腾出空间供新...
在IT行业中,Java Server Pages...以上只列举了"JSP编程小技巧集锦121"中的一部分要点,实际内容可能包括更多实用技巧,如优化性能、安全实践、调试技巧等。学习并掌握这些知识点,将有助于开发者在JSP开发中游刃有余。
这个“ASP.NET小技巧”压缩包似乎包含了一些实用的工具和数据,帮助开发者更高效地利用ASP.NET进行编程。下面将详细讨论ASP.NET的一些核心概念和常见技巧。 1. **页面生命周期理解**:在ASP.NET中,每个网页都有一...
以下是一些关于JS的实用小技巧,对于初学者来说,掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`:这是一个常用的输出语句,常用于在页面加载时动态插入HTML内容。 2. 注释:JS支持单行...
### Ajax的一些有用的小技巧 #### 使用JavaScript库提升开发效率 在使用Ajax进行Web开发时,开发者往往会遇到诸如浏览器兼容性、编码问题等挑战。为了更好地应对这些难题,使用现成的JavaScript库是一种高效的解决...
在PHP网站开发中,掌握一些实用的小技巧可以显著提高开发效率和代码质量。以下是对给定文件中提到的8个PHP开发小技巧的详细说明: 1. **PHP批量获取Checkbox的值**: 当需要处理多个Checkbox并将其值用于SQL查询时...
在JSP(JavaServer Pages)编程中,开发者经常会遇到各种挑战,掌握一些实用的小技巧能够极大地提高开发效率和代码质量。以下是一些精选的JSP编程小技巧集锦,涵盖了从基本语法到优化实践的多个方面。 1. **使用EL...
从AutoCAD2000版本开始,软件增加了布局功能,这一变化极大地增强了页面设置与打印输出的能力,为设计输出提供了一体化的解决方案,提升了工作效率。 在传统的设计绘图中,学生通过使用图板和丁字尺等工具,逐步...
在PHP动态网站开发中,掌握一些实用的小技巧可以极大地提高开发效率和代码质量。以下将详细探讨几个在实际开发中常见的技巧。 1. **错误处理与日志记录** 在PHP开发过程中,良好的错误处理机制至关重要。使用`try-...
【JSP(Java Server Pages)200小技巧】是一个集合了众多实用技巧的资源包,旨在帮助开发者更高效地利用JSP进行Web应用开发。JSP是Java平台上的一个服务器端技术,它允许开发者使用HTML或者XML语法来嵌入Java代码,...
Excel表格是数据分析和处理的重要工具,掌握其常用操作能极大地提高...以上是Excel表格一些常用操作的关键点,熟练掌握这些技巧,能够使你在处理数据时更加得心应手。记得不断实践和探索,Excel的强大功能远不止于此。
在这个软件中,有一些小技巧可以提高效率,特别是在处理PLC输入输出图时。 1. **PLC输入输出图绘制技巧**: - 在项目数据中设置PLC型号和编制类型,例如设置为西门子200系列。一旦首次配置好一个输入模块,如I0.0~...