<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title> 2013-5-30 </title>
<style>
body .button{float:left;text-align:center;line-height:20px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$.fn.stateOverlayButton = function( data, ready ){
var selector = this.selector
, iconBoxName = ".stateIcon" // 盒名
, iconName = ".stateIcon_icon" // 图标限大小定位置盒名
, iconImageBoxName = ".buttonState_icon" // 图标位移图片盒名
, bgName = ".stateIcon_bg" // 背景限定大小位置盒名
, bgImageBoxName = ".buttonState_bg"; // 背景位移图片盒名
var fn = arguments.callee;
if ( ready !== true ){
$(function(){
if (data.bg == null || data.bg.url == null){
data.bg = {url:''};
}
var styleSheet = $('<style> '+selector+'{cursor:pointer;}\n'+
selector+' '+iconBoxName+'{width:'+data.box.size[0]+'px;height:'+data.box.size[1]+'px;position:relative;display:inline-block;overflow:hidden;}\n'+
selector+' '+iconBoxName+' '+bgName+'{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}\n'+
selector+' '+iconBoxName+' '+bgName+' '+bgImageBoxName+'{background:url('+data.bg.url+') 0 0 no-repeat transparent;width:'+data.box.size[0]+'px;height:'+(data.box.size[1]*3)+'px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+data.bg.url+'");position:absolute;top:0;left:0;}\n'+
selector+' '+iconBoxName+' '+iconName+'{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}\n'+
selector+' '+iconBoxName+' '+iconName+' '+iconImageBoxName+'{background:url('+data.icon.url+') 0 0 no-repeat transparent;width:'+data.icon.pngSize[0]+'px;height:'+data.icon.pngSize[1]+'px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+data.icon.url+'");position:absolute;top:0;left:0;}</style>');
$("head").append(styleSheet);
$(selector).stateOverlayButton(data, true);
});
return;
}
var buttonSize = { width:data.box.size[0], height:data.box.size[1] }; // 大小
var parent = this; // 事件响应元素
if ( parent.length > 1 ){
parent.each(function(i,v){ $(v).stateOverlayButton(data, true) });
return;
}
var template = '<div class="'+bgName.substr(1)+'"><div class="'+bgImageBoxName.substr(1)+'"></div></div><div class="'+iconName.substr(1)+'"><div class="'+iconImageBoxName.substr(1)+'"></div></div>'; // html
var iconGridSize = data.icon.gridSize
, iconGridRowSize = data.icon.rowSize
, iconOffset,iconIndex=0;
var eventObject = parent; // 事件容器
var buttonRoot // 图标窗口
if ( eventObject.is( iconBoxName ) ){
buttonRoot = eventObject;
}else{
buttonRoot = eventObject.find(iconBoxName);
}
if ( buttonRoot == null || buttonRoot.length == 0 ){ // 如果没有找到相应的盒名，则不要继续
return;
}
buttonRoot.append(template);
iconIndex = parseInt(buttonRoot.attr("index")); // 图标所有索引
iconOffset = [( ( iconGridSize - buttonSize.width ) / -2 ) - ( iconIndex % iconGridRowSize * iconGridSize ),
( ( iconGridSize - buttonSize.height ) / -2 ) - Math.floor( iconIndex / iconGridRowSize )];
var bg = buttonRoot.find( bgImageBoxName+":eq(0)" ); // 底图，使用css sprite
var icon = buttonRoot.find( iconImageBoxName+":eq(0)" );
icon.css( {left:iconOffset[0]+"px",top:iconOffset[1]+"px"} );
eventObject.on({
mouseenter: function(e){
bg.css("top", "-"+buttonSize.height+"px");
},
mouseleave: function(e){
bg.css("top", "0");
},
mousedown: function(e){
bg.css("top", "-"+(buttonSize.height*2)+"px");
icon.css({left:iconOffset[0]+1+"px",top:iconOffset[1]+1+"px"});
},
mouseup: function(e){
bg.css("top", "-"+buttonSize.height+"px");
icon.css({left:iconOffset[0]+"px",top:iconOffset[1]+"px"});
}
});
if (data.click){
eventObject.on("click",data.click);
}
};
$(".button").stateOverlayButton(
{
box :{ size: [59, 59] }, // 图片按钮尺寸
icon:{ url: "iconTest.png", pngSize: [2000, 3000], gridSize: 100, rowSize: 10 }, // url:icon图片，pngSize:图片大小，gridSize:图片中一格的大小，rowSize:一行有多少个图标
bg :{ url: "icon_bg.png" }, // 底图图片，可选
click : function(e){alert(e.handleObj.handler);} // 点击事件，可选
}
);
</script>
</head>
<body bgcolor="#ffffee">
<div class="button"><div class="stateIcon" index="2"></div><br />标题1</div>
<div class="button"><div class="stateIcon" index="0"></div><br />标题2</div>
<div class="button"><div class="stateIcon" index="1"></div><br />标题3</div>
</body>
</html>
- 1
- 2
前往页