分享

jquery滑过提示插件

 kq的风 2012-11-29

使用JQuery制作了个滑过提示的插件,如果你的页面加载了jquery库那么使用它你将可以很简单的制作一个滑过提示的页面。

此处为Javascript代码
$.plug={
	alt: function(_alt) {
		_alt = $.fn.extend({
		name: "title",
		id: "*",
		effect: 3
	},
	_alt);//定义默认参数
	$("" + _alt.id + "[" + _alt.name + "]").die().live({//绑定事件
		mouseover: function(e) {//划入则输出个DIV
			$("body").append("<div id='alt_title' style='padding: 10px;position: absolute;background-color: #FAF1D6;border: 1px solid #09F;z-index:999;display:none'>" + $(this).attr("" + _alt.name + "") + "</div>")
		},
		mousemove: function(e) {//在ID内移动则改变CSS
			var _a = $("#alt_title");
			var _y = e.pageY + 20;
			var _x = e.pageX + 10;
			_a.css({
			"left": "" + _x + "px",
			"top": "" + _y + "px"
			});
			if (_a.is(":hidden")) {
			if (_alt.effect == 1) {
			_a.fadeIn(300)
			} else if (_alt.effect == 2) {
			_a.show(300)
			} else if (_alt.effect == 3) {
			_a.slideDown(300)
			} else {
			alert("滑过提示插件参数'effect'写入失败;");
			return false
			}
			}
		},
		mouseleave: function() {//划出则删除DOM
			$("#alt_title").remove()
		}
	})
	}	
}

 

使用的时候:

$.plug.alt({name:"x",id:"div.1",effect:1});

参数说明:

name:必填项目,这个是要提示内容的名称,这个比如在标签内,如<div xl="提示的内容">那么这个name就是xl

id:可选项,这个是要滑过哪个容器,比如div,a,span,p等,支持写 选择器,比如id:"div#id",id:"span.class"等,越精确越快,默认为*所有

effect:可选项,数字类型,有1,2,3选择,1为淡入fadeIn,2为渐变显示show,3为下拉显示。默认为1

效果请看例子:http://www./demo/hover.html

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约