nav-left cat-right
cat-right
利用mediaplayer做弹窗（成功突破IE7）
2010-01-07 By im502 [0] 84 views
?View Code JAVASCRIPT
var u = "6BF52A52-394A-11D3-B153-00C04F79FAA6"; //这个就是网页中插入播放器用到的classid，这里被用来弹窗了
function ext() //在关闭IE窗口的时候弹出
{
if(window.event.clientY<132 || altKey) iie.launchURL(popURL);
}
function brs() //插入Object
{
document.body.innerHTML+="<object id="iie" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="0" height="0" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><embed id="iie" type="application/x-shockwave-flash" width="0" height="0"></embed></object>";
} 
 
var popURL = 'http://www.yoururl.com';
eval("window.attachEvent('onload',brs);");
eval("window.attachEvent('onunload',ext);");

将以上代码插入到需要弹窗的网页body区域，关闭该网页则会弹出你设置好的popURL。

Tags: , ,

Jquery操作select的一些方法总结
2009-11-29 By im502 [0] 182 views

//取得下拉选单的文本TEXT值
$(‘#testSelect option:selected’).text();
或$(“#testSelect”).find(‘option:selected’).text();
$(“#selectid>option[value='2']“).text();//获取ID为selectid的下拉框中value值为2的文本text值。
//取得下拉选单的value值
$(“#testSelect”).val();

//添加option
$(“#selectid>option[value='2']“).before(‘‘);//在value值为2的下拉一
$(““).appendTo(“#selectid”)//在末尾添加
//没有找到简便的办法用Jquery添加下拉到指定的索引index

//删除option
$(“#selectid>option[value='2']“).remove();//删除下拉选单value值为2的option
$(“#selectid>option:eq(0)”).remove(); //这里的0代表索引位置的第一位以此类推
$(“#selectid”).empty()；//清空下拉框

//设置某项为选中
$(“#selectid”).attr(“value”,’2′);//设置value=2的项目为当前选中项
$(“#selectid”)[n].selectedIndex = 1;//select下拉框的第n+1个元素为当前选中值

Tags: , , ,

6个免费英文字体下载网站
2009-11-21 By im502 [0] 159 views

Search Free Fonts
英文字体的设计相对中文要简单许多，毕竟只有26个字母而已，所以很多英文网站都有自己的字体，如最著名的雅虎、谷歌、可口可乐等公司，本文提到的这些字体下载网站都是免费下载的，Enjoy them!

  1. http://www.searchfreefonts.com/
  2. http://www.1001freefonts.com/
  3. http://www.fontica.com/
  4. http://www.creamundo.com/
  5. http://www.fontstock.net/
  6. http://www.highfonts.com/

Tags: , ,

4种方法消除超链接点击虚线框
2009-11-11 By im502 [0] 226 views

在网页中凡是添加了超级链接的对象，不管是文字还是图片，在点击的时候都会出现一个虚线框，有时候会觉得很影响页面的美观,也许你也和502一样有这样的困扰，也许你的boss也是个完美主义者，那么下面502将会整理从google搜来的4种解决方案来想消除这不太受欢迎的虚线框。

非IE浏览器里一般用　a:focus { outline:0; }这句来搞定

1、首先有利用htc来解决的。htc是什么呢？htc全称就是Html Components，由微软在IE5.0后开始提供的一种新的指令组合，它可以把某种特定功能的代码封装在一个组件之中，从而实现了代码的重复使用。作为一个组件，htc里包含了属性、方法、事件等等各种知识，在这里就不一一介绍了，具体内容各位可以参考微软的msdn主页。现在言归正传，看看htc是怎么批量消除链接虚线框的：
①首先将下面的代码保存为.htc扩展名的文件；

?View Code JS
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>

②然后在网页文件的<style>标签内或着外链的CSS文件里添加如下一行代码即可：

?View Code CSS
a {behavior:url(htc文件所在路径地址)}

2、使用CSS中Expression来解决。跟第一个方法相比，此方法要简单得多，不需要创建htc文件，只需在网页文件的<style>标签内或着外链的CSS文件里添加如下一行代码即可：

?View Code CSS
a{blr:expression(this.onFocus=this.close());} /* 只支持IE，过多使用效率低 */
a{blr:expression(this.onFocus=this.blur());} /* 只支持IE，过多使用效率低 */
a:focus { -moz-outline-style: none; } /* IE不支持 */

3、使用JS脚本来解决。代码如下，复制到网页文件的<head>标签内即可。

?View Code JS
<script type="text/javascript">window.onload=function()
{
 for(var ii=0; ii<document.links.length; ii++)
 document.links$[$ii$]$.onfocus=function(){this.blur()}
}</script>

4、同样是使用JS脚本的方法。代码如下，复制到网页文件的<head>标签内即可。

?View Code JS
<script type="text/javascript">function fHideFocus(tName){
aTag=document.getElementsByTagName(tName);
for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;
for(i=0;i<aTag.length;i++)aTag$[$i$]$.onfocus=function(){this.blur();};
}</script>

Tags: , ,

21个实用的网页设计资源站
2009-11-10 By im502 [0] 174 views

就算是一流的网页设计师也会借鉴别人的作品，何况是我们这些菜鸟呢，所以收藏夹里有很多优秀的设计资源站点，我们往往可以从别人的设计作品处得到灵感。下面是502收藏的几个资源站，有素材下载也有佳作欣赏，希望对你有用。

zcool.com.cn

1.站酷（www.zcool.com.cn）,国内设计素材资源站很多，我唯独推荐站酷是因为这里的资源质量一般都比较高，而且全部是免费高速下载，还有一些会员作品欣赏，大觉互相交流设计经验，品评作品，是一个很好的平台。

阅读全部

Tags: , , ,

国庆网页背景图4张
2009-09-28 By im502 [0] 292 views

 

国庆网页背景图片
国庆网页背景图片

国庆网页背景图片2

 
 
 
http://www.mb5u.com/uploads/zt/china60/601.jpg
http://www.mb5u.com/uploads/zt/china60/602.jpg
http://www.mb5u.com/uploads/zt/china60/603.jpg
http://www.mb5u.com/uploads/zt/china60/604.jpg

Tags: , ,

[翻译]用CSS3制作超级棒的按钮
2009-08-26 By im502 [0] 275 views

在ZURB看到这些漂亮的按钮，忍不住转载过来，稍加翻译。

我们非常喜欢CSS3，虽然CSS3还没有正式发布，但已经会在一些项目中使用它。在近10年的努力，CSS3终于开始看到了胜利的曙光在Firefox和Safari等浏览器支持推动下。

我们最喜欢的事情之一就是CSS3支持RGBA的颜色模式，增加了ALPHA混合属性到你的CSS中。

它有助于简化我们的CSS编写，让我们变得非常容易的去制作按钮之类的效果，上图已经向您展示我们制作的一些成熟的、可扩展的按钮的例子。

这是一个简单的按钮用透明的PNG来覆盖（渐变的）, border, border-radius, box-shadow, and text-shadow.（边框，边框半径，盒阴影，和文字阴影）仅仅这么简单我们就可以做出这个很棒效果的按钮：

?View Code CSS
.awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

详细原文：http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Tags: ,

绝对定位被遮挡了
2009-07-13 By im502 [0] 205 views

 <div class=”A” style=”position:relative;”>A (relative)
 <div class=”logo” style=”position:absolute;z-index:99999;“></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>

最近碰到了个奇怪的定位问题: 以上的A，B两个盒子是相对定位,
标牌logo是A的子级，基于A做绝对定位
问题描述：我们希望标牌logo显示在最上面，但在IE下logo标牌部分被B区域遮住,B在最上层显示，调整logo的z-index的数值调整无效，IE8和firefox下显示正常。

解决方案：先了解一下所涉及到的几个定位特性（非官方解释）：
1. 相对定位元素默认的z-index的数值是0。
2. 当两个相对定位同时出现时，代码靠后的z-index优先。
3. 子级遵循父级设定的z-index；如果子级设定了绝对定位、z-index，可以冲破父级显示
这个问题主要是ie对上面第3条错误解释导致的—在ie下子级的z-index不能冲破父级。网上解决这个bug的办法一般用hack使B为负值，来降低 B 在IE下级别，这种方法绕了一个大圈：z-index为负值时，产生了新的ie bug。

按照定位的特性，ie的这个bug是可以回避的，从表面上看 B 遮住了logo，实际上是 B 遮住了logo的父级 A ，只要将 A 的z-index设定大于B即可。

<div class=”A” style=”position:relative;z-index:1;“>A (relative)
 <div class=”logo” style=”position:absolute;”></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>

Tags: , ,

jquery拾色插件
2009-06-20 By im502 [0] 280 views

Jquery的颜色插件很多，今天推荐的一款是一个非常简洁的小插件：http://www.syronex.com/software/jquery-color-picker ，

Usage

Minimal

$('#test').colorPicker({
  click: function(color){$('#output').html(c);}
});

 

Options

$('#test').colorPicker({
  defaultColor: 0, // index of the default color (optional)
  columns: 13,     // number of columns (optional)
  color: ['#FFFFFF', '#EEEEEE'], // list of colors (optional)
  // click event - selected color is passed as arg.
  click: function(color){$('#output').html(c);},
});

 

Download

Download (zip, 19K)

Tags: , ,

一些漂亮的表格CSS设计
2009-06-19 By im502 [0] 890 views

data-tables-and-css

无意间发现这么个网站，上面有许多网友设计的表格样式，如果你没有时间去设计表格的css那你可以直接在这里选择一个适合你的设计并下载css样式表文件，预览的方法很简单，点击表格第一列的样式名即可；你也可以将自己的设计的表格样式上传上去与别人分享！

http://icant.co.uk/csstablegallery/index.php?css=93#r93

Tags: , ,

1/41234»