pirobox图片弹窗插件js代码

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

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

以下是 pirobox图片弹窗插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pirobox_v.1.2 多功能图片弹窗插件</title>
<link href="css_pirobox/css.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css_pirobox/demo1/style.css" class="piro_style" media="screen" title="white" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.3, //background opacity
			slideShow : true, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
	});
});
</script>
</head>
<body>
<p style="text-align:center;margin:50px auto;">
<a style="color:#6C0;" href="index.html">index</a> | 
<a href="demo2.html">demo2</a> |
<a href="demo3.html">demo3</a> |
<a href="demo4.html">demo4</a> |
<a href="demo5.html">demo5</a> | 
</p>

<div style="margin:20px auto;width:700px; display:block;">
<div class="demo"><a href="images/big/img1_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img1_ss.jpg"/></a></div>
<div class="demo"><a href="images/xxx/img2_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img2_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img3_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img3_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img4_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img4_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img5_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img5_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img1_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img1_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img2_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img2_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img3_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img3_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img4_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img4_ss.jpg"  /></a></div>
<div class="demo"><a href="images/big/img5_m.jpg" class="pirobox_gall" title="内容"><img src="images/small/img5_ss.jpg"  /></a></div>
</div>
</body>
</html>

JS代码(pirobox.js):

/** Name:piroBox v.1.2.2* download by www.97zzw.com* Version:1.2.2*/
(function($){
	$.fn.piroBox = function(opt){
	opt = jQuery.extend({
	my_speed:null,close_speed:300,bg_alpha:0.5,close_all:'.piro_close,.piro_overlay',slideShow:null,slideSpeed:null}
,opt);
	function start_pirobox(){
	var corners = '<tr>'+ '<td colspan="3" class="pirobox_up"></td>'+ '</tr>'+ '<tr>'+ '<td class="t_l"></td>'+ '<td class="t_c"></td>'+ '<td class="t_r"></td>'+ '</tr>'+ '<tr>'+ '<td class="c_l"></td>'+ '<td class="c_c"><span><span></span></span><div></div></td>'+ '<td class="c_r"></td>'+ '</tr>'+ '<tr>'+ '<td class="b_l"></td>'+ '<td class="b_c"></td>'+ '<td class="b_r"></td>'+ '</tr>'+ '<tr>'+ '<td colspan="3" class="pirobox_down"></td>'+ '</tr>';
	var window_height = $(document).height();
	var bg_overlay = $(jQuery('<div class="piro_overlay"></div>').hide().css({
	'opacity':+opt.bg_alpha,'height':window_height+'px'}
));
	var main_cont = $(jQuery('<table class="pirobox_content" cellpadding="0" cellspacing="0"></table>'));
	var caption = $(jQuery('<div class="caption"></div>'));
	var piro_nav = $(jQuery('<div class="piro_nav"></div>'));
	var piro_close = $(jQuery('<a href="#close" class="piro_close" title="关闭"></a>'));
	var piro_play = $(jQuery('<a href="#play" class="play" title="播放"></a>'));
	var piro_stop = $(jQuery('<a href="#stop" class="stop" title="暂停"></a>'));
	var piro_prev = $(jQuery('<a href="#prev" class="piro_prev" title="previous"></a>'));
	var piro_next = $(jQuery('<a href="#next" class="piro_next" title="next"></a>'));
	$('body').append(bg_overlay).append(main_cont);
	main_cont.append(corners);
	$('.pirobox_up').append(piro_close);
	$('.pirobox_down').append(piro_nav);
	$('.pirobox_down').append(piro_play);
	piro_play.hide();
	$('.pirobox_down').append(piro_prev).append(piro_next);
	piro_nav.append(caption);
	var my_nav_w = piro_prev.width();
	main_cont.hide();
	var my_gall_classes = $("a[class^='pirobox']");
	var map = new Object();
	for (var i=0;
	i<my_gall_classes.length;
	i++){
	var it=$(my_gall_classes[i])map['a.'+it.attr('class')]=0;
}
var gall_settings = new Array();
	for (var key in map){
	gall_settings.push(key);
}
for (var i=0;
	i<gall_settings.length;
	i++){
	$(gall_settings[i]).each(function(rel){
	this.rel = rel+1+"/"+$(gall_settings[i]).length;
}
);
	var add_first = $(gall_settings[i]+':first').addClass('first');
	var add_last = $(gall_settings[i]+':last').addClass('last');
}
$(my_gall_classes).each(function(rev){
	this.rev = rev+0}
);
	var imgCache = $(my_gall_classes).each(function(){
	this.href}
);
	var hidden = $('body').append('<div id="imgCache" style="display:none"></div').children('#imgCache');
	$.each(imgCache,function (i,val){
	$('<div/>').css({
	'background':'url('+val+')'/*,'width':'600px','height':'200px'*/
}
).appendTo(hidden);
}
);
	var piro_gallery = $(my_gall_classes);
	$.fn.fixPNG = function(){
	return this.each(function (){
	var image = $(this).css('backgroundImage');
	if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)){
	image = RegExp.$1;
	$(this).css({
	'backgroundImage':'none','filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=" + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop':'scale') + ",src='" + image + "')"}
).each(function (){
	var position = $(this).css('position');
	if (position != 'absolute' && position != 'relative')$(this).css('position','relative');
}
);
}
}
);
}
;
	$.browser.msie6 =($.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent));
	if( $.browser.msie6 && !/MSIE 8\.0/i.test(window.navigator.userAgent)){
	$('.t_l,.t_c,.t_r,.c_l,.c_r,.b_l,.b_c,.b_r,a.piro_next,a.piro_prev,a.piro_prev_out,a.piro_next_out,.c_c,.piro_close,a.play,a.stop').fixPNG();
	var ie_w_h = $(document).height();
	bg_overlay.css('height',ie_w_h+ 'px');
}
if( $.browser.msie){
	opt.close_speed = 0;
}
$(window).resize(function(){
	var new_w_bg = $(document).height();
	bg_overlay.css({
	'visibility':'visible','height':+ new_w_bg +'px'}
);
}
);
	piro_prev.add(piro_next).bind('click',function(c){
	c.preventDefault();
	var image_count = parseInt($(piro_gallery).filter('.item').attr('rev'));
	var start = $(this).is('.piro_prev_out,.piro_prev') ? $(piro_gallery).eq(image_count - 1):$(piro_gallery).eq(image_count + 1);
	if(!start.size()){
	start = $(this).is('.piro_prev_out,.piro_prev') ? $(piro_gallery).eq($(piro_gallery).size() - 1):$(piro_gallery).eq(0);
}
start.click();
	piro_close.add(caption).add(piro_next).add(piro_prev).css('visibility','hidden');
}
);
	$(piro_gallery).each(function(array){
	var item = $(this);
	item.unbind();
	item.bind('click',function(c){
	c.preventDefault();
	piro_open(item.attr('href'));
	var this_url = item.attr('href');
	//var descr = item.children('span').html();
	var descr = item.attr('title');
	var number = item.attr('rel');
	if( descr == ""){
	caption.html('<p>'+ this_url+'<em class="number">' + number + '</em><a href='+ this_url +' class="link_to" target="_blank" title="查看原图"></a></p>');
}
else{
	caption.html('<p>'+ descr+'<em class="number">' + number + '</em><a href='+ this_url +' class="link_to" target="_blank" title="查看原图"></a></p>');
}
if(item.is('.last')){
	$('.number').css('text-decoration','underline');
}
else{
	$('.number').css('text-decoration','none');
}
if(item.is('.first')){
	piro_prev.hide();
	piro_next.show();
}
else{
	piro_next.add(piro_prev).show();
}
if(item.is('.last')){
	piro_prev.show();
	piro_next.hide();
	piro_play.css('width','0');
}
else{
	piro_play.css('width','40px');
}
if(item.is('.last') && item.is('.first') ){
	piro_prev.add(piro_next).hide();
	$('.number').hide();
	piro_play.remove();
}
$(piro_gallery).filter('.item').removeClass('item');
	item.addClass('item');
	$('.c_c').removeClass('unique');
}
);
}
);
	var piro_open = function(my_url){
	piro_play.add(piro_stop).hide();
	piro_close.add(caption).add(piro_next).add(piro_prev).css('visibility','hidden');
	if(main_cont.is(':visible')){
	$('.c_c div').children().fadeOut(300,function(){
	$('.c_c div').children().remove();
	load_img(my_url);
}
);
}
else{
	$('.c_c div').children().remove();
	main_cont.show();
	bg_overlay.fadeIn(300,function(){
	load_img(my_url);
}
);
}
}
var load_img = function(my_url){
	if(main_cont.is('.loading')){
	return;
}
main_cont.addClass('loading');
	var img = new Image();
	img.onerror = function (){
	var main_cont_h = $(main_cont).height();
	main_cont.css({
	marginTop:parseInt($(document).scrollTop())-(main_cont_h/1.9)}
);
	$('.c_c div').append('<p class="err_mess">原图不存在或路径不对:&nbsp;
	<a href="#close" class="close_pirobox">点击关闭</a></p>');
	$('.close_pirobox').bind('click',function(c){
	c.preventDefault();
	piro_close.add(bg_overlay).add(main_cont).add(caption).add(piro_next).add(piro_prev).hide(0,function(){
	img.src = '';
}
);
	main_cont.removeClass('loading');
}
);
}
img.onload = function(){
	var imgH = img.height;
	var imgW = img.width;
	var main_cont_h = $(main_cont).height();
	var w_H = $(window).height();
	var w_W = $(window).width();
	$(img).height(imgH).width(imgW).hide();
	$('.c_c div').animate({
	height:imgH+'px',width:imgW+'px'}
,opt.my_speed);
	var fix = imgH/w_H*2.3;
	if(w_H < imgH){
	h_fix = fix;
}
else{
	h_fix = 2;
}
main_cont.animate({
	height:(imgH+40) + 'px',width:(imgW+40) + 'px',marginLeft:'-' +((imgW)/2+20) +'px',marginTop:parseInt($(document).scrollTop())-(imgH/h_fix)}
,opt.my_speed,function(){
	$('.piro_nav,.caption').css({
	width:(imgW)+'px','margin-bottom':'10px'}
);
	$('.piro_nav').css('margin-left','-'+(imgW)/2+'px');
	var caption_height = caption.height();
	$('.c_c div').append(img);
	piro_close.css('display','block');
	piro_next.add(piro_prev).add(piro_close).css('visibility','visible');
	caption.css({
	'visibility':'visible','display':'block','opacity':'0.8','overflow':'hidden'}
);
	main_cont.hover(function(){
	caption.stop().fadeTo(200,0.8);
}
,function(){
	caption.stop().fadeTo(200,0);
}
);
	$(img).fadeIn(300);
	main_cont.removeClass('loading');
	if(opt.slideShow === true){
	piro_play.add(piro_stop).show();
}
else{
	piro_play.add(piro_stop).hide();
}
}
);
}
img.src = my_url;
	$('html').bind("keyup",function (c){
	if(c.keyCode == 27){
	c.preventDefault();
	if($(img).is(':visible') || $('.c_c>div>p>a').is('.close_pirobox')){
	$(piro_gallery).removeClass('slideshow').removeClass('item');
	piro_close.add(bg_overlay).add(main_cont).add(caption).add(piro_next).add(piro_prev).hide(0,function(){
	img.src = '';
}
);
	main_cont.removeClass('loading');
	clearTimeout(timer);
	$(piro_gallery).children().removeAttr('class');
	$('.stop').remove();
	$('.c_c').append(piro_play);
	$('.sc_menu').css('display','none');
	$('ul.sc_menu li a').removeClass('img_active').css('opacity','0.4');
	piro_next.add(piro_prev).show().css({
	'top':'50%'}
);
	$(piro_gallery).children().fadeTo(100,1);
}
}
}
);
	$('html').bind("keyup",function(e){
	if ($('.item').is('.first')){
}
else if(e.keyCode == 37){
	e.preventDefault();
	if($(img).is(':visible')){
	clearTimeout(timer);
	$(piro_gallery).children().removeAttr('class');
	$('.stop').remove();
	$('.c_c').append(piro_play);
	piro_prev.click();
}
}
}
);
	$('html').bind("keyup",function(z){
	if ($('.item').is('.last')){
}
else if(z.keyCode == 39){
	z.preventDefault();
	if($(img).is(':visible')){
	clearTimeout(timer);
	$(piro_gallery).children().removeAttr('class');
	$('.stop').remove();
	$('.c_c').append(piro_play);
	piro_next.click();
	//alert('click')}
}
}
);
	var win_h = $(window).height();
	piro_stop.bind('click',function(x){
	x.preventDefault();
	clearTimeout(timer);
	$(piro_gallery).removeClass('slideshow');
	$('.stop').remove();
	$('.pirobox_down').append(piro_play);
	piro_next.add(piro_prev).css('width',my_nav_w+'px');
}
);
	piro_play.bind('click',function(w){
	w.preventDefault();
	clearTimeout(timer);
	if($(img).is(':visible')){
	$(piro_gallery).addClass('slideshow');
	$('.play').remove();
	$('.pirobox_down').append(piro_stop);
}
piro_next.add(piro_prev).css({
	'width':'0px'}
);
	return slideshow();
}
);
	$(opt.close_all).bind('click',function(c){
	$(piro_gallery).removeClass('slideshow');
	clearTimeout(timer);
	if($(img).is(':visible')){
	c.preventDefault();
	piro_close.add(bg_overlay).add(main_cont).add(caption).add(piro_next).add(piro_prev).hide(0,function(){
	img.src = '';
}
);
	main_cont.removeClass('loading');
	$(piro_gallery).removeClass('slideshow');
	piro_next.add(piro_prev).css('width',my_nav_w+'px').hide();
	$('.stop').remove();
	$('.pirobox_down').append(piro_play);
	piro_play.hide();
}
}
);
	if(opt.slideShow === true){
	function slideshow(){
	if( $(piro_gallery).filter('.item').is('.last')){
	clearTimeout(timer);
	$(piro_gallery).removeClass('slideshow');
	$('.stop').remove();
	$('.pirobox_down').append(piro_play);
	piro_next.add(piro_prev).css('width',my_nav_w+'px');
}
else if($(piro_gallery).is('.slideshow' ) && $(img).is(':visible')){
	clearTimeout(timer);
	piro_next.click();
}
}
var timer = setInterval(slideshow,opt.slideSpeed*1000 );
}
}
}
start_pirobox();
}
}
)(jQuery);

CSS代码(css.css):

body{background:white;margin:0;padding:0;font-family:Trebuchet MS,Arial;font-size:80%}
img{margin:0;padding:0;border:none;}
h1{padding:0;margin:0;text-indent:-999em;}
.logo{position:absolute;left:0;top:68px;background:url(logo.jpg) center no-repeat;height:133px;width:100%;display:block;}
.logo a{position:absolute;left:50%;top:0;height:133px;width:300px;margin:0 0 0 -151px;background:none;display:block;}
/*h2,h3,h4{text-shadow:0px 0 4px #222;}
*/
h2{float:left;margin:5px 0 5px 20px!important;margin:5px 0 5px 15px;padding:0 10px 5px 7px;width:840px;font-weight:normal;font-size:18px;color:#666;background:url(shad_bg.jpg) left bottom no-repeat;}
h3{float:left;width:840px;font-weight:normal;font-size:16px;color:#666;margin:5px 0 5px 20px!important;margin:5px 0 5px 15px;padding:0 10px 5px 7px;background:url(shad_bg.jpg) left bottom no-repeat;}
h4{margin:0;padding:0;}
a{color:#cc0505;font-weight:700;text-decoration:none;outline:none;}
a:hover{color:#777;text-decoration:none;outline:none;}
.main{background:#fff url(bg.jpg) center repeat-y;position:absolute;width:100%;}
.main_content{margin:0 auto;padding:198px 0 0 0!important;padding:198px 0 0 0;width:900px;display:block;}
.main_content_demo{margin:0 auto;padding:0;width:900px;display:block;}
.header{position:absolute;left:50%;top:0;margin:0 0 0 -455px;width:910px;height:68px;background:url(header.jpg) center top no-repeat;display:block;}
.switch_ul{float:left;width:524px;height:68px;display:block;margin:0 0 0 191px!important;margin:0 0 0 96px;display:block;background:url(header_ul.jpg) center top no-repeat;}
.switch_ul li{float:left;}
.switch_ul li a{float:left;line-height:64px;width:131px;height:68px;display:block;font-size:14px;text-align:center;color:#666;text-transform:uppercase;font-weight:normal;letter-spacing:1px;}
.switch_ul li a:hover{color:#999;}
.switch_ul li.home a:hover{background:url(header_h.jpg) 1px 0 no-repeat;}
.switch_ul li.download a:hover{background:url(header_h.jpg) -130px 0 no-repeat;}
.switch_ul li.contact a:hover{background:url(header_h.jpg) -261px 0 no-repeat;}
.switch_ul li.pirobox_1 a:hover{background:url(header_h.jpg) -392px 0 no-repeat;}
.description{float:left;font-size:12px;width:850px;border-left:1px solid #ccc;margin:5px 0 5px 15px!important;margin:5px 0 5px 10px;padding:5px;}
.details{float:left;margin:5px 0 5px 20px!important;margin:5px 0 5px 15px;width:850px;background:url(li.jpg) repeat-y;}
.details li{margin:0;padding:4px 3px 2px 15px;background:url(li_descr.jpg) center left no-repeat;border-bottom:2px solid white;}
.code{float:left;margin:15px 0 10px 28px!important;margin:15px 0 10px 14px;width:832px;background:url(code.jpg) left bottom no-repeat;padding:10px 0 10px 10px;font-size:12px;display:block;border-top:1px solid #ededed;}
a.active_switch,a:hover.active_switch{color:black;text-decoration:line-through;cursor:default;}
.highlites{color:red;font-size:11px;}
.expl{float:left;width:820px;margin:5px 0 5px 20px!important;margin:5px 0 5px 15px;padding:5px;color:black;font-weight:300;font-size:11px;background:url(li.jpg) repeat-y;border-left:2px solid #ccc;}
.select{position:absolute;width:132px;text-align:center;left:50%;top:0;margin:640px 0 0 270px;color:#999;display:block!important;display:none;}
.down_arr{position:absolute;width:20px;height:20px;right:7px;top:3px;cursor:pointer;}
.select_down{float:left;width:132px;height:23px;background:url(select.png) center bottom no-repeat;text-align:left;line-height:21px;text-indent:20px;}
.select_up{float:left;width:132px;height:23px;background:url(select_up.jpg) center bottom no-repeat;text-align:left;line-height:21px;text-indent:20px;}
.select dd{float:left;width:132px;height:20px;background:url(bg_select_li.jpg) center bottom;font-size:11px;display:block;}
.select dd.last{float:left;width:132px;height:11px;background:url(last.jpg) center bottom no-repeat;}
.top a{position:fixed!important;position:absolute;left:50%;margin:0 0 0 422px;bottom:10px;width:23px;height:14px;display:block;background:#444;text-align:center;color:white;font-size:10px;padding:2px;}
.contact_form{width:840px;float:left;margin:10px 0 20px 20px!important;margin:5px 0 10px 10px;}
.contact_form ul{}
.contact_form li{margin:0;padding:0;text-transform:none;}
.contact_form legend{border:none;text-transform:uppercase;color:#999;font-size:16px;}
.contact_form fieldset{border:1px solid #ededed;margin:0;padding:8px;}
.input{width:410px;background:url(form.jpg) bottom;color:#999;border:1px solid #ccc;font-family:Trebuchet MS,Arial;font-size:16px;margin:10px 0 0 0;padding:5px 0 5px 4px;}
.textarea{width:830px;margin:10px 0 0 0;height:150px;border:1px solid #ccc;background:url(form.jpg) bottom;color:#999;font-family:Trebuchet MS,Arial;font-size:16px;padding:5px 0 0 4px;}
#load_img{display:none;line-height:26px;}
.error{border:1px solid #999;color:black;}
#result{margin:0 0 0 10px;}
.fail{color:red;font-size:16px;}
.success{color:black;font-size:16px;}
.submitbutton{float:left;width:400px;}
.submit{width:160px;background:url(form.jpg) bottom;border:1px solid #ccc;color:#999;font-family:Trebuchet MS,Arial;font-size:14px;padding:4px;margin:10px 0 0 0;}
.required{position:absolute;width:90px;height:16px;background:#333;color:white;display:block;padding:0 0 1px 0;font-size:12px;margin:13px 0 0 -95px;display:none;text-align:center;}
/*::::::::::::::COMMENTS:::::::::::::::*/
.numero_comm{float:left;color:#999;position:relative;background:url(date.jpg) no-repeat;height:24px;line-height:24px;width:28px;text-align:center;font-size:14px;font-weight:normal;margin:10px 0 -10px 15px!important;margin:10px 0 -10px 8px;padding:0;}
.numero_my_comm{float:left;color:#000;position:relative;background:url(mydate.jpg) no-repeat;height:24px;line-height:24px;width:28px;text-align:center;font-size:14px;font-weight:normal;margin:10px 0 -10px 15px!important;margin:10px 0 -10px 8px;padding:0;}
.data{font-size:10px;padding:0;color:#b6b6b6;}
.mydata{font-size:10px;padding:0;color:#222;}
.viewmessage{float:left;width:840px;margin:0 0 10px 20px!important;margin:0 0 10px 13px;border:1px solid #ccc;background:url(form.jpg) bottom;color:#999;padding:12px 5px 5px 5px;}
.viewmessage pre{font-family:Trebuchet MS,Arial;font-size:12px;width:840px;display:block;overflow:auto;white-space:pre-wrap;/* css-3 */
white-space:-moz-pre-wrap;/* Mozilla,since 1999 */
white-space:-pre-wrap;/* Opera 4-6 */
white-space:-o-pre-wrap;/* Opera 7 */
word-wrap:break-word;/* Internet Explorer 5.5+ */
}
.viewmymessage{float:left;width:840px;margin:0 0 10px 20px!important;margin:0 0 10px 13px;border:1px solid #adacad;background:url(myform.jpg) bottom;color:#000;padding:12px 5px 5px 5px;}
.viewmymessage pre{font-family:Trebuchet MS,Arial;font-size:12px;width:840px;display:block;overflow:auto;white-space:pre-wrap;/* css-3 */
white-space:-moz-pre-wrap;/* Mozilla,since 1999 */
white-space:-pre-wrap;/* Opera 4-6 */
white-space:-o-pre-wrap;/* Opera 7 */
word-wrap:break-word;/* Internet Explorer 5.5+ */
}
.demo a{float:left;margin:0;padding:0;margin:5px 0px 5px 19px!important;margin:5px 10px 5px 10px;display:block;border:3px solid #efefef;}
.demo a:hover{border:3px solid #fff}
.demo a img{float:left;margin:0;padding:0;margin:0;background:url(bg_tms.jpg) no-repeat;}
ul,li,dl,dt,dd{list-style-type:none;margin:0;padding:0;}

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