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

$.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:必填项目,这个是要提示内容的名称,这个比如在标签内,如
  那么这个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.xuexb.com/demo/hover.html

学习吧原创插件,转载请注明。

发表于 2012年08月20日 15:36:35 ,添加在分类 前端技术 下 ,最后修改于 2016年07月16日 15:36:35