body {font-size: 12pt; color: #99CC33; } h2 {font-size: 14pt; } ul {list-style: none; padding: 0 0 0 10px;} ul li {margin-bottom: 5px; } a {text-decoration: none; color: #99CC33; } #beatitle {position: absolute; z-index: 1000; max-width: 260px; width: auto !important; width: 220px; background: #000; text-align: left; padding: 5px; min-height: 1em; } #beatitle span {display: block; color: #FF9900; }
相信各位童鞋看了上面的原理和代码应该也猜到我的侧边栏里的摘要提示是怎么做的了！就是在超链接的 title 中添加内容截断了，这里跟大家分享我的截断代码，有兴趣的果断折腾吧！
复制代码 代码如下:
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 240,'...'); ?>">
好了，我们再来更加完整地总结一下实现title提示的核心代码：
/* 调用示例： $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = function (options) { var defaults = { speed: 500, xOffset: 10, yOffset: 10 }; var options = $.extend(defaults, options); return this.each(function () { var $this = jQuery(this); if ($this.attr('title') != undefined) { //Pass the title to a variable and then remove it from DOM if ($this.attr('title') != '') { var tipTitle = ($this.attr('title')); } else { var tipTitle = 'QuberTip'; } //Remove title attribute $this.removeAttr('title'); $(this).hover(function (e) { // $(this).css('cursor', 'pointer'); $("body").append("<div>" + tipTitle + "</div>"); $("#tooltip").css({ "position": "absolute", "z-index": "9999", "background": "#D3DDF5", "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)", "padding": "5px", "opacity": "0.9", "border": "1px solid #A3C0E8", "-moz-border-radius": "3px", "border-radius": "3px", "-webkit-border-radius": "3px", "font-weight": "normal", "font-size": "12px", "display": "none" }); $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px") .fadeIn(options.speed); }, function () { //Remove the tooltip from the DOM $("#tooltip").remove(); }); $(this).mousemove(function (e) { $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px"); }); } }); };
您可能感兴趣的文章: