今天遇到一个问题,就是有一个 div 拥有 float 属性,它的上一层 div 高度为 100% ,此时在IE下面显示正常,上一层 div 高度没有问题,但是在FF下出错,FF下没有计算 float 的高度。就是说在IE下面 float 相当于移动,在FF下面 float 相当于浮动是不计算高度。所以,需要在它的上一层清除这个 float ,清除代码使用 overflow: auto; 详细请看演示。

演示地址:http://demo.joyfulboy.cn/css/overflow-clean-float.html

演示地址:http://demo.joyfulboy.cn/js/choice/

JS调用说明:

函数调用方法:
choice(参数1, 参数2, 参数3, ……, 参数n);

参数说明:
参数1 = this; 当前对象;
参数2 = “你需要显示的 DIV ID”; 字符串类型;
参数3 – 参数n = “你需要隐藏的 DIV ID”; 字符串类型;
参数顺序不允许颠倒;

例如:onmouseover = ‘choice(this, “show1”, “show2”);’;
此时当鼠标移动到此上面时ID为show1的DIV显示,ID为show2的DIV隐藏;

例如:onmouseout = ‘choice(this);’;
此时当鼠标移开此上面时className=choice

在线演示地址1:http://demo.joyfulboy.cn/js/tagswitch/1/

在线演示地址2:http://demo.joyfulboy.cn/js/tagswitch/2/

看演示,两种方法,显示效果都一样。

演示1所用的方法是把不需要显示的内容所在的DIV块用CSS样式隐藏了,好处是任何被隐藏的内容也会被搜索引擎识别并抓取,坏处是样式如果不加载的话被隐藏的内容就会显示出来。

演示2所用的方法是利用JS把所显示的内容动态写进DIV块内,DIV块永远是那一个DIV,内容是动态变的,好处是不受CSS样式的影响,坏处就是搜索引擎不会抓取动态改变的内容。

JS调用方法自己参考演示页面源码或查看JS文件注释,这里不想多说了,个人推荐应用第二中方法。

在线演示地址:http://demo.joyfulboy.cn/js/loader/

JS调用方法:

<script type=”text/javascript” src=”http://www.joyfulboy.cn/demo/js/loader/js/loader.js”></script>
<script type=”text/javascript”>
<!–
开启载入效果(“载入中…”);
//–>
</script>

在线演示地址:http://demo.joyfulboy.cn/js/openlink/2/

此JS应用可以使点击鼠标即可点击某个链接,目前只兼容IE浏览器。

函数调用方法:

GetImageLink(12, “imagelinks”, “counter”, 0, document.getElementById(“image1”), document.getElementById(“image2”), document.getElementById(“image3”));

参数说明:第一个参数“12”是设置 cookie 过期时间,从当前起12小时后过期,第二个参数“imagelinks”是设置 cookie 存储链接过期时间时使用的名字,第三个参数“counter”是设置 cookie 存储的计数器名字,第四个参数“0”是否同步打开所有链接,0为不同步,1为同步。第五至第N个参数为图片链接节点的上一个父节点对象。具体查看演示HTML页面。

详细的参数说明:第2和第3个参数必须是字符串类型,如果有多个页面调用此方法必须每个页面这两个参数不同,否则会出错。第4个参数为同步打开,即点击一下鼠标打开所设置的所有链接。第5至第N个参数可以为对象也可以为元素节点上的ID名字,也就是字符串。还可以为数组,但是数组内元素必须全部为DOM对象,否则会报错。

演示页面:http://demo.joyfulboy.cn/css/vc.html

代码请看演示地址.

IE8 FF 已经支持CSS的 vertical-align:middle; 垂直对齐属性 和 display:table-call; 元素显示为表格单元格,使用这两个属性就可以使在 IE8 FF 浏览器下页面垂直居中。IE6 IE7 不兼容这两个属性,所以使用了相对定位和绝对定位来解决此问题。(本人不是很喜欢浮动和绝对定位,但是不使用表格来实现垂直居中暂时也只好这样做,JS不算啊,用JS来实现感觉多此一举了,就像拿坦克打鸟。)

wordpress_logo

在线工具

2010年03月02日 | 前端技术

基于 javascrip 的在线颜色取色器

工具地址:http://tool.joyfulboy.cn/online/colorpicker/

基于 javascrip 的在线自动刷新页面工具

工具地址:http://tool.joyfulboy.cn/online/pv/

js写的日期选择器,摘自discuz论坛程序。可用于生日等日期选择。不多说了,看演示。

演示地址:http://demo.joyfulboy.cn/js/calendar/

不多说了,看演示吧:http://demo.joyfulboy.cn/css/2px-fillet-layer/

忘记说了,这个2像素圆角层采用固定宽度自动高度,支持 IE6 IE7 IE8 FF 浏览器。

演示页面:http://demo.joyfulboy.cn/js/addbgsound/

调用方法:

<script type=”text/javascript”>

<!–

$Load(function(){

var bgs = new addBgSound();

bgs.Url = “http://sports.wuhan.net.cn/mc3/mp3/%B1%A6%B1%B4.MP3”; //背景音乐地址;

bgs.loop = 1; //重复播放次数,0为始终重复播放;

bgs.show();

});

//–>

</script>