记录生活点滴.
2011-09-29JS+DIV+CSS

没有评论
118 views

js获取url参数值

用JAVASCRIPT获取URL参数请求

function getQueryString(name) {
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

调用方法如下：

alert(getQueryString(‘参数名’));

Popularity: 1%

2011-09-20jQuery+JSON,JS+DIV+CSS

没有评论
214 views

jquery html body下追加内容

最近有个项目要用到IE6下提示内容，但是HTML之前已经写好了，所以只能用JQUERY追加内容的方法去做，代码如下：

if($.browser.msie && parseInt($.browser.version)==6) {
$(document.).(‘<><>请您更新浏览器IE浏览器！</></>’);
}

Popularity: 8%

2011-09-11JS+DIV+CSS

没有评论
166 views

DIV 点击之后出现框

最近写了一个DIV滚动下拉，但是在ie中是虚线框，chrome中是浅橙色框，firefox中式浅蓝色框，如下图所示：

chrome下选中DIV出现橙色框

由于觉得这样影响美观就找到方法去除，解决办法就是在容器里面加一句CSS：

.jScrollPaneContainer { outline: none;}

Popularity: 1%

2011-08-15JS+DIV+CSS

没有评论
253 views

去掉iframe横向滚动条_iframe滚动条

子页面
‘让竖条消失:
< STYLE=’:;-Y:HIDDEN’>
</BODY>
‘让横条消失:
<BODY STYLE=’OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN’>
</BODY>

‘还要去掉
‘子页面里的
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
‘两个都去掉

Popularity: 1%

2011-08-07JS+DIV+CSS

没有评论
232 views

如何让DIV超过预定高度自动出现滚动下拉条

如何让DIV超过预定高度自动出现滚动下拉条呢？
其实很简单，如:
< style=”width:500px;height:100px;float:left; :auto;”>
fdsfdsfsfdsfgfhfdhgfdhgfhfdhfghfdhfd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
只要DIV的高度一定时,这里要给定高度，加上overflow:auto这个属性便可以让DIV在超过定义的高度时出现滚动下拉条。

Popularity: 2%

2011-07-28jQuery+JSON,JS+DIV+CSS

没有评论
377 views

jQuery Lightbox By Group 图片分组

的lightbox插件图片分组，baidu不到，这里给出实例

html:

<>
<div>Details here</div>
<div id=”tour--images-1″>
<a href=”/images/pic1.jpg”><img src=”/images/pic1.jpg” /></a>
<a href=”/images/pic2.jpg”><img src=”/images/pic2.jpg” /></a>
<a href=”/images/pic3.jpg”><img src=”/images/pic3.jpg” /></a>
</div>
</div>

<div>
<div>Details 2 here</div>
<div id=”tour-lightbox-images-2″>
<a href=”/images/pic4.jpg”><img src=”/images/pic4.jpg” /></a>
</div>
</div>

<div>
<div>Details 3 here</div>
<div id=”tour-lightbox-images-3″>
<a href=”/images/pic5.jpg”><img src=”/images/pic5.jpg” /></a>
<a href=”/images/pic6.jpg”><img src=”/images/pic6.jpg” /></a>
<a href=”/images/pic7.jpg”><img src=”/images/pic7.jpg” /></a>
<a href=”/images/pic8.jpg”><img src=”/images/pic8.jpg” /></a>
<a href=”/images/pic.9jpg”><img src=”/images/pic8.jpg” /></a>
</div>
</div>

:

$(function() {
$(“div.tour-lightbox-images”).each(function(){
$(“#” + this.id + ” a”).lightBox({
imageLoading: “/images/lightbox-ico-loading.gif”,
imageBtnClose: “/images/lightbox-btn-close.gif”,
imageBtnPrev: “‘/images/lightbox-btn-prev.gif”,
imageBtnNext: “/images/lightbox-btn-next.gif”,
imageBlank: “/images/lightbox-blank.gif”
});
});
});

Popularity: 12%

2011-07-23jQuery+JSON,JS+DIV+CSS

没有评论
430 views

jQuery DIV遮罩层

非常简单的jQuery DIV遮罩层，点击查看DEMO

代码如下所示：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> 的DIV遮罩层示例</title>
<script type=’text/’ src=’http://code.jquery.com/jquery-latest.js’></script>
<style>
.targetDiv{display:none;}
.txt{ border:solid 20px #000000; width:400px; height:400px; margin:100px auto auto 400px; color:#fff;}
.cbtn{margin-top:-20px; text-align:right; margin-right:-20px;}
.txt a{text-decoration:none; color:#fff;}
</style>
<script>
$(document).ready(function(){
$(‘.main a’).click(function(){
$(this).parent().find(‘.targetDiv’).({ “position”: “absolute”, “text-align”: “center”, “top”: “0px”, “left”: “0px”,”background”: “#555″, “display”: “block”,’width’:’100%’,'height’:$(document).height(), “filter”: “Alpha(opacity=80)”,’opacity’:’0.8′});
});
$(‘.targetDiv,.cbtn a’).click(function(){
$(this).parent().find(‘.targetDiv’).css(‘display’,'none’);
});
});
</script>
</head>

<>
<>
<a href=”#”>点我显示jQuery的DIV遮罩层 http://jerryji.cn</a>
<div>
<div>
<div><a href=”#”>关闭 Close</a></div>
<p>这里是正文内容 <a href=”http://jerryji.cn”>http://jerryji.cn</a></p>

</div>
</div>
</div>
<p>By Jerry Jee</p>
<p><a href=”http://jerryji.cn”>http://jerryji.cn</a></p>
</body>
</html>

Popularity: 12%

2011-07-08html5,JS+DIV+CSS

没有评论
309 views

10个让人眼花缭乱的HTML5和JavaScript效果

作为下一代网页语言， 拥有很多让人期待已久的新特性。如今，很多 Web 开发人员开始使用 来制作各种丰富的 Web 应用。本文向大家展示10个让人眼花缭乱的 和 效果，让你体验下一代 Web 技术的魅力，相信你看完这些例子后会对未来的 Web 发展充满无限期待。

Breathing Galaxies

Breathing Galaxies

动态变换颜色和直径，可通过键盘或者鼠标产生新的形状，这个效果很炫很炫！

FlowerPower

FlowerPower

灵感来自大自然的使用，使用花朵作为画刷，以贝兹曲线方式绘图。

Noise Field

Noise Field

移动鼠标可改变粒子的运动，点击可随机生成不同的粒子效果。

Keylight

Keylight

双击生成两个以后的键即可发出声音，移动键的位置可产生不同的声音效果。

Swirling Tentacles

Swirling Tentacles

三维脉冲效果，沿着脉冲线有运动的颜色渐变模块。

Blob

Blob

拖动水滴有重力效果，双击可以分离，小水滴碰到大水滴会合并。

Rotating Spiral

Rotating Spiral

旋转的螺旋效果，看得有点头晕，单击可以控制开始和停止旋转。

Magnetic

Magnetic

模拟磁性粒子流效果，非常逼真。

Trail

Trail

彩色颗粒跟随鼠标运动效果，带尾巴淡出效果。

Graph Layout

Graph Layout

一种交互的力向图布局效果。

Popularity: 3%

2011-05-04JS+DIV+CSS,网页前端

没有评论
401 views

javascript 关闭错误提示

<script type=”text/”>
window.onerror = function(){
return true;
}
</script>

Popularity: 1%

2011-04-27JS+DIV+CSS,网页前端

没有评论
356 views

CSS z-index浮动层

大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈 现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。

Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混 乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，你会发现它却是一个非常容易使用的属性，并且会为解决很多layout方面 的挑战提供强有力的帮助。

在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使 用中的问题。我们同时会描述一些会遇到的浏览器间的差异，那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全 透视文章将会为那些有着良好基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。

这是什么？

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而 言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

为了更清晰的描述Z-index是如何工作的，上面的这张图片夸大展示了层叠元素在视觉位置上的关系。

自然的层叠顺序

在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境 （stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋 予Z-index属性。

元素的背景和边框会创建一个stacking context

引用:
·具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
·没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
·没 有被定位，浮动的元素，按照出现的先后顺序排列
·内联元素，按照出现的先后顺序排列排列
·被定位的元素，按照出现的先后顺序排列

属性，当被正确使用的时候，会改变自然的层叠顺序。

当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺 序。

上面的BOX被定义了不同的背景和边框色，并且后两个是交错的并且定义了负值的顶部边距，所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位 于第一位，蓝色的BOX位于第二位，金色的排在第三。应用的负边距明确的表明这个事实：这些元素未被设置Z-index 属性；它们的层叠顺序是自然的，或者是默认的，复合规则的。产生交错的现象都是因为负值的边距。

为什么它会产生混乱？

即使Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作 在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。

为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。

灰色的BOX具有“9999”的Z-index值，蓝色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎逻辑的， 你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定position属性。

下面是同样的三个BOX，分别都被设置了position: relative，他们的Z-index值还是按照上面那段设定。

现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的BOX覆盖在蓝色之上，蓝色的覆盖在金色之上。

语法

 

#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 9999;
}

#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 500;
}

#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
z-index: 1;
}

 

重复一下，Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视，尤其是对于那些新手。

Popularity: 2%

Page 1 of 41234
返回顶部