Magki's Blog » jquery

写了个 JQuery 的平滑横向跑马灯

Magki — Thu, 03 Dec 2009 01:47:11 +0000

懒的说废话了，直接贴代码吧。

HTML 部分

                    滚动测试用文字一
                    滚动测试用文字二
                    滚动测试用文字三
                    滚动测试用文字四

JS 部分

var speed=20;
$('#marqee_tmp').html($('#marqee_frame').html());
function Marquee(){
    var w = $('#marqee').width() - $('#marqee_frame').width();
    if(w<0) w=0;
    if($('#marqee_tmp').width() - $('#marqee').scrollLeft() <= w){
        $('#marqee').scrollLeft($('#marqee').scrollLeft() - $('#marqee_frame').offsetWidth);
    }else{
        $('#marqee').scrollLeft($('#marqee').scrollLeft() + 1);
    }
}
var MyMar=setInterval(Marquee,speed);
$('#marqee').hover(
    function(){ clearInterval(MyMar) },
    function(){ MyMar=setInterval(Marquee,speed) }
);

刚写的一个基于 JQuery 的聚焦切换广告

Magki — Tue, 10 Nov 2009 03:26:39 +0000

在给一个客户做站时 (测试站) 要用到聚焦广告，网上简单搜了一下 Flash 版的都不太满意那些样式，后来萌发自己用 JQuery 写一个的想法，于是就做了，实现起来并不难，这里不得不赞叹一下 JQuery 的强大。

HTML 部分

CSS 部分

#doFocus{ position:relative; width:694px; height:172px; border:2px #FFF solid; overflow:hidden;}
#doFocus img{ position:absolute; width:694px; height:172px; top:0px; left:0px;}
#focusNav{ position:absolute; top:142px; right:10px; z-index:2; opacity:0.8; filter:Alpha(Opacity=80);}
#focusNav a{ display:block; float:right; width:20px; height:20px; margin-left:10px; line-height:20px; text-align:center; background:#333; color:#FFF; font-weight:bold;}
#focusNav .thisclass,#focusNav a:hover{ background:#fff; color:#333;}

JS 部分

var ImgArr = $('#doFocus img');
var MaxImg = ImgArr.length;
var NowImg = 0;
var NextImg = 0;
var ToImg = -1;
var ImgNav = '';
var Status = 0;
var t;

for(i=0;i     ImgNav = ''+(i+1)+'' + ImgNav;
    ImgArr.eq(i).hide();
    ImgArr.eq(i).css("zIndex","0");
}

ImgArr.eq(0).show();
$('#focusNav').html(ImgNav);
$('#imgNav0').addClass("thisclass");

function changeImg(ImgNum){
    if(Status == 1){
        ToImg = ImgNum;
    }else{
        clearTimeout(t);

        ToImg = -1;
        ImgNav = '';
        NowImg = ImgNum;

        for(i=0;i             ImgNav = ''+(i+1)+'' + ImgNav;
            ImgArr.eq(i).hide();
            ImgArr.eq(i).css("zIndex","0");
        }

        ImgArr.eq(NowImg).show();
        $('#focusNav').html(ImgNav);
        $('#imgNav'+NowImg).addClass("thisclass");

        t = setTimeout('doFocus()', 3000);
    }
}

function doFocus(){
    clearTimeout(t);

    Status = 1;
    NextImg = (NowImg + 1 == MaxImg) ? 0 : NowImg + 1 ;

    ImgArr.eq(NextImg).css("zIndex","1");
    ImgArr.eq(NowImg).css("zIndex","0");

    ImgArr.eq(NextImg).fadeIn("slow",function(){
        $('#imgNav'+NowImg).removeClass("thisclass");
        $('#imgNav'+NextImg).addClass("thisclass");
        ImgArr.eq(NextImg).css("zIndex","0");
        ImgArr.eq(NowImg).hide();
        Status = 0;

        if(ToImg>-1){
            if(ToImg!=NextImg){
                ImgArr.eq(ToImg).show();
                ImgArr.eq(NextImg).hide();
                $('#imgNav'+ToImg).addClass("thisclass");
                $('#imgNav'+NextImg).removeClass("thisclass");
            }
            NowImg = ToImg;
            ToImg = -1;
        }else{
            if(NowImg == MaxImg-1){
                NowImg = 0;
            }else{
                NowImg++;
            }
        }

        t = setTimeout('doFocus()', 3000);
    });
}

t = setTimeout('doFocus()', 3000);

自己改写的基于 JQuery 的 Tip 提示框

Magki — Wed, 28 Oct 2009 07:58:53 +0000

使用方法很简单，将下面的 JS 脚本与 JQuery 一同载入，在需要做 Tip 效果的链接上添加一个 tips 属性，属性值就是 Tip 框里要显示的内容。

比如：tips="这个是提示内容！" />测试提示

想要美化 Tip 框的话完全可以在 tips 属性里加入用来修饰的 html 标签，然后在 CSS 文件里针对 #tip 以及其子元素定义 CSS 就可以了。

比如：

提示标题

这个是提示内容！

" />测试提示

一个用 JQuery 写的跑马灯

Magki — Sat, 17 Oct 2009 01:37:13 +0000

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

html 部分：

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;}

JS 部分：

$(document).ready(function(){
    var liItem = $('#marqeeArea>ul>li');
    var liTotel = liItem.length;
    var i = 0;
    var marqee_way = 'left';

    $('#marqeeArea>ul').css('width',100*liTotel);

    for(i;i         var imgWidth = liItem.eq(i).children('img').attr('width');
        var imgHeight = liItem.eq(i).children('img').attr('height');

        if(imgWidth/imgHeight > 100/61){
            if(imgWidth > 100){
                liItem.eq(i).children('img').attr('width',100);
                liItem.eq(i).children('img').attr('height',imgHeight*100/imgWidth);
            }
        }else{
            if(imgHeight > 100){
                liItem.eq(i).children('img').attr('height',61);
                liItem.eq(i).children('img').attr('width',imgWidth*61/imgHeight);
            }
        }

        var mtop = (61-liItem.eq(i).children('img').attr('height'))/2;

        liItem.eq(i).children('img').css("margin-top",mtop);
    }

    $.extend({
        marqeemGo:function(type){
            if(type == 'left'){
                $('#marqeeArea>ul').append("
"+$('#marqeeArea>ul>li:first-child').html()+"
");
                $('#marqeeArea>ul').animate(
                    {left:"-121px"},
                    500,
                    "linear",
                    function(){
                        $('#marqeeArea>ul').css("left","0px");
                        $('#marqeeArea>ul>li:first-child').remove()
                    }
                );
            }else if(type == 'right'){
                $('#marqeeArea>ul').css("left","-121px");
                $('#marqeeArea>ul').prepend("
"+$('#marqeeArea>ul>li:last-child').html()+"
");
                $('#marqeeArea>ul').animate(
                    {left:"0px"},
                    500,
                    "linear",
                    function(){
                        $('#marqeeArea>ul>li:last-child').remove()
                    }
                );
            }
        }
    });

    var t = setInterval("$.marqeemGo('"+marqee_way+"')",2000);

    $("#marqeeArea").hover(
        function(){t = clearInterval(t)},
        function(){t = setInterval("$.marqeemGo('"+marqee_way+"')",2000)}
    );

    $("#leftButton").click(function(){
        marqee_way = "left";
        t = clearInterval(t);
        t = setInterval("$.marqeemGo('"+marqee_way+"')",2000);
    });

    $("#rightButton").click(function(){
        marqee_way = "right";
        t = clearInterval(t);
        t = setInterval("$.marqeemGo('"+marqee_way+"')",2000);
    });
});

jQuery 学习笔记

Magki — Thu, 18 Jun 2009 02:38:33 +0000

本文的所有内容均出自 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;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：

$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("new content");
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));