弹性菜单样式的图片展示代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是弹性菜单样式的图片展示代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>flash</title>
    <link rel="stylesheet" href="_common/css/main.css" type="text/css" media="all" />
    <link href="imageMenu.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="_common/js/mootools.js"></script>
    <script type="text/javascript" src="imageMenu.js"></script>
</head>
<body>

    <div id="container">
        <h2 class="imagemenu">image menu</h2>
        <div id="example">
            <div id="imageMenu">
                <ul>
                    <li class="landscapes"><a href="#" target="_blank">Landscapes</a></li>
                    <li class="people"><a href="#" target="_blank">People</a></li>
                    <li class="nature"><a href="#" target="_blank">Nature</a></li>
                    <li class="urban"><a href="#" target="_blank">Urban</a></li>
                    <li class="abstract"><a href="#" target="_blank">Abstract</a></li>
                </ul>
            </div>

            <script type="text/javascript">

                window.addEvent('domready', function () {
                    var myMenu = new ImageMenu($$('#imageMenu a'), { openWidth: 310, border: 2, onOpen: function (e, i) { window.open(e); } });
                });
            </script>
        </div>
    </div>
</body>
</html>

JS代码(imageMenu.js):

/**************************************************************Script:Image MenuVersion:2.2Authors:Samuel BirchDesc:Licence:Open Source MIT Licence**************************************************************/
var ImageMenu = new Class({
	getOptions:function(){
	return{
	onOpen:false,onClose:Class.empty,openWidth:200,transition:Fx.Transitions.quadOut,duration:400,open:null,border:0}
;
}
,initialize:function(elements,options){
	this.setOptions(this.getOptions(),options);
	this.elements = $$(elements);
	this.widths ={
}
;
	this.widths.closed = this.elements[0].getStyle('width').toInt();
	this.widths.openSelected = this.options.openWidth;
	this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))this.fx = new Fx.Elements(this.elements,{
	wait:false,duration:this.options.duration,transition:this.options.transition}
);
	this.elements.each(function(el,i){
	el.addEvent('mouseenter',function(e){
	new Event(e).stop();
	this.reset(i);
}
.bind(this));
	el.addEvent('mouseleave',function(e){
	new Event(e).stop();
	this.reset(this.options.open);
}
.bind(this));
	var obj = this;
	el.addEvent('click',function(e){
	if(obj.options.onOpen){
	new Event(e).stop();
	if(obj.options.open == i){
	obj.options.open = null;
	obj.options.onClose(this.href,i);
}
else{
	obj.options.open = i;
	obj.options.onOpen(this.href,i);
}
}
}
)}
.bind(this));
	if(this.options.open){
	if($type(this.options.open) == 'number'){
	this.reset(this.options.open);
}
else{
	this.elements.each(function(el,i){
	if(el.id == this.options.open){
	this.reset(i);
}
}
,this);
}
}
}
,reset:function(num){
	if($type(num) == 'number'){
	var width = this.widths.openOthers;
	if(num+1 == this.elements.length){
	width += this.options.border;
}
}
else{
	var width = this.widths.closed;
}
var obj ={
}
;
	this.elements.each(function(el,i){
	var w = width;
	if(i == this.elements.length-1){
	w = width+5}
obj[i] ={
	'width':w}
;
}
.bind(this));
	if($type(num) == 'number'){
	obj[num] ={
	'width':this.widths.openSelected}
;
}
this.fx.start(obj);
}
}
);
	ImageMenu.implement(new Options);
	ImageMenu.implement(new Events);
	/*************************************************************/

CSS代码(imageMenu.css):

/**************************************************************Image Menuv 2.2**************************************************************/
#imageMenu{position:relative;width:500px;height:200px;overflow:hidden;}
#imageMenu ul{list-style:none;margin:0px;display:block;height:200px;width:1000px;}
#imageMenu ul li{float:left;}
#imageMenu ul li a{text-indent:-1000px;background:#FFFFFF none repeat scroll 0%;border-right:2px solid #fff;cursor:pointer;display:block;overflow:hidden;width:98px;height:200px;}
#imageMenu ul li.landscapes a{background:url(images/landscapes.jpg) repeat scroll 0%;}
#imageMenu ul li.people a{background:url(images/people.jpg) repeat scroll 0%;}
#imageMenu ul li.nature a{background:url(images/nature.jpg) repeat scroll 0%;}
#imageMenu ul li.urban a{background:url(images/urban.jpg) repeat scroll 0%;}
#imageMenu ul li.abstract a{background:url(images/abstract.jpg) repeat scroll 0%;width:310px;}
.clear{clear:both;}
/*************************************************************/

附件:下载该文件资源,减少时间成本(增值服务)