支付宝里面的一个图片滚动改变网页内容,可以单独做图片展示用
<HTML><HEAD>
<META charset=gb2312><LINK media=all?
href="images/lf-index.css" charset=utf-8 rel=stylesheet>
<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
<BODY class=blank>
<DIV id=container>
<DIV class=content>
<DIV class=svc>
<DIV class=nav-left><A?
href="index.htm#"><EM>1</EM>/2</A> </DIV>
<DIV class=container>
<DIV class=content>
<UL>
<LI hideFocus?
href="payment.htm" seed="lf-index-payment"?
data-type="svc-04">我要付款</A> </LI>
<LI><A hideFocus?
href="gathering.htm" seed="lf-index-gathering"?
data-type="svc-03">我要收款</A> </LI>
<LI><A hideFocus?
href="jiaofei.htm" seed="lf-index-jiaofei"?
data-type="svc-01">水电煤</A> </LI>
<LI><A hideFocus?
href="tongxun.htm" seed="lf-index-tx"?
data-type="svc-10">通讯费</A> </LI>
<LI><A hideFocus?
href="credit.htm" seed="lf-index-credit"?
data-type="svc-02">信用卡还款</A> </LI>
<LI><A hideFocus?
href="aacollect.htm" seed="lf-index-aa"?
data-type="svc-08">AA收款</A> </LI>
<LI><A hideFocus?
href="index.htm" seed="lf-index-donate"?
data-type="svc-09">爱心捐赠</A> </LI>
<LI><A hideFocus?
href="mobile.htm" seed="lf-index-mobile"?
data-type="svc-15">手机费</A> </LI>
<LI><A hideFocus?
href="escore.htm" seed="lf-index-escore"?
data-type="svc-05">担保交易收款</A> </LI>
<LI><A hideFocus?
href="rent.htm" seed="lf-index-rent"?
data-type="svc-06">交房租</A> </LI>
<LI><A hideFocus?
href="cashgift.htm" seed="lf-index-cashgift"?
data-type="svc-07">送礼金</A> </LI>
<LI><A hideFocus?
href="insurance.htm" seed="lf-index-insurance"?
data-type="svc-16">买保险</A> </LI>
<LI><A hideFocus?
href="flight.htm" seed="lf-index-flight"?
data-type="svc-13">买机票</A> </LI>
<LI><A hideFocus?
href="hotel.htm" seed="lf-index-hotel"?
data-type="svc-11">订酒店</A> </LI>
<LI><A hideFocus?
href="game.htm" seed="lf-index-game"?
data-type="svc-14">游戏点卡</A> </LI>
<LI><A hideFocus?
href="lottery.htm" seed="lf-index-lottery"?
data-type="svc-12">买彩票</A> </LI></UL></DIV></DIV>
<DIV class=nav-right><A?
href="index.htm#"><EM>1</EM>/2</A> </DIV></DIV>
<DIV class=svc-content>
<DIV id=svc-01>
<DIV class=exp><A class=btn hideFocus?
href="jiaofei.htm"?
seed="lf-index-jiaofei-info">立即使用1</A>?
</DIV>
</DIV>
<DIV id=svc-02>
<DIV class=exp><A class=btn hideFocus?
href="credit.htm"?
seed="lf-index-credit-info">立即使用2</A> </DIV>
</DIV>
<DIV id=svc-03>
<DIV class=exp><A class=btn hideFocus?
href="gathering.htm"?
seed="lf-index-gathering-info">立即使用3</A> </DIV>
</DIV>
<DIV id=svc-04>
<DIV class=exp><A class=btn hideFocus?
href="payment.htm"?
seed="lf-index-payment-info">立即使用4</A> | <A?
href="lifePayment.html" target=_blank>查看演示</A> </DIV>
</DIV>
<DIV id=svc-05>
<DIV class=exp><A class=btn hideFocus?
href="escore.htm"?
seed="lf-index-escore-info">立即使用5</A> </DIV>
</DIV>
<DIV id=svc-06>
<DIV class=exp><A class=btn hideFocus?
href="rent.htm" seed="lf-index-rent-info">立即使用6</A> </DIV>
</DIV>
<DIV id=svc-07>
<DIV class=exp><A class=btn hideFocus?
href="cashgift.htm"?
seed="lf-index-cashgift-info">立即使用7</A> </DIV>
</DIV>
<DIV id=svc-08>
<DIV class=exp><A class=btn hideFocus?
href="aacollect.htm"?
seed="lf-index-aa-info">立即使用8</A> </DIV>
</DIV>
<DIV id=svc-09>
<DIV class=exp><A class=btn hideFocus?
href=""?
seed="lf-index-donate-info">立即使用9</A> </DIV>
</DIV>
<DIV id=svc-10>
<DIV class=exp><A class=btn hideFocus?
href="tongxun.htm" seed="lf-index-tx-info">立即使用10</A>?
</DIV>
</DIV>
<DIV id=svc-11>
<DIV class=exp><A class=btn hideFocus?
href="hotel.htm" seed="lf-index-hotel-info">立即使用11</A>?
</DIV>
</DIV>
<DIV id=svc-12>
<DIV class=exp><A class=btn hideFocus?
href="lottery.htm"?
seed="lf-index-lottery-info">立即使用12</A> </DIV>
</DIV>
<DIV id=svc-13>
<DIV class=exp><A class=btn hideFocus?
href="flight.htm"?
seed="lf-index-flight-info">立即使用13</A> </DIV>
</DIV>
<DIV id=svc-14>
<DIV class=exp><A class=btn hideFocus?
href="game.htm" seed="lf-index-game-info">立即使用</A>?
</DIV>
</DIV>
<DIV id=svc-15>
<DIV class=exp><A class=btn hideFocus?
href="mobile.htm"?
seed="lf-index-mobile-info">立即使用</A> </DIV>
</DIV>
<DIV id=svc-16>
<DIV class=exp><A class=btn hideFocus?
href="insurance.htm"?
seed="lf-index-insurance-info">立即使用</A> </DIV>
</DIV></DIV>
</DIV></DIV>
<SCRIPT src="images/arale.js" charset=utf-8></SCRIPT>
<SCRIPT>
E.onDOMReady(function(){
//初始化当前产品的内容，默认为全部隐藏
var currentLink = D.query('.svc .content li.current a');
if(currentLink.length >0){
var currentCont = currentLink[0].getAttribute('data-type');
D.removeClass(D.get(currentCont),'fn-hide');
}
//根据icon显示相应的信息
function showinfo(li){
var target = D.getChildren(li)[0].getAttribute('data-type');
D.addClass(D.query('.svc-content .item:not(.fn-hide)'),'fn-hide');
D.removeClass(D.get(target),'fn-hide');
D.removeClass(D.query('.svc .content li.current'),'current');
D.addClass(li,'current');
}
//点击icon显示相应内容
E.on(D.query('.svc .content li'),'mouseover',function(e){
E.preventDefault(e);
showinfo(this);
});
//点击左右的滑动效果
var index = 1;
var end = D.query('.svc .container')[0].offsetWidth;
var content = D.query('.svc .content')[0];
var list = D.query('li',content);
content.style.width = ( list[0].offsetWidth + 7 ) * list.length + 'px';
var left = new YAHOO.util.Anim(content,{left:{to:0}},1,YAHOO.util.Easing.easeOut);
var right = new YAHOO.util.Anim(content,{left:{to:-end}},1,YAHOO.util.Easing.easeOut);
E.on(D.query('.nav-left a'),'click',function(e){
E.preventDefault(e);?
if(index == 2){
index = 1;
left.animate();
D.query('.svc em').forEach(function(o){
o.innerHTML = index;
});?
showinfo(list[0]);
}
});
E.on(D.query('.nav-right a'),'click',function(e){
E.preventDefault(e);?
if(index == 1){
index = 2;
right.animate();
D.query('.svc em').forEach(function(o){
o.innerHTML = index;
});?
if(list.length >= 10){ //如果第二排的第一个存在，则选中第一个
showinfo(list[9]);
}
}
});
});?
</SCRIPT>
</BODY></HTML>
js和图片等请到演示地址下载?
原文地址:http://www.corange.cn/archives/2010/10/3699.html
