利用jquery实现左右伸缩滑动效果



40 157 53



特效描述:利用jquery实现 左右伸缩 滑动效果,利用jquery实现左右伸缩滑动效果

代码结构

1. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<LINK href="css/Newstyle.css" type=text/css rel=STYLESHEET>
<SCRIPT language=JavaScript src="js/jquery-1.2.1.pack.js"></SCRIPT>
</HEAD><BODY>
<div align="center" style="text-align:left"><br />
  <br />
  <br />
  <br />
  <TABLE align="center" cellPadding=0 cellSpacing=0>
    <TBODY>
      <TR>
        <TD style="PADDING-RIGHT: 10px" vAlign=top width=566><SCRIPT>
	var x = 'right';
  $(document).ready(function(){
    $("#LeftTodayBook").mouseover( function(){
	  if( x == 'left' )
	  {
		x = null;
	    $("#RightTodayBook").animate({"left": "+=210px"}, "fast", null, function() {
			x = 'right';
			todayBookImg.src = "images/b_tbLeft.gif";
		});
	  }
    });
    $("#RightTodayBook").mouseover(function(){
	  if( x == 'right' )
	  {
		x = null;
	    $("#RightTodayBook").animate({"left": "-=210px"}, "fast", null, function() {
			x = 'left';
			todayBookImg.src = "images/b_tbRight.gif";
		});
	  }
    });
    $("#todayBookImg").click( function(){
	  if( x == 'left' )
	  {
		x = null;
	    $("#RightTodayBook").animate({"left": "+=210px"}, "fast", null, function() {
			x = 'right';
			todayBookImg.src = "images/b_tbLeft.gif";
		});
	  }
    });
  });
  </SCRIPT>
          <DIV id=TodayBookContainer 
                        style="Z-INDEX: 1; LEFT: 0px; BACKGROUND-IMAGE: url(images/bg_tb.gif); OVERFLOW: hidden; WIDTH: 566px; POSITION: relative; TOP: 0px; HEIGHT: 249px">
            <DIV id=LeftTodayBook 
                        style="LEFT: 0px; POSITION: absolute; TOP: 0px">
              <TABLE id=Table1 height=249 cellSpacing=0 
                          cellPadding=0>
                <TBODY>
                  <TR>
                    <TD vAlign=top width=369><TABLE id=Table2 
                              style="MARGIN-TOP: 10px; MARGIN-LEFT: 10px" 
                              cellSpacing=0 cellPadding=0>
                        <TBODY>
                          <TR>
                            <TD><a 
                                href="#" target="_blank"><img 
                                src="images/t081029_1.jpg" alt="" 
                                width=138 
                                height=132 border="0"></a></TD>
                            <TD 
                                style="PADDING-RIGHT: 10px; PADDING-LEFT: 25px; PADDING-BOTTOM: 0px; PADDING-TOP: 15px" 
                                vAlign=top rowSpan=2><SPAN class=bodytitle>听杨绛谈往事</SPAN><BR>
                              <SPAN class=Read>北京女孩、阿季回南、启明小鬼、振华女生、东吴高材生、清华借读生到研究生、留学牛津、在巴黎、振华分校校长、酷哉此别离、上得厅堂,下得厨房、上得厅堂,下得厨房、上得厅堂,下得厨房、妻子·情人·朋友……本书记录了中国社会科学院外国文学研究员,作家、评论家、翻译家、剧作家——杨绛女士的一生。 </SPAN></TD>
                          </TR>
                          <TR>
                            <TD 
                                style="PADDING-RIGHT: 0px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px"><A 
                                class=pdname 
                                href="#">听杨绛谈往事</A><BR>
                              本书记录了杨绛女士精彩的一生<BR>
                              <SPAN 
                                class=priceB>22,5</SPAN> <BR>
                              <SPAN 
                                class=price>(10%<IMG 
                                src="images/i_dc.gif">+10%<IMG 
                                src="images/i_p.gif">)</SPAN><BR>
                              <SPAN 
                                class=couponB></SPAN></TD>
                          </TR>
                        </TBODY>
                      </TABLE></TD>
                  </TR>
                </TBODY>
              </TABLE>
            </DIV>
            <DIV id=RightTodayBook 
                        style="LEFT: 376px; WIDTH: 410px; POSITION: absolute; TOP: 0px">
              <TABLE id=Table1 height=249 cellSpacing=0 
                          cellPadding=0>
                <TBODY>
                  <TR>
                    <TD><IMG id=todayBookImg style="CURSOR: hand" 
                              height=249 
                              src="images/b_tbLeft.gif" 
                              width=17></TD>
                    <TD vAlign=top width=379 
                            background="images/bg_tbup.gif"><TABLE id=Table2 
                              style="MARGIN-TOP: 10px; MARGIN-LEFT: 10px" 
                              cellSpacing=0 cellPadding=0>
                        <TBODY>
                          <TR>
                            <TD><A 
                                href="#" target="_blank"><IMG 
                                src="images/t081029_2.jpg" alt=""  
                                width=138 
                                height=132 border="0"></A></TD>
                            <TD 
                                style="PADDING-RIGHT: 10px; PADDING-LEFT: 25px; PADDING-BOTTOM: 0px; PADDING-TOP: 15px" 
                                vAlign=top rowSpan=2><SPAN class=bodytitle>鲤·嫉妒</SPAN><BR>
                              <SPAN 
                                class=Read>诺贝尔文学奖得主帕慕克首次为一本中国图书题词,他说:“嫉妒是一种黑暗的情绪”。继《鲤·孤独》之后,张悦然又推出《鲤》系列主题书的第二本——《鲤·嫉妒》。在以80后一代的孤独体验为主题的《鲤·孤独》中,而到了《鲤·嫉妒》,诺贝尔奖得主帕慕克的加盟,更是体现出张悦然的号召力和国际化的视野。 </SPAN></TD>
                          </TR>
                          <TR>
                            <TD 
                                style="PADDING-RIGHT: 0px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px"><A 
                                class=pdname 
                                href="#">鲤·嫉妒</A><BR>
                              这是一本探讨人性深处中“嫉妒”情绪的图书<BR>
                              <SPAN class=priceB>34,2</SPAN><BR>
                              <SPAN class=price>(10%<IMG 
                                src="images/i_dc.gif">+10%<IMG 
                                src="images/i_p.gif">)</SPAN><BR>
                              <SPAN 
                                class=couponB></SPAN></TD>
                          </TR>
                        </TBODY>
                      </TABLE></TD>
                  </TR>
                </TBODY>
              </TABLE>
            </DIV>
          </DIV></TD>
        <TD vAlign=top width=187></TD>
      </TR>
    </TBODY>
  </TABLE>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 收缩导航菜单 滑动选项卡切换 文字收缩展开 图片滑动 图片收缩展开 文字滑动 滑动手风琴 滑动星星打分 滑动滑过 收缩收起展开

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到