左右可伸缩滑动门效果
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<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>
<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"
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"
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>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>
4、书写css代码。
BODY { FONT-SIZE: 9pt; }
A:link { COLOR: #444444; TEXT-DECORATION: none }
A:visited { COLOR: #444444; TEXT-DECORATION: none }
A:active { COLOR: #444444; TEXT-DECORATION: none }
A:hover { COLOR: #3a85c7; TEXT-DECORATION: underline }
.price { FONT-WEIGHT: normal; FONT-SIZE: 9pt; COLOR: #eb5d07; LINE-HEIGHT: 120%; FONT-FAMILY: "verdana"; TEXT-DECORATION: none }
.priceB { FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #eb5d07; LINE-HEIGHT: 120%; FONT-FAMILY: "verdana"; TEXT-DECORATION: none }
.priceR { FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #0f8ef0; LINE-HEIGHT: 120%; FONT-FAMILY: "verdana"; TEXT-DECORATION: none }
.pdtitle { FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ce674b; FONT-FAMILY: "verdana" }
5、书写并添加js代码。
<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>
6、代码整体结构。
7、查看效果。
