使用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 |
|