{"id":35,"date":"2009-10-17T09:37:13","date_gmt":"2009-10-17T01:37:13","guid":{"rendered":"http:\/\/www.magki.com\/blog\/?p=35"},"modified":"2009-10-17T09:47:36","modified_gmt":"2009-10-17T01:47:36","slug":"jquery-marqe","status":"publish","type":"post","link":"http:\/\/www.ijony.com\/blog\/2009\/10\/jquery-marqe.html","title":{"rendered":"\u4e00\u4e2a\u7528 JQuery \u5199\u7684\u8dd1\u9a6c\u706f"},"content":{"rendered":"

\u5728\u505a\u4e00\u4e2a\u5237\u6dd8\u5b9d\u4fe1\u7528\u7684\u7f51\u7ad9\u65f6\uff0c\u9700\u8981\u4e00\u4e2a\u8dd1\u9a6c\u706f\u7684\u5e7f\u544a\u6548\u679c\u3002\u7f51\u4e0a\u627e\u7684\u90a3\u79cd\u7528 table \u7684\u4e0d\u592a\u597d\u7528\uff0c\u4fbf\u81ea\u5df1\u52a8\u624b\u5199\u4e00\u4e2a\u3002\u56e0\u4e3a\u7a0b\u5e8f\u662f\u7528 PHPCMS\uff0c\u5176\u81ea\u5e26\u4e86 JQuery\uff0c\u81ea\u7136\u4e5f\u7528 JQuery \u6765\u5b9e\u73b0\u4e86\u3002\u6682\u65f6\u5199\u4e86\u4e2a\u7b80\u5355\u7684\uff0c\u4ee5\u540e\u6709\u65f6\u95f4\u518d\u5b8c\u5584\u5427\u3002<\/p>\n

html \u90e8\u5206\uff1a<\/p>\n

<div id=”marqee”>
\n\u00a0\u00a0\u00a0\u00a0<div id=”leftButton”><\/div>
\n\u00a0\u00a0\u00a0\u00a0<div id=”marqeeArea”>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ul>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li><img src=”1.gif” \/><\/li>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li><img src=”2.gif” \/><\/li>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<li><img src=”3.gif” \/><\/li>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/ul>
\n\u00a0\u00a0\u00a0\u00a0<\/div>
\n\u00a0\u00a0\u00a0\u00a0<div id=”rightButton”><\/div>
\n<\/div><\/p><\/blockquote>\n

CSS \u90e8\u5206\uff1a<\/p>\n

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

<\/p>\n

JS \u90e8\u5206\uff1a<\/p>\n

\n$(document).ready(function(){
\n    var liItem = $(‘#marqeeArea>ul>li’);
\n    var liTotel = liItem.length;
\n    var i = 0;
\n    var marqee_way = ‘left’;<\/p>\n

    $(‘#marqeeArea>ul’).css(‘width’,100*liTotel);<\/p>\n

    for(i;i<liTotel;i++){
\n        var imgWidth = liItem.eq(i).children(‘img’).attr(‘width’);
\n        var imgHeight = liItem.eq(i).children(‘img’).attr(‘height’);<\/p>\n

        if(imgWidth\/imgHeight > 100\/61){
\n            if(imgWidth > 100){
\n                liItem.eq(i).children(‘img’).attr(‘width’,100);
\n                liItem.eq(i).children(‘img’).attr(‘height’,imgHeight*100\/imgWidth);
\n            }
\n        }else{
\n            if(imgHeight > 100){
\n                liItem.eq(i).children(‘img’).attr(‘height’,61);
\n                liItem.eq(i).children(‘img’).attr(‘width’,imgWidth*61\/imgHeight);
\n            }
\n        }<\/p>\n

        var mtop = (61-liItem.eq(i).children(‘img’).attr(‘height’))\/2;<\/p>\n

        liItem.eq(i).children(‘img’).css(“margin-top”,mtop);
\n    }<\/p>\n

    $.extend({
\n        marqeemGo:function(type){
\n            if(type == ‘left’){
\n                $(‘#marqeeArea>ul’).append(“<li>”+$(‘#marqeeArea>ul>li:first-child’).html()+”<\/li>”);
\n                $(‘#marqeeArea>ul’).animate(
\n                    {left:”-121px”},
\n                    500,
\n                    “linear”,
\n                    function(){
\n                        $(‘#marqeeArea>ul’).css(“left”,”0px”);
\n                        $(‘#marqeeArea>ul>li:first-child’).remove()
\n                    }
\n                );
\n            }else if(type == ‘right’){
\n                $(‘#marqeeArea>ul’).css(“left”,”-121px”);
\n                $(‘#marqeeArea>ul’).prepend(“<li>”+$(‘#marqeeArea>ul>li:last-child’).html()+”<\/li>”);
\n                $(‘#marqeeArea>ul’).animate(
\n                    {left:”0px”},
\n                    500,
\n                    “linear”,
\n                    function(){
\n                        $(‘#marqeeArea>ul>li:last-child’).remove()
\n                    }
\n                );
\n            }
\n        }
\n    });<\/p>\n

    var t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000);<\/p>\n

    $(“#marqeeArea”).hover(
\n        function(){t = clearInterval(t)},
\n        function(){t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000)}
\n    );<\/p>\n

    $(“#leftButton”).click(function(){
\n        marqee_way = “left”;
\n        t = clearInterval(t);
\n        t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000);
\n    });<\/p>\n

    $(“#rightButton”).click(function(){
\n        marqee_way = “right”;
\n        t = clearInterval(t);
\n        t = setInterval(“$.marqeemGo(‘”+marqee_way+”‘)”,2000);
\n    });
\n});<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

\u5728\u505a\u4e00\u4e2a\u5237\u6dd8\u5b9d\u4fe1\u7528\u7684\u7f51\u7ad9\u65f6\uff0c\u9700\u8981\u4e00\u4e2a\u8dd1\u9a6c\u706f\u7684\u5e7f\u544a\u6548\u679c\u3002\u7f51\u4e0a\u627e\u7684\u90a3\u79cd\u7528 table \u7684\u4e0d\u592a\u597d\u7528\uff0c\u4fbf\u81ea\u5df1\u52a8\u624b\u5199\u4e00\u4e2a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[14],"_links":{"self":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/35"}],"collection":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":0,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}