首先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,这是个翻牌效果,他在翻牌的时候就是矩形到梯形,梯形回矩形。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang=it dir=ltr xml:lang="it" xmlns=" http://www.w3.org/1999/xhtml"><head><title>css+js控制图片展示</title><style>body{ padding-right: 0pxpadding-left: 0pxpadding-bottom: 0pxmargin: 0pxfont: 70% verdana, geneva, arial, helvetica, sans-serifcolor: #000padding-top: 0pxtext-align: center } #outer{ padding-right: 0pxpadding-left: 0pxbackground: url(/images/bg-outer.gif) repeat-y center toppadding-bottom: 0pxmargin: 0px autowidth: 780pxpadding-top: 0pxtext-align: left } #wrapper{ background: #fffmargin: 0px 4px } #content{ padding-right: 0pxpadding-left: 0pxmin-height: 400pxpadding-bottom: 20pxmargin: 20px 30pxpadding-top: 0pxposition: relative } #focus{ border-right: #ccc 2px solidpadding-right: 0pxborder-top: #ccc 2px solidpadding-left: 0pxmin-height: 188pxbackground: url(/images/tile.gif) #eee repeat-y left toppadding-bottom: 10pxmargin: 25px 0px 30pxborder-left: #ccc 2px solidwidth: 100%padding-top: 15pxborder-bottom: #ccc 2px solidposition: relativeheight: 188px } #beni{ padding-right: 0pxpadding-left: 0pxleft: 0pxpadding-bottom: 0pxmargin: 0pxwidth: 250pxpadding-top: 0pxlist-style-type: noneposition: absolutetop: 15px } #beni li{ border-top: #fff 1px solidfont-size: 12pxfloat: leftwidth: 250pxtext-indent: 24pxline-height: 26px } #beni li.first{ border-top: 0px } #beni li a{ border-right: 0pxpadding-right: 0pxborder-top: 0pxdisplay: blockpadding-left: 0pxfont-weight: boldbackground: #eeepadding-bottom: 0pxmargin: 0pxborder-left: 0pxpadding-top: 0pxborder-bottom: 0pxtext-decoration: none } #beni li a:hover{ background: #f9f9f9 } #description{ width:420pxheight:188pxoverflow:hiddenfloat:rightmargin-right:15px} </STYLE><script>window.onload=function(){ var ele=document.getElementById("description")var w=ele.clientWidthvar n=20,t=20var timers=new Array(n)var c=document.getElementById("beni").getElementsByTagName("li")for(var i=0i<c.lengthi++){ c[i].index=ic[i].onmouseover=doSlide} c=nullfunction doSlide(){ var x=ele.scrollLeftvar d=this.index*w-xif(!d) returnfor(var i=0i<ni++)(function(){ if(timers[i]) clearTimeout(timers[i])var j=itimers[i]=setTimeout(function(){ ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)))},(i+1)*t)})()} } </script></head><body id=home><div id=outer><div id=wrapper><div id=content><div id=focus><ul id=beni><li class=first><a href="#">opere e oggetti d'arte</a></li><li><a href="#">architettzure</a></li><li><a href="#">reperti archeologici</a></li><li><a href="#">stampe e matrici di incisione</a></li><li><a href="#">fotografie</a></li><li><a href="#">beni etnoantropologici</a></li></ul><div id=description><img src=" http://www.lanrentuku.com/down/js/images/12447871590.jpg" /></div></div></div></div></div><p>查找更多代码,请访问:<a href=" http://www.lanrentuku.com " target="_blank">懒人图库</a></p></body></html>记得采纳啊
给你实现思路:
扑克翻页效果的原理在于利用眼睛观察物体的错觉,扑克翻页效果分解为两个步骤:
按扑克中轴线,以固定速率将img的width逐步变为0,这样扑克将消失;
动态替换img为扑克反面,以同样速率将img的width由0变为原宽度,完成翻页。
关键代码:
<div id="divad1" class="poker" style="text-align: center">
<a onclick="javascript:flipPoker()" href="#"><img src="front.jpg" id="picad1" height="200" border="0" style="width: 200pxdisplay: inline-block"></a></div>
给这个div内的img元素绑定函数flipPoker
function flipPoker( ){
var tar = $('#picad1')
var origin = tar.attr('src')
var back = "back.jpg" //扑克背面图片名称
//以中轴线渐变将图片隐藏,并瞬间替换img图片内容
tar.animate({width:'0px'},"fast",function(){tar.attr('src',origin)})
//立即渐变还原图片width
tar.animate({width:'200px'},"fast")
}
=============
上述代码用到了jQuery1.8.3 的animate函数
html代码里的样式"text-align:center"很关键,没有这个样式,图片将会自左向右渐变,加了样式之后就是按中轴线渐变了
如果还不行就参考这个页面的代码:
http://vwfc-dealer.cneln.net/eln3_asp/index.do