{"id":2565,"date":"2013-12-11T16:32:02","date_gmt":"2013-12-11T08:32:02","guid":{"rendered":"https:\/\/sdeno.com\/?p=2565"},"modified":"2013-12-11T16:32:02","modified_gmt":"2013-12-11T08:32:02","slug":"jquery-%e7%ae%80%e6%98%93%e7%9a%84%e5%9b%be%e7%89%87%e5%88%87%e6%8d%a2","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=2565","title":{"rendered":"jquery \u7b80\u6613\u7684\u56fe\u7247\u5207\u6362"},"content":{"rendered":"

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2013\/12\/mygundong.jpg\"<\/figure><\/a>
\nCSS\u4ee3\u7801\uff1a<\/p>\n

[code]<style type=”text\/css”>
\n*{ margin:0; padding:0;}
\n.wrap_tv_tit{ height:50px;margin-bottom:10px;}
\n.wrap_tv_tit_l{ float:left;}
\n.wrap_tv_tit_r{ float:right;}
\n.wrap_tv_tit_r span{background:yellow; margin-right:10px; cursor:pointer}<\/p>\n

.wrap_tv{ border:1px solid red; height:140px; width:500px; overflow:hidden;}
\nli{ list-style-type:none; float:left; margin-right:25px;}
\nul{ position:absolute; height:50px; width:2000px;}
\n.wrap_tv_bg{ position:relative;width:100%;}
\n.name{ display:block;}
\n.mun_page{ background:red;}
\n<\/style>[\/code]
\njquery\u90e8\u5206\uff1a<\/p>\n

[code]<script type=”text\/javascript”>
\n$(function(){<\/p>\n

var page = 1; \/\/\u5f53\u524d\u7248\u9762\u9875\u7801
\n$(‘div.wrap_tv_tit_l’).children(‘span’).eq(0).addClass(‘mun_page’); \/\/\u9ed8\u8ba4\u5f53\u524d\u9875\u7801\u9ad8\u4eae
\n$(‘.wrap_tv_tit_r span.r’).click(function(){ \/\/\u70b9\u51fb\u53f3\u952e\u65f6\u5019
\nif(!$(this).parents(‘.wrap_tv’).find(‘ul’).is(‘:animated’)){ \/\/\u5f53\u70b9\u51fb\u53f3\u79fb\u52a8\u65f6\u5019\uff0c\u5982\u679c\u52a8\u753b\u5f53\u524d\u4e0d\u52a8\u5c31\u6ee1\u8db3\u4ee5\u4e0b\u6761\u4ef6\uff1b\u5982\u679c\u52a8\u753b\u662f\u6b63\u5728\u5904\u4e8e\u52a8\u7684\u72b6\u6001\u8fd8\u70b9\u4e86\u5411\u53f3\u5c31\u4e0d\u6ee1\u8db3\u4ee5\u4e0b\u6761\u4ef6\u4e0d\u7ee7\u7eed\u8ffd\u52a0\uff1b\u6548\u679c\u5c31\u662f\u5f53\u70b9\u4e00\u6b21\u5411\u53f3\u65f6\u5019\uff0c\u5fc5\u987b\u7b49\u5f53\u524d\u7684\u52a8\u753b\u79fb\u52a8\u5b8c\u6bd5\u518d\u53bb\u70b9\u7684\u65f6\u5019\u624d\u6709\u6548\u679c\u3002
\nif(Math.ceil(($(this).parents(‘.wrap_tv’).find(‘ul li’).size())\/4)==page){ <!–\u5224\u65ad\u7248\u9762\u603b\u6570\uff08\u5176\u5b9e\u662f4\uff09\u662f\u5426\u7b49\u4e8e \u5f53\u524d\u9875\u7801\u6570\uff08\u5176\u5b9e\u4e5f\u662f4\uff09–>
\n$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’0px’}); <!–\u5982\u679c\u5230\u4e86\u6700\u540e\u4e00\u9875\uff0c\u5c31\u8fd4\u56de\u5230\u5f00\u59cb–>
\npage=1; <!–\u5982\u679c\u5230\u4e86\u6700\u540e\u4e00\u9875\uff0c\u8bf4\u660epage\u5df2\u7ecf\u662f4\u4e86\uff0c\u5c31\u8981\u4ece\u65b0\u8d4b\u503cpage=1,\u8fd9\u6837\u624d\u80fd\u4fdd\u8bc1\u7ee7\u7eed\u5faa\u73af\u70b9\u51fb–>
\n}else{
\n$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’-=’+$(this).parents(‘.wrap_tv’).width()+’px’});
\npage=page+1;
\n}
\n$(‘div.wrap_tv_tit_l’).children(‘span’).removeClass(‘mun_page’);
\n$(this).parents(‘.wrap_tv’).find(‘div.wrap_tv_tit_l’).children(‘span’).eq(page-1).addClass(‘mun_page’);
\n}
\n});<\/p>\n

$(‘.wrap_tv_tit_r span.l’).click(function(){
\nif(page==1){
\n$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’-=’+500*3+’px’});
\npage=Math.ceil(($(this).parents(‘.wrap_tv’).find(‘ul li’).size())\/4);
\n}else{
\n$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’+=’+$(this).parents(‘.wrap_tv’).width()+’px’});
\npage–;
\n}
\n$(‘div.wrap_tv_tit_l’).children(‘span’).removeClass(‘mun_page’);
\n$(this).parents(‘.wrap_tv’).find(‘div.wrap_tv_tit_l’).children(‘span’).eq(page-1).addClass(‘mun_page’);
\n});
\n});<\/p>\n

<\/script>[\/code]<\/p>\n

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

[code]<div class=”wrap_tv”>
\n<div class=”wrap_tv_tit”>
\n<div class=”wrap_tv_tit_l”><span>1<\/span> <span>2<\/span> <span>3<\/span> <span>4<\/span><\/div>
\n<div class=”wrap_tv_tit_r”><span class=”l”>&lt;<span class=”r”>&gt;<\/span> <\/span><\/div>
\n<\/div>
\n<div class=”wrap_tv_bg”>
\n<ul>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>111<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>222<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>333<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>444<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>555<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>666<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>777<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>888<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>999<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>qqq1<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>www<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>eee<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>rrr<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>ttt<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>yyy<\/a><\/li>
\n<li><a href=”#”><img alt=”” src=”images\/logo.png” width=”100″ height=”50″ \/><\/a><a class=”name”>uuu<\/a><\/li>
\n<\/ul>
\n<\/div>
\n<\/div>[\/code]<\/p>\n

\u6587\u4ef6\u4e0b\u8f7d<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

CSS\u4ee3\u7801\uff1a [code]<style type=”text\/css”> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,11],"tags":[],"class_list":["post-2565","post","type-post","status-publish","format-standard","hentry","category-jquery","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/2565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2565"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/2565\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}