效果图：代码如下:function krc2lrc($krc_content, $glue = "n") { $enKey = array(64, 71, 97, 119, 94, 50, 116, 71, 81, 54, 49, 45, 206, 210, 110, 105); $krc_content = substr($krc_content, 4); $len = strlen($krc_content); $krc_compress = ''; for ($k = 0; $k < $len; $k++) { $krc_compress .= chr(ord($krc_content[$k]) ^ $enKey[$k % 16]); } $krc_text = gzuncompress($krc_compress); return $krc_text; preg_match_all("/[(ar|ti|offset):(.+)]/", $krc_text, $matches); $lrc_text = implode($glue, $matches[0]) . $glue; preg_match_all("/[(d{0,8}),(d{0,8})](.+)/", $krc_text, $matches); unset($krc_text, $krc_compress, $krc_content, $enKey); if (!empty($matches[1])) { foreach($matches[1] as $k => $v) { list($seconds, $millis) = explode('.', $v / 1000); $lrc_time = date('i:s', 1388534400 + $seconds) . '.' . substr($millis, 0, 2); $lrc_cont = preg_replace("/<d{1,8},d{1,8},d{1,8}>/", '', $matches[3][$k]); $lrc_text .= "[{$lrc_time}]{$lrc_cont}{$glue}"; } } return $lrc_text; }简单的示例:$content = file_get_contents("1.krc"); echo krc2lrc($content,'<br/>');

美化演示教程简介浏览器自带的alt和title提示太丑了，所以我们需要美化一下，百度有许多，不过对我们这些小白来说很难。第一步放以下js到公用js里面var sweetTitles = { x: 10, y: 20, tipElements: "a,span,img,div ", noTitle: false, init: function() { var b = this.noTitle; $(this.tipElements).each(function() { $(this).mouseover(function(e) { if (b) { isTitle = true } else { isTitle = $.trim(this.title) != '' } if (isTitle) { this.myTitle = this.title; this.title = ""; var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>"; $('body').append(a); $('.tooltip').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }).show('fast') } }).mouseout(function() { if (this.myTitle != null) { this.title = this.myTitle; $('.tooltip').remove() } }).mousemove(function(e) { $('.tooltip').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }) }) }) } }; $(function() { sweetTitles.init() });第二步css也是/*tips*/ .tooltip { font-size:12px; position:absolute; padding:5px; z-index:100000; opacity:.8; font-family:Microsoft Yahei } .tipsy-arrow { position:absolute; width:0; height:0; line-height:0; border:6px dashed #000; top:0; left:20%; margin-left:-5px; border-bottom-style:solid; border-top:0; border-left-color:transparent; border-right-color:transparent } .tipsy-arrow-n { border-bottom-color:#666 } .tipsy-inner { background-color:#666; color:#FFF; max-width:200px; padding:5px 8px 4px 8px; text-align:center; border-radius:3px }

模板的主要css文件，放到css的最后面即可，一般为style.css但也有不一样的，但是只要放到主要的就行代码：加入以下代码即可！img:hover { -webkit-animation:sucaijiayuan 1s .1s ease both; -moz-animation:tada 1s .1s ease both; } @-webkit-keyframes sucaijiayuan { 0% { -webkit-transform:scale(1) } 10%, 20% { -webkit-transform:scale(0.8) rotate(-2deg) } 30%, 50%, 70%, 90% { -webkit-transform:scale(1.1) rotate(2deg) } 40%, 60%, 80% { -webkit-transform:scale(1.1) rotate(-2deg) } 100% { -webkit-transform:scale(1) rotate(0) }