存档

文章标签 ‘html’

javascript 获取滚动条高度+常用js页面宽度与高度[转]

2010年5月20日
没有评论

/********************
* 取窗口滚动条高度
******************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
/********************
* 取窗口可视范围的高度
*******************/
function getClientHeight()
{
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
////////////////////////////////////////////////////
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在 Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> [...]

作者: shooting 分类: 学习笔记 标签: ,

关于css 绝对/相对定位 absolute与relative

2009年12月2日
1 条评论

一个朋友问过我css的定位属性中，absolute与relative到底有什么区别？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？但是他们绝对和相对又是参照什么基点来的呢？
position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT是个属性(简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为基点(注意，仅仅是父级，而不是祖父级、曾祖父级。。)，如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角作为基点参照TRBL属性进行定位，此时对象不再具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，此时对象不可层叠，即设置z-index属性无用。

作者: shooting 分类: 学习笔记 标签: ,

div+css 图片垂直居中解决办法

2009年9月27日
没有评论

一个简单的问题实现在div+css中实现起来可没有那么轻松，参考网上找到的一些资料，找到了一个相对比较简单，而且效果还不错的方案，如下：
html结构很简单如下
<div class=”img_wrap”><img src =”http://www.baidu.com/img/baidu_logo.gif” /></div>
css样式
.img_wrap{/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 131px;/*约为高度的0.873，150*0.873 约为131*/
width:150px;
height:150px;
border: 1px solid #ccc;}
.img_wrap img{vertical-align:middle;}

作者: shooting 分类: 全部文章, 学习笔记 标签: , ,

javascript 图片loading的实现

2009年9月8日
2 条评论

我们在设计一些图片比较多的网页时，为了增强用户体验，希望图片加载的时候有个loading动画效果，而不是由空白到一下子出来。在zen cart的二次开发过程中同样也遇到了这个问题，下面是我的解决方案。
首页给图片设置一个默认的loading动画，再分配一个id，如<img  id=”loading1″  src=”loading.gif”>实际上加载过程通过一个函数来完成
function addListener(element, type, expression, bubbling)
{
bubbling = bubbling || false;
if(window.addEventListener)    { // Standard
element.addEventListener(type, expression, bubbling);
return true;
} else if(window.attachEvent) { // IE
element.attachEvent(‘on’ + type, expression);
return true;
} else return false;
}

var ImageLoader = function(url){
this.url = url;
this.image = null;
this.loadEvent = null;
};

ImageLoader.prototype = {
load:function(){
this.image = document.createElement(‘img’);
var url = this.url;
var image = this.image;
var loadEvent = this.loadEvent;
addListener(this.image, ‘load’, function(e){
if(loadEvent != [...]

作者: shooting 分类: zencart项目, 全部文章, 学习笔记 标签: , , ,

firefox 下<dt>标签与<h1>系列标签的问题

2009年8月5日
没有评论

最近调页面的时候遇到个问题.
IE，CHROME下显示很正常，但不管怎么调整在firefox下显示，<h2>标签内容都显示到<dt>标签外
最后发现原因如下：是在firefox下<dt>标签里不能加其它的标签h系列标签，dt已经有标题的意思了，没必要再加h1，dt内不能嵌套块级元素。

作者: shooting 分类: 全部文章, 学习笔记 标签: , ,

一个好用的javascript日历-spiffyCal

2009年7月16日
没有评论

在做zencart二次开发的时候发现的一个javascript，特收藏一下
使用代码很简单
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Calendar</title>
<link rel=”stylesheet” type=”text/css” href=”spiffyCal/spiffyCal_v2_1.css”>
<script type=”text/javascript” src=”spiffyCal/spiffyCal_v2_1.js”></script>
<script type=”text/javascript”>
var dateAvailable = new ctlSpiffyCalendarBox(“dateAvailable”, “new_product”, “products_date_available”,”btnDate1″,””);
</script>
</head>
<body>
<div id=”spiffycalendar” class=”text”></div>
<form name=”new_product”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”4″>
<tr class=”dataTableRow”>
<td align=”right”>上架日期：<br /><small>(YYYY-MM-DD)</small></td>
<td align=”left”>&nbsp;<script type=”text/javascript”>dateAvailable.writeControl(); dateAvailable.dateFormat=”yyyy-MM-dd”;</script> </td>
</tr>
</table>
</form>
</body>
</html>
spiffyCal.zip下载

作者: shooting 分类: 全部文章, 学习笔记 标签: , , ,

有关javascript 的onmouseout事件

2009年5月22日
没有评论

相信很多人都碰到过，以前我也碰到过，那是为了做一个弹出菜单，最后还是用css搞定的。就那天又碰到同样的问题，找了半天资料，终于知道了究竟。
文档中onmouseout事件的定义是

onmouseout 事件会在鼠标指针移出指定的对象时发生。

支持改时间的html标签也很多有
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
可是什么叫onmouseout到底在什么情况下被出发呢？举个简单的例子：
<div onmouseout=”javascript:this.style.display=’none’” style=”width:500px;height:300px;background-color:#ccc;”><a href=”#”>test</a></div>
可以做个小实验，可以发现，鼠标移出div时却是触发了onmouseout事件，div被隐藏了，可是在div内部，当鼠标移动到test的链接上时，div却也被隐藏了，相信原因很明了，即使在div内部，当鼠标进入其内部的对象时，也会触发div的onmouseout事件，再做个试验，把test的链接去掉，也就是div内部只剩下纯文本，这是鼠标移到文字上，没有反应。。。
解决办法：很简单，给div再加个事件onmouseover，因为鼠标在进入子对象同时也会触发div的onmouseover事件，上面的例子改为这样就可以解决问题：
<div [...]

作者: shooting 分类: 全部文章, 学习笔记 标签: ,

flash遮盖html层菜单的解决方案

2009年4月11日
没有评论

下拉菜单被flash或其他层遮住始终是个问题，相信很多人都遇到过这个问题。但这个问题其实可以说是我们自己造成的，因为我们总是不明不白的就把那写属性写或粘贴上去。下面我们来分析一下原因：
wmode 属性/参数值 Window | Opaque | Transparent
模板变量：$WM
“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。”Window”表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。
“Transparent”使HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
“Opaque windowless”和”Transparent windowless”都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于”Transparent”允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的HTML 层可以透过该部分显示出来，而”opaque”则不会显示。
如果忽略此属性，默认值为 Window。仅适用于object。
Window速度快、有效率，但无法使用z-index，也没有办法混用于DHTML图层当中，这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。
Opaque除了可以让你正确控制z-index的样式，也可以透过Javascript來控制它的大小或是移动swf的位置！不过要注意，Opaque的背景可是没有办法透明的，也就是说，任何內容都会被放在swf下面。
至于Transparent，想当然，就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底，不过，transparent在IE里面是真的透明，也就是说，下面的网页內容是可以被选取起來的，但是在FF里面，就很讨厌了，因为虽然看起來透明，但是滑鼠卻无法点选。另外，要稍微注意的是，使用这个值，会让你的flash影片变得比较慢！
找到原因了我们就来解决问题：
一、设置flash为透明：但是如果你在DW中插入动画，再加<param name=”wmode” value=”transparent”>是不生效的。要把整个的flash插件代码换成如下：
<object type=”application/x-shockwave-flash” data=”/images/banner.swf” width=”553″ height=”185″>
<param name=”movie” value=”/images/banner.swf” />
<param name=”wmode” value=”transparent” />
</object>
对比一下，和DW自动生成的代码是有区别的，测试过，IE　FF　均可以。
二、设置flash置底，加个代码：<param name=”wmode” value=”opaque” />但是只加这个代码，IE可行，在FF下，失效。要想在FF下起作用，还要用在object　里加个　wmode=”opaque” ，实例代码如下：
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”553″ height=”185″>
<param name=”movie” value=”/images/banner.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”opaque”>
<embed [...]

作者: shooting 分类: 全部文章, 学习笔记 标签: , ,

javascript给html对象绑定一个带参数的方法

2008年11月22日
没有评论

javascript中经常会碰到动态为html对象注册事件的问题，比如一个简单的例子：

function clickevent()
{
alert(“my message!”);
}

object.onclick=clickevent(msg)其实注册事件时赋值符号(=)后应该是函数的引用，也就是函数名，所以只能用object.onclick=clickevent 可是如果要想这个事件驱动的函数带上参数怎么办呢，这时候可以再创建一个无参数的新函数，新函数中执行带参数的函数就行了，很简单如下
object.onclick=function(){clickevent(msg);} 就可以了。
也可以定义一个函数
function cleckevent2()
{
return function(){alert(msg);}
}
object.onclick=clickevent2
其实原理还是一样的。

作者: shooting 分类: 全部文章, 学习笔记 标签: ,

QQ空间花之神匠破解新代码:7个人参果

2007年12月13日
没有评论

QQ空间是腾讯用户最热衷的服务之一。众所周知，QQ空间里的5级的花是最漂亮的，但是需要你是QQ黄钻或者Q币。最近在网上找到了最新的花之神匠破解代码，和大家一起分享。
其实方法很简单：
地址栏中运行代码【javascript:window.top.space_addItem(7,20981,0,0,0,1,0);】
　　1.首先自己进入空间，将代码复制并粘贴到地址栏里。
　　

复制代码

　　2.按回车键，页面刷新，你所要更换的植物就已经刷新了。
　　3.单击自定义，再单击保存，就完成了。
　　

保存设置

　　接下来就能看见最终的效果了：
　　

最终效果

　　怎么样，还算简单吧。如果无法正常使用，你不妨可以多试几次。笔者用的是QQ空间的最新版本，如果朋友们的空间版本太低有可能不会出现。希望自己的QQ空间长出美丽的花园的朋友抓紧时间尝试一下了，腾讯估计很快就会修复这个 bug了！

作者: shooting 分类: 全部文章, 经典网摘 标签: