存档

‘Javascript’ 分类的存档

一个用 JQuery 写的跑马灯

2009年10月17日

在做一个刷淘宝信用的网站时,需要一个跑马灯的广告效果。网上找的那种用 table 的不太好用,便自己动手写一个。因为程序是用 PHPCMS,其自带了 JQuery,自然也用 JQuery 来实现了。暂时写了个简单的,以后有时间再完善吧。

html 部分:

<div id="marqee">
    <div id="leftButton"></div>
    <div id="marqeeArea">
        <ul>
            <li><img src="1.gif" /></li>
            <li><img src="2.gif" /></li>
            <li><img src="3.gif" /></li>
        </ul>
    </div>
    <div id="rightButton"></div>
</div>

CSS 部分:

#marqee{ width:960px; height:61px;}
#marqee #leftButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #rightButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #marqeeArea{ position:relative; width:912px; height:61px; overflow:hidden; float:left;}
#marqee #marqeeArea ul{ position:relative; display:block; height:61px; overflow:hidden; list-style:none;}
#marqee #marqeeArea ul li{ width:121px; height:61px; float:left; text-align:center;}

阅读全文...

Javascript

jQuery 学习笔记

2009年6月18日

本文的所有内容均出自 http://bbs.jquery.org.cn/read.php?tid-3744.html 一文中所提供的附件文档,主要是出于以后查阅方便在此备份一份。

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

阅读全文...

Javascript

解决 Firefox 的 innerText

2009年5月2日

在做公司的一个项目的时候发现,Firefox 下可以用 obj.innerText 获取指定标签内的文本数据,却无法通过 obj.innerText = str 的方式来填充。在网上搜索了一会找到一段给 Firefox 添加 innerText 填充的 js 代码。

function isIE(){
    if(window.navigator.userAgent.toLowerCase().indexOf("msie")>=1){
        return true;
    }else{
        return false;
    }
}

if(!isIE()){
    HTMLElement.prototype.__defineGetter__("innerText",
        function(){
            var anyString = "";
            var childS = this.childNodes;

            for(var i=0; i<childS.length; i++) {
                if(childS[i].nodeType==1){
                    anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
                }else if(childS[i].nodeType==3){
                    anyString += childS[i].nodeValue;
                }
            }

            return anyString;
        }
    );

    HTMLElement.prototype.__defineSetter__("innerText",
        function(sText){
            this.textContent=sText;
        }
    );
}

Javascript

一个 JS 做的在线阅读翻页效果

2009年3月5日

曾经一个朋友介绍了她朋友的私活给我做,后来因为那人公司老总自己另找了个设计公司做那项目,所以我被舍弃。不过昨天那朋友又找过来问我一个在线阅读并有翻页特效的程序可不可以做,印象中以前见过有用 JS 实现的,就先答应他试试。昨天鼓捣了一晚上基本完工,是将网上搜来的一个很简单的翻页 JS 特效改良而来,并加入了放大,书目跳转等功能。

Demo: http://www.magki.com/demo/ebook/page.htm

ebook

Javascript