自己写的一个png图片按钮效果，用csssprite，支持ie6资源-CSDN文库

共3个文件

png：2个

html：1个

4星 · 超过85%的资源需积分: 16 147 浏览量 2013-05-30 20:20:40 上传评论收藏 14KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

stateOverlayButton.rar （3个子文件）

stateOverlayButton

iconBehavior.html 5KB

icon_bg.png 4KB

iconTest.png 10KB

<!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>

评论收藏

内容反馈