看到我就有博客的文章标题特效,觉得这种特效很好看,如图:

Loper主题添加文章标题特效

Loper主题添加文章标题特效

而自己博客鼠标指到标题时,如图:

Loper主题添加文章标题特效

Loper主题添加文章标题特效

也许各有所爱,我觉得我就有博客的特效很好看,于是就留言请教博主,我就有博主加了我的QQ,并热情告知了方法,感谢我就有博主,于是分享出来,方法就是在主题目录下的scripts的loperjs.js加一段代码:

	function hooktooltip(){
		$('*').each(function(i){
			if(this.title){
				var aTitle=this.title;
				$(this).mouseover(function(e){
					this.title='';
					$('body').append('<div style="color: #5692BC;text-align: center;position: absolute;z-index: 999;display: none;background: black;font-size: 12px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 0 3px black;-moz-box-shadow: 0 0 3px #000;-webkit-box-shadow: 0 0 3px black;padding: 3px 8px;" id="tooltip">'+aTitle+'</div>');
					$('#tooltip').css({
						left:(e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"
					}).show(250)
				}).mousemove(function(e){
					$('#tooltip').css({
						left:(e.pageX+30)+'px',top:(e.pageY+5)+'px'
					})
				}).mouseout(function(){
					this.title=aTitle;
					$('#tooltip').remove()
				}).mousemove(function(e){
					$('#tooltip').css({
						left:(e.pageX+30)+'px',top:(e.pageY+5)+'px'
					})
				})
			}
		});
	}
	hooktooltip();

里面的颜色自己调,加入后上传在刷新一下网页,看看实际效果:

Loper主题添加文章标题特效

Loper主题添加文章标题特效

» 订阅本站: http://www.0523jz.com/feed