AK Footprints

always be together

好久没动手写代码,前一段用Xajax和flash插件多一些,前天一动手,问题百出,花了一夜时间才搞定,记录下来,给下次使用参考.

1.JW Image Rotator的使用: JW Image Rotator不仅可以当成单一的图片切换容器,还把整个页面都放在JW Image Rotator里,只让其中一部分图片切换. 这个功能很贴心, 也是一般的商业网站需要的, 大家平常看到的flash图片切换展示的首页, 都可以用这个思路实现, 以后可以多用用.代码区别就在于, 给插件加个属性:

var so = new SWFObject(‘/scripts/imagerotator.swf’,'tour_txt’,'XXX’,'WWW’,’8′);
so.addParam(‘allowscriptaccess’,'always’);
so.addParam(‘allowfullscreen’,'true’);
so.addVariable(‘width’,'YYY’);
so.addVariable(‘height’,'ZZZ’);

注意加粗的两行,如果要让页面的一部分切换,而不是整个页面切换的话,把这里的值改的跟上面XXX,WWW不一样即可.

2.如果用上面的方法建立了一个部分内容切换的flash页面,接下来的问题就是flash文件编译,NND,当时我就栽在了这上面,花了两个小时,就是找不到问题,最后才发现是flash编译出了问题,导出的swf文件本身是死的. 从头说起, 不知是所有带外部com组件的flash导出时都有这个问题,还是我遇到了比较罕见的情况(RP不好),我一开始在公司电脑上做的源文件,导出没问题.拷回家改了一些内容后,再导出就死活都不运行了,页面可以显示,但其中flash切换的部分怎么都没法运行.最后把文件源文件重新做了一遍,导出,成功…看来以后在哪做的东西最好在哪做完. 如果要换地方做,要把文件夹拷全,多拷点没事,别少拷了.

3. 顺便写一下在flash建透明按钮的问题. 其实很简单,随便建一个想要的形状,转换成按钮,进入按钮内部,把弹起帧拖到点击帧,搞定.

4. Carousel组件的使用, 记得按照官方教程的要求,把5个js文件和至少1个css文件包含进页面,这次因为忘记包含那几个js文件和css(很重要),搞的效果一直出不来.

5. 如果只想使用Carousel组件的css效果,那就不需要包含文件了,只要把需要用的css拷进文件就可以了.

6. 这次相册做了个两页的分页,用的链接+ajax,效果不错,如果以后文件特别多了,可以考虑弄个后台管理一下,把图片地址入库.

谨以此文纪念我跟老婆整整奋斗的一夜,但愿以后别熬了。。。

  • 1 Comment
  • Filed under: Kevin
  • 今天发现一个很牛的网页http://www.centricle.com/ref/css/filters/,里面列出了所有浏览器对于CSS功能的支持情况,分项对比极为详细,赞一个,有空研究一下.

    http://www.centricle.com/ref/css/filters/

  • 0 Comments
  • Filed under: Kevin
  • 区别IE6与FF:
    background:orange;*background:blue;

    区别IE6与IE7:
    background:green !important;background:blue;

    区别IE7与FF:
    background:orange; *background:green;

    区别FF,IE7,IE6:
    background:orange;*background:green !important;*background:blue;

    注:IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*,但不能识别 !important,
    IE7能识别*,也能识别!important;
    FF不能识别*,但能识别!important;

    IE6     IE7     FF
    *     √     √     ×
    !important     ×     √     √

    另外再补充一个,下划线”_”,
    IE6支持下划线,IE7和firefox均不支持下划线。(推荐)

    于是大家还可以这样来区分IE6,IE7,firefox
    : background:orange;*background:green;_background:blue;

    注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

    From: http://www.pjhome.net/article.asp?id=807

  • 0 Comments
  • Filed under: Kevin
  • 今天在做一个简易的图片浏览页面, 使用了Carousel Component V0.4.0来实现缩略图的显示. Carousel这个插件不是第一次使用, 上次给一个公司做网站时就出现了问题,在IE下插件上的按钮错位.


    如 图,之前一直以为是插件有bug,需要自己修改CSS,但修改了CSS中的carousel-component类的padding属性后,在IE中正常 了,但Firefox中又错位了.忽然想起,修改之前都没有测试FF中是否正常,赶紧改回原样试了一下,果然,在FF中插件的位置是正常的,就是残疾IE 中才有问题.

    既然IE中有问题时FF中正常,修改了padding属性后IE正常FF有问题,那八成是问题出在padding上了.网上搜了一下,发现IE和FF对padding-left的解释是不一样的,就导致了刚才出现的那种错位.要解决这一个矛盾,可以利用

    程序代码 程序代码
    !important

    来解决.

    !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。我们就可以利用这一点来分别给IE和其它浏览器不同的样式定义。

    语法格式{ sRule!important },即写在定义的最后面,如:

    例:
    box{color:red !important;}

    具体到本文中的问题,代码如下:

    程序代码 程序代码
    .carousel-component {
    background:#ffffff;
    padding-top:30px;
    padding-right:0px;
    padding-bottom:6px;
    padding-left:0px !important;      //提升这一属性的优先级,使非IE浏览器可以适用这一属性.
    padding-left:35px;                //IE适用这一属性

    bug解决后的效果:

  • 0 Comments
  • Filed under: Kevin
  • 原代码

    <a href=”faculty_lit.html#top” target=”faculty” onMouseOver=”this.style.color=’#8E6235′” onMouseOut=”this.style.color=’#808284′”>Literature</a>

    鼠标略过时的颜色

    onMouseOver=”this.style.color=’#8E6235′”

    鼠标离开时的颜色

    onMouseOut=”this.style.color=’#808284′”

  • 0 Comments
  • Filed under: Kevin