首先css：
左边图片设置关键css属性（其他属性你自己补充）：
①透明度：filter: Alpha(Opacity=50)opacity:0.5兼容火狐和IE，
②Z轴顺序（要小于右边图像）：z-index: 1也可以不设置；
③定位，固定大小：position: relative(或absolute)left: 100pxtop:100pxwidth:100pxheight:80px
右边图片设置关键css属性（其他属性你自己补充）：
①Z轴顺序（要保证大于左边图像的Z轴顺序）：z-index: 2
②定位，固定大小：position: relative(或absolute)left: 40pxtop:100pxwidth:100pxheight:80px
js实现的话就稍微复杂一点，如果你懂jQuery也许还能容易点，所以就不写了，太多代码，
因为css就可以解决，那么你就用css实现吧。
至于你是否要实现矩形图像变成梯形图片，我肯定的说也是可以做到的，
就比如：flip.js，这是个翻牌效果，他在翻牌的时候就是矩形到梯形，梯形回矩形。
首先你的搭建你的HTML结构：如以下代码，运动的对象就是你ID为wrapper下的第一个子元素,没法谁叫你用的框架呢。当然同学们也可以自行扩展..引完js，搭建好结构以后然后再贴入如下脚本functionloaded(){pullDownEl=document.getElementById('pullDown')pullDownOffset=pullDownEl.offsetHeightpullUpEl=document.getElementById('pullUp')pullUpOffset=pullUpEl.offsetHeightmyScroll=newiScroll('wrapper',{useTransition:true,topOffset:pullDownOffset,onRefresh:function(){if(pullDownEl.className.match('loading')){pullDownEl.className=''pullDownEl.querySelector('.pullDownLabel').innerHTML='下拉刷新'}elseif(pullUpEl.className.match('loading')){pullUpEl.className=''pullUpEl.querySelector('.pullUpLabel').innerHTML='上拉加载'}},onScrollMove:function(){if(this.y>5&&!pullDownEl.className.match('flip')){pullDownEl.className='flip'pullDownEl.querySelector('.pullDownLabel').innerHTML='松开刷新'this.minScrollY=0}elseif(this.y(this.maxScrollY+10)&&pullUpEl.className.match('flip')){pullUpEl.className=''pullUpEl.querySelector('.pullUpLabel').innerHTML='上拉加载'this.maxScrollY=pullUpOffset}},onScrollEnd:function(){if(pullDownEl.className.match('flip')){pullDownEl.className='loading'pullDownEl.querySelector('.pullDownLabel').innerHTML='加载中'pullDownAction()//Executecustomfunction(ajaxcall?)}elseif(pullUpEl.className.match('flip')){pullUpEl.className='loading'pullUpEl.querySelector('.pullUpLabel').innerHTML='加载中'pullUpAction()//Executecustomfunction(ajaxcall?)}}})setTimeout(function(){document.getElementById('wrapper').style.left='0'},800)}document.addEventListener('touchmove',function(e){e.preventDefault()},false)document.addEventListener('DOMContentLoaded',function(){setTimeout(loaded,200)},false)准备就绪后就应该执行了functionpullDownAction(){//下拉刷新window.location.reload()}vari=2//初始化页码为2functionpullUpAction(){上拉加载varpage=i++//每上拉一次页码加一次（就比如下一页下一页）Ajax(page)//运行ajax把2传过去告诉后台我上拉一次后台要加一页数据（当然这个具体传什么还得跟后台配合）myScroll.refresh()//<--Simulatenetworkcongestion,removesetTimeoutfromproduction!}functionAjax(page){//ajax后台交互$.ajax({type:"post",dataType:"JSON",url:"/installerAjax",//你请求的地址data:{'page':page//传过去的页码},success:function(data){data=eval(data.clientList)if(data.length){//如果后台传过来有数据执行如下操作，没有就执行else告诉用户没有内容呢加载数据。。。}}else{$('.pullUpLabel').html('亲，没有内容了！')}},error:function(){}})}
