付宝里面的一个图片滚动改变网页内容,可以单独做图片展示用
演示地址:http://www.corange.cn/demo/3699/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<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 class="first current"><A class="svc-payment icon1" hideFocus
href="payment.htm" seed="lf-index-payment"
data-type="svc-04">我要付款</A> </LI>
<LI><A class="svc-gathering icon1" hideFocus
href="gathering.htm" seed="lf-index-gathering"
data-type="svc-03">我要收款</A> </LI>
<LI><A class="svc-weg icon1" hideFocus
href="jiaofei.htm" seed="lf-index-jiaofei"
data-type="svc-01">水电煤</A> </LI>
<LI><A class="svc-tx icon1" hideFocus
href="tongxun.htm" seed="lf-index-tx"
data-type="svc-10">通讯费</A> </LI>
<LI><A class="svc-credit icon1" hideFocus
href="credit.htm" seed="lf-index-credit"
data-type="svc-02">信用卡还款</A> </LI>
<LI><A class="svc-aa icon1" hideFocus
href="aacollect.htm" seed="lf-index-aa"
data-type="svc-08">AA收款</A> </LI>
<LI><A class="svc-donate icon1" hideFocus
href="index.htm" seed="lf-index-donate"
data-type="svc-09">爱心捐赠</A> </LI>
<LI><A class="svc-mobile icon2" hideFocus
href="mobile.htm" seed="lf-index-mobile"
data-type="svc-15">手机费</A> </LI>
<LI><A class="svc-escore icon1" hideFocus
href="escore.htm" seed="lf-index-escore"
data-type="svc-05">担保交易收款</A> </LI>
<LI><A class="svc-rent icon1" hideFocus
href="rent.htm" seed="lf-index-rent"
data-type="svc-06">交房租</A> </LI>
<LI><A class="svc-cashgift icon1" hideFocus
href="cashgift.htm" seed="lf-index-cashgift"
data-type="svc-07">送礼金</A> </LI>
<LI><A class="svc-insurance icon2" hideFocus
href="insurance.htm" seed="lf-index-insurance"
data-type="svc-16">买保险</A> </LI>
<LI><A class="svc-flight icon2" hideFocus
href="flight.htm" seed="lf-index-flight"
data-type="svc-13">买机票</A> </LI>
<LI><A class="svc-hotel icon2" hideFocus
href="hotel.htm" seed="lf-index-hotel"
data-type="svc-11">订酒店</A> </LI>
<LI><A class="svc-game icon2" hideFocus
href="game.htm" seed="lf-index-game"
data-type="svc-14">游戏点卡</A> </LI>
<LI><A class="svc-lottery icon2" 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 class="item fn-hide" id=svc-01>
<DIV class=exp><A class=btn hideFocus
href="jiaofei.htm"
seed="lf-index-jiaofei-info">立即使用1</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-02>
<DIV class=exp><A class=btn hideFocus
href="credit.htm"
seed="lf-index-credit-info">立即使用2</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-03>
<DIV class=exp><A class=btn hideFocus
href="gathering.htm"
seed="lf-index-gathering-info">立即使用3</A> </DIV>
</DIV>
<DIV class="item fn-hide" 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 class="item fn-hide" id=svc-05>
<DIV class=exp><A class=btn hideFocus
href="escore.htm"
seed="lf-index-escore-info">立即使用5</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-06>
<DIV class=exp><A class=btn hideFocus
href="rent.htm" seed="lf-index-rent-info">立即使用6</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-07>
<DIV class=exp><A class=btn hideFocus
href="cashgift.htm"
seed="lf-index-cashgift-info">立即使用7</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-08>
<DIV class=exp><A class=btn hideFocus
href="aacollect.htm"
seed="lf-index-aa-info">立即使用8</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-09>
<DIV class=exp><A class=btn hideFocus
href=""
seed="lf-index-donate-info">立即使用9</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-10>
<DIV class=exp><A class=btn hideFocus
href="tongxun.htm" seed="lf-index-tx-info">立即使用10</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-11>
<DIV class=exp><A class=btn hideFocus
href="hotel.htm" seed="lf-index-hotel-info">立即使用11</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-12>
<DIV class=exp><A class=btn hideFocus
href="lottery.htm"
seed="lf-index-lottery-info">立即使用12</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-13>
<DIV class=exp><A class=btn hideFocus
href="flight.htm"
seed="lf-index-flight-info">立即使用13</A> </DIV>
</DIV>
<DIV class="item fn-hide" id=svc-14>
<DIV class=exp><A class=btn hideFocus
href="game.htm" seed="lf-index-game-info">立即使用</A>
</DIV>
</DIV>
<DIV class="item fn-hide" id=svc-15>
<DIV class=exp><A class=btn hideFocus
href="mobile.htm"
seed="lf-index-mobile-info">立即使用</A> </DIV>
</DIV>
<DIV class="item fn-hide" 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和图片等请到演示地址下载
相关推荐
阿里支付宝JavaScript图片滚动导航菜单
支付宝小程序，里面包括支付宝小程序唤起支付宝支付,简单的车型数据展示组件。
加载支付宝到你的网页上。加载支付宝到你的网页上。加载支付宝到你的网页上。加载支付宝到你的网页上。加载支付宝到你的网页上。加载支付宝到你的网页上。加载支付宝到你的网页上。加载支付宝到你的网页上。加载...
手机网页版支付宝支付demo， 导入myeclipse 即可使用 ，有问题可以咨询本人。
支付宝即时到账 SDK 简化版（含移动网页支付） 该项目精简和重构了官方的 SDK 开发包，将签名参数和验证返回合并在一个类里，仅一个文件，引入方便，调用简单。
支付宝手机网页支付，文档、demo及相关sdk
Java支付宝网页端支付Demo代码，喜欢的给好评哟
支付宝 微信 手机网页 app支付 即时到账 支付宝 微信 手机网页 app支付 即时到账支付宝 微信 手机网页 app支付 即时到账
ecshop支付宝手机网页支付插件 包含语言包
springboot支付宝网页支付 沙箱环境测试，测试环境运行ok！
第三方支付,支付宝网页调支付接口.基于idea工具的代码.
项目中的小需求,完成类似于支付宝余额的数字滚动效果,找了网上的一个小demo,再加上郭婶的关于属性动画的文章,整理一部分代码分享给有需要的人.
支付宝 微信 手机网页 app支付支付宝 微信 手机网页 app支付支付宝 微信 手机网页 app支付支付宝 微信 手机网页 app支付
支付宝手机网页支付接入与使用规则
C#获取支付宝用户信息，基于官方SDK写的一个小DEMO Auth_code = Request.QueryString["auth_code"]; if (string.IsNullOrEmpty(Auth_code)) { var url = string.Format(...
.netC#对接支付宝PC网页端支付实例，功能全面，订单查询，扫描支付备注完整
支付宝网页端和手机端支付封装类
石青支付宝推广大师是一款全自动的支付宝推广工具，包含支付宝帐号管理，手机号搜索，搜索加支付宝好友，手机通讯录加支付宝好友，支付宝...3、对使用中的一个导致系统关闭问题，做了修复； 石青支付宝推广大师截图
网页端唤起支付宝并加好友 要用到支付宝加好友接口，包括两个ID 一个支付宝ID（支付宝账号） 一个开发平台的ID 1 打开发送端文件js文件夹-开打copy.js 文件 找到url="alipays://platformapi/startapp?appId=...