一个png图片按钮效果，用css sprite，支持ie6

最新推荐文章于 2021-03-18 14:58:49 发布
最新推荐文章于 2021-03-18 14:58:49 发布
阅读量1.3k 收藏
点赞数
分类专栏： Web Js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/counterm/article/details/8995917
版权
Js 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
Web
7 篇文章 0 订阅
订阅专栏

一般鼠标状态三种：对应静止，鼠标经过，鼠标点击。我们都会用不同的图片去表示。

而一般背景又会用图片或渐变，那么按钮状态的图片我们又要用到透明的图片，有gif和png，很明显png能显示更多样化的效果。


为了迎合三种状态、png与ie6的问题、支持css sprite、及按钮还有自己的不同状态底图，我需要脚本的支持。于是：


QQ云下载


好了，现在只需要做的就是把icon图标填充完，然后在body写上自己的button html代码，标上想要的 图片 索引名 index，就可以。


/**
 * 2013-5-31
 * 1. 添加参数预设，可忽略 icon.pngSize，icon.gridSize，icon.rowSize
 * 2. 添加button参数，设为false则不响应鼠标。
 * 3. bg.url为空，不会添加相应的css代码。
 * 4. 添加返回当前对象
 * 5. 修复　如果 当前jq对象就是".stateIcon"元素的时候，样式名出错的问题
 * 6. 修复 icon top 计算上的错误
 */

<!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( setting, ready ){
	//数据初始化
	var defaultSetting = {
			button:true,
			box:{size:[50,50]},
			icon:{
				url:"",
				pngSize:[99999,99999], 
				gridSize:100, 
				rowSize:10
				},
			bg:{
				url:""
				}
	};
	setting = $.extend(true, defaultSetting, setting);
	var selector = this.selector
	, iconBoxName = ".stateIcon"	// 盒名
	, iconName = ".stateIcon_icon"	// 图标限大小定位置盒名
	, iconImageBoxName = ".buttonState_icon"	// 图标位移图片盒名
	, bgName = ".stateIcon_bg"		// 背景限定大小位置盒名
	, bgImageBoxName = ".buttonState_bg";		// 背景位移图片盒名
	if ( ready !== true ){
		$(function(){
			var css0 = selector;
			if (selector.indexOf(iconBoxName) == -1){
				css0 += ' ' + iconBoxName;
			}
			var styleSheet = '<style>'+
				'  '+css0+'{width:'+setting.box.size[0]+'px;height:'+setting.box.size[1]+'px;position:relative;}\n'+
				'  '+css0+' '+iconName+'{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}\n'+
				'  '+css0+' '+iconName+' '+iconImageBoxName+'{background:url('+setting.icon.url+') 0 0 no-repeat transparent;width:'+setting.icon.pngSize[0]+'px;height:'+setting.icon.pngSize[1]+'px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+setting.icon.url+'");position:absolute;top:0;left:0;}\n';
			if (setting.bg.url){
				styleSheet += '  '+css0+' '+bgName+'{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}\n'+
				'  '+css0+' '+bgName+' '+bgImageBoxName+'{background:url('+setting.bg.url+') 0 0 no-repeat transparent;width:'+setting.box.size[0]+'px;height:'+(setting.box.size[1]*3)+'px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+setting.bg.url+'");position:absolute;top:0;left:0;}\n';
			}
			styleSheet += '</style>';
			
			$("head").append($(styleSheet));
			$(selector).stateOverlayButton(setting, true);
		});
		return this;
	}
	var parent = this;		// 事件响应元素
	if ( parent.length > 1 ){
		parent.each(function(i,v){ $(v).stateOverlayButton(setting, 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 = setting.icon.gridSize,iconGridRowSize = setting.icon.rowSize,iconOffset,iconIndex=0;
	var _parent = parent;									// 事件容器
	var _iconRoot;									// 图标窗口
	if ( _parent.is( iconBoxName ) ){
		_iconRoot = _parent;
	}else{
		_iconRoot = _parent.find(iconBoxName);
	}

	if ( _iconRoot == null || _iconRoot.length == 0 ){	// 如果没有找到相应的盒名，则不要继续
		return;
	}
	_iconRoot.append(template);
	iconIndex = parseInt(_iconRoot.attr("index"));				// 图标所有索引
	var _size = { width:setting.box.size[0], height:setting.box.size[1] };	// 大小
	iconOffset = [( ( iconGridSize - _size.width ) / -2 ) - ( iconIndex % iconGridRowSize * iconGridSize ),
			( ( iconGridSize - _size.height ) / -2 ) - Math.floor( iconIndex / iconGridRowSize ) * iconGridSize];
	var _bg = _iconRoot.find( bgImageBoxName+":eq(0)" );				// 底图，使用css sprite
	var _icon = _iconRoot.find( iconImageBoxName+":eq(0)" );
	_icon.css( {left:iconOffset[0]+"px",top:iconOffset[1]+"px"} );
	if (setting.button === true){
		_parent.on({
			mouseenter: function(e){
				_bg.css("top", "-"+_size.height+"px");
			},
			mouseleave: function(e){
				_bg.css("top", "0");
			},
			mousedown: function(e){
				_bg.css("top", "-"+(_size.height*2)+"px");
				_icon.css({left:iconOffset[0]+1+"px",top:iconOffset[1]+1+"px"});
			},
			mouseup: function(e){
				_bg.css("top", "-"+_size.height+"px");
				_icon.css({left:iconOffset[0]+"px",top:iconOffset[1]+"px"});
			}
		});
		if (setting.click){
			_parent.on("click",setting.click);
		}
	}
};

$.fn.stateOverlayButton=function(setting,ready){var defaultSetting={button:true,box:{size:[50,50]},icon:{url:"",pngSize:[99999,99999],gridSize:100,rowSize:10},bg:{url:""}};setting=$.extend(true,defaultSetting,setting);var selector=this.selector,iconBoxName=".stateIcon",iconName=".stateIcon_icon",iconImageBoxName=".buttonState_icon",bgName=".stateIcon_bg",bgImageBoxName=".buttonState_bg";if(ready!==true){$(function(){var css0=selector;if(selector.indexOf(iconBoxName)==-1){css0+=' '+iconBoxName}var styleSheet='<style>  '+css0+'{width:'+setting.box.size[0]+'px;height:'+setting.box.size[1]+'px;position:relative;}\n  '+css0+' '+iconName+'{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}\n  '+css0+' '+iconName+' '+iconImageBoxName+'{background:url('+setting.icon.url+') 0 0 no-repeat transparent;width:'+setting.icon.pngSize[0]+'px;height:'+setting.icon.pngSize[1]+'px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+setting.icon.url+'");position:absolute;top:0;left:0;}\n';if(setting.bg.url){styleSheet+='  '+css0+' '+bgName+'{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}\n  '+css0+' '+bgName+' '+bgImageBoxName+'{background:url('+setting.bg.url+') 0 0 no-repeat transparent;width:'+setting.box.size[0]+'px;height:'+(setting.box.size[1]*3)+'px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+setting.bg.url+'");position:absolute;top:0;left:0;}\n'}styleSheet+='</style>';$("head").append($(styleSheet));$(selector).stateOverlayButton(setting,true)});return this}var parent=this;if(parent.length>1){parent.each(function(i,v){$(v).stateOverlayButton(setting,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>';var iconGridSize=setting.icon.gridSize,iconGridRowSize=setting.icon.rowSize,iconOffset,iconIndex=0;var _parent=parent;var _iconRoot;if(_parent.is(iconBoxName)){_iconRoot=_parent}else{_iconRoot=_parent.find(iconBoxName)}if(_iconRoot==null||_iconRoot.length==0){return}_iconRoot.append(template);iconIndex=parseInt(_iconRoot.attr("index"));var _size={width:setting.box.size[0],height:setting.box.size[1]};iconOffset=[((iconGridSize-_size.width)/-2)-(iconIndex%iconGridRowSize*iconGridSize),((iconGridSize-_size.height)/-2)-Math.floor(iconIndex/iconGridRowSize)*iconGridSize];var _bg=_iconRoot.find(bgImageBoxName+":eq(0)");var _icon=_iconRoot.find(iconImageBoxName+":eq(0)");_icon.css({left:iconOffset[0]+"px",top:iconOffset[1]+"px"});if(setting.button===true){_parent.on({mouseenter:function(e){_bg.css("top","-"+_size.height+"px")},mouseleave:function(e){_bg.css("top","0")},mousedown:function(e){_bg.css("top","-"+(_size.height*2)+"px");_icon.css({left:iconOffset[0]+1+"px",top:iconOffset[1]+1+"px"})},mouseup:function(e){_bg.css("top","-"+_size.height+"px");_icon.css({left:iconOffset[0]+"px",top:iconOffset[1]+"px"})}});if(setting.click){_parent.on("click",setting.click)}}};


$(".button").stateOverlayButton(
	{
		box	:{ size: [60, 60] },	// 图片按钮尺寸
		icon:{ url: "icon.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">

<style>.button{display:inline-block;width:60px;height:60px;}</style>
<a class="button" href="http://www.baidu.com" target="_blank"><div class="stateIcon" index="15"></div><br />标题</a>

<div class="button"><div class="stateIcon" index="2"></div><br />标题1</div>
<div class="button"><div class="stateIcon" index="10"></div><br />标题2</div>
<div class="button"><div class="stateIcon" index="19"></div><br />标题3</div>

</body>
</html>





icon_bg.png



icon.png



counterm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自己写的一个png图片按钮效果，用css sprite，支持ie6
05-30
一般鼠标状态三种：对应静止，鼠标经过，鼠标点击。我们都会用不同的图片去表示。 而一般背景又会用图片或渐变，那么按钮状态的图片我们又要用到透明的图片，有gif和png，很明显png能显示更多样化的效果。 迎合三种状态、png与ie6的问题、支持css sprite、及按钮还有自己的不同状态底图
web100余种按钮样式png图标
02-24
web100余种按钮样式png透明图标，单个文件，按钮用起来方便，web2.0按钮基本按钮都在里面。
CSS Sprite(css精灵)
_ACME_的博客
06-09 888
大白话的说就是把需要用的图片都整合到一张图片上，然后利用css进行精确的切割出想要的图片.这里的“切割”不是真的把它切成另一个图片，而是按需要只“显示”这个图片的某一部分.例子： 如图是需要切割的图片. 里面是四种按钮的图片,现在需要把它们分别切割出来 代码如下： css样式: <style> *{margin:0;padding:0;} ul,li{li
CSS Sprite图
aiolos1111的专栏
07-22 480
CSS Sprite图已经成为网站性能优化中必用的一个技巧了，我在这里总结一下CSS Sprite的用法。如有错误，欢迎指正。 CSS Sprite优点减少http请求数，加快页面加载速度 (因网页上的每一个图都会创建一个http请求) CSS Sprite使用场景页面上使用多个静态小图，而font icon又无法满足要求。 CSS Sprite缺点1、动态获取的图片不适合使用CSS Sprite
按钮上放置PNG图片
weixin_30634661的博客
03-14 275
头文件“ C/C++ code #pragma once class PngButton : public CButton { DECLARE_DYNAMIC(PngButton) public: enum BUTTON_STATE { BUTTON_ENABLE = 0, BUTTON_HOVER = 1, BUTTON_CLICK = 2, BUTTON_...
css-sprite使用详解
09-25
本文将详细介绍如何使用CSS Sprite，并通过一个具体的示例展示如何在项目中实现。 首先，你需要安装`css-sprite`工具，这是一个用于自动化生成雪碧图和对应的CSS样式的库。在命令行中，你可以通过npm（Node.js包...
用CSS实现的一张图完成的按钮效果
10-30
标题中的“用CSS实现的一张图完成的按钮效果”指的是使用CSS样式来设计网页中的按钮，通过一张包含多个状态（如鼠标悬停、点击等）的背景图片，利用背景定位技术来实现不同状态下按钮的视觉变化。这种方法可以减少...
IE6支持png图片透明
05-16
PNG是一种流行的位图格式，支持24位真彩色以及透明度，但在IE6中，PNG8和PNG24格式的图片透明效果往往不能正常显示，导致背景颜色或图像被不透明地呈现，这对网页设计师来说是一个挑战。 解决这个问题的方法有多种...
解决IE6中 PNG图片透明的终极方案-八种方案
03-16
标题“解决IE6中 PNG图片透明的终极方案-八种方案”和描述提到了一个在前端开发中常见的问题，即如何在Internet Explorer 6（简称IE6）中处理PNG图片的透明度。PNG格式的图片在其他现代浏览器中可以完美显示透明效果...
css 实现按钮样式使用背景图或者背景色，鼠标放上去按钮改变背景图或者背景色
zcc的博客
03-18 2621
1、css 实现按钮样式使用背景色，鼠标放上去按钮背景色，不需要过渡效果的把transition 两句去掉。 鼠标放上去： <button type="button" class="el-button"><span>确定</span></button> button{ outline: 0; } .el-button { padding: ..
CSS 调用png格式图标
tamink2013的博客
02-13 821
高端的玩意啊   参考一：http://blog.sina.com.cn/s/blog_afd14f360101ctbp.html     参考二：http://www.360doc.com/content/11/0913/21/2617151_148009630.shtml
css sprites技术将多个背景集成到一个png图片上css定位
jinyeweiyang的专栏
10-18 470
美国YAHOO在页面制作中所用到的图片整合技术，这样做虽然需要花一定的时间来有规则的合并这些ICON，栏目背景，图片按钮，以方便CSS调用，但是这样做绝对是合算的，而且是有必要的，YSlow也是极力推荐的。  实现方法：  首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;  浅谈CSS Sprit
jQuery EasyUI 用 body 做layout并且定宽居中时，绝对层定位居中问题
热门推荐
counterm的专栏
05-08 1万+
版本 1.3.2,1.3.3 我在应用jQuery EasyUI的 layout 的时候遇到了表单验证定位偏离的问题。 原因是我采用了限制宽度，不限制高度的 layout 模式， 就是把全屏的 layout，限制了宽度，然后body居中。 错位如下图。 这是提示信息条的html及css .validatebox-tip { position: abso
php 后台　PHPCMS　多语言网站解决方案
counterm的专栏
09-03 1万+
一般的建站都用php，其中phpcms感觉比较好用，列出一些自己的多语言经验。 1. 根栏目建立语言种类，如 cn，en等。 2. 根栏目分类中模板的“模板设置”，中的“栏目首页模板”，我们需要设定一个语言主页配置，名字如“category_index.html” 3. 模板目录“\phpcms\templates\en” 也按语言分类名字也区分开来。 4. 建立对应数量站点配置，
Flash AS3 获取当前域名
counterm的专栏
12-19 2536
import flash.net.LocalConnection; var localDomainLC:LocalConnection = new LocalConnection(); var myDomainName = localDomainLC.domain;
为 android, ipad, surface 写的swipe旋转菜单效果 没有整理, 将就着看
counterm的专栏
07-17 1136
为 android, ipad, surface 写的swipe旋转菜单效果, 代码很乱, 没有整理, 将就着看. 复制成html直接运行就可以. New Document jQuery(function(){ "use strict"; var c = { stylePosition: $("#navSliderBlockStyle"),
phpcms v9 整合 ckfinder
counterm的专栏
11-26 646
把ckfinder文件夹复制到 /statics/js/ 中 修改 /phpcms/libs/classes/form.class.php  editor 函数 改 $str = '';为 $str = ''; 改 $str .= "CKEDITOR.replace( '$textareaid',{";为 $str .= "var editor = CKEDI
css sprite
最新发布
07-27
CSS Sprite 是一种优化网页性能的技术，它通过将多个小图标或者图片合并成一张大图，并使用 CSS 的背景定位来显示所需的部分。这样可以减少 HTTP 请求次数，提高页面加载速度。 使用 CSS Sprite 的步骤如下： 1. 将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值