zoukankan      html  css  js  c++  java
  • JQEURY 插件之 简洁小提示框效果[ToolTips]

      第一次写jquery的插件,请高手多多指教,多多包涵!

      本来不想写成JQ的插件的,不过貌似不用JQ的话,引用起来没有这么方便。以前也写过一些小小的JS方法,但是写JQ插件是第一次!

      本来是想用一些现成的插件的,找了几个都比较复杂,我就想实现一个小小的效果,并不需要太复杂,所以最终打算自己写一个!

      实现效果:鼠标放到文字上面,出现小提示框!

      效果截图:

      测试结果:火狐,IE6/7/8下面通过

      说明,没有做参数定制,以后可能会完善,大家要改显示效果的话,直接调整JS里面的CSS样式即可!欢迎高手指教!

      代码

    (function($){
        $.fn.JNToolTips=function(){
    	var div = document.createElement("div");
    	div.style.cssText = '300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute'
    	div.onclick=function(){$(div).remove();};
    	$(this).mouseover(function(e){
    	    if(!e){e=window.event;}
    		div.innerHTML= $(this).attr("title");
    		$(this).attr("title","");
    		var doc =  document.documentElement ? document.documentElement : document.body;
    		div.style.left=(e.clientX+doc.scrollLeft + 5)+"px";
    		div.style.top=(e.clientY+doc.scrollTop + 5)+"px";
    		document.body.appendChild(div);
    	}).mouseout(function(){
    		$(this).attr("title",div.innerHTML);
    		$(div).remove();
    	});
        }
    })(jQuery);
    

    使用方法:

    $(document).ready(function(){
    $("a").JNToolTips();
    });
    
        
    如无特殊说明,本博文章均属原创,转载请注明作者:翅膀的初衷 与出处: http://www.cnblogs.com/hnvvv
  • 相关阅读:
    嵌入式Linux基础知识
    面向对象程序设计与原则
    设计模式之工厂模式
    设计模式之单例模式
    基于Doxygen的C/C++注释原则
    设计模式概论
    重启博客
    java 单例模式的几种写法
    CountDownLatch、CyclicBarrier
    java ConcurrentHashMap和CopyOnWriteArrayList解决并发问题
  • 原文地址:https://www.cnblogs.com/hnvvv/p/2162403.html
Copyright © 2011-2022 走看看