自己写的一个简单的jQuery提示插件

代码:

/**
* 2014年11月13日
* 提示插件
*/

(function ($) {
    $.fn.tips = function (text) {
        var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";
        $("body").append("<div class=‘div-tips‘ style=‘" + divtipsstyle + "‘>" + text + "</div>");

        var divtips = $(".div-tips");
        divtips.css("visibility", "visible");

        var top = this.offset().top - divtips.height() - 8;
        var left = this.offset().left;
        divtips.css("top", top);
        divtips.css("left", left);

        $(document).mousemove(function (e) {
            var top = e.clientY + $(window).scrollTop() - divtips.height() - 12;
            var left = e.clientX;
            divtips.css("top", top);
            divtips.css("left", left);
        });
    };

    $.fn.removetips = function (text) {
        $(".div-tips").remove();
    };
})($);

效果图(鼠标移到商品上面,会在下面显示一个方形的商品详情框):

时间: 2024-10-13 12:38:51

自己写的一个简单的jQuery提示插件的相关文章

写了一个简单的jquery插件(初恋啊)

用了好久的jquery了,却没有写过插件,今天研究了一个别人的插件和一些文章,总算搞清楚了jquery插件一些写法, 代码写了一个div当鼠标事件发生时的宽高变化情况,基础,代码基础,基础好了,才能研究深入的东西. 1 (function(jQuery){ 2 /* 3 * 插件应该返回一个JQuery对象,以便保证插件的可链式操作. 4 * JQuery插件的机制:jQuery提供了2个用于扩展jQuery功能的方法 5 * jQuery.fn.extend() 6 * jQuery.exte

32.自己写的一个简单的加载插件

js /* loader.js version:1.0 author:lgw */ (function($) { "use strict"; $.fn.loader = function(options) { return this.each(function(e) { var that = $(this) $.fn.loader.defaultOptions = { isLoading:false, type:"ball-beat", callBack: func

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

图片延迟加载并等比缩放,一个简单的JQuery插件

使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){    $.fn.zoom = function(settings){                //一些默认配置:                settings = $.extend({                    height:0,                    width:0,                    load

虚幻4,BP写了一个简单的三线跑酷工程

BP写了一个简单的三线跑酷 链接: http://pan.baidu.com/s/1jILE4V8 密码: 96ua

java写的一个简单学生管理系统[改进]

用Java写的一个简单学生管理系统 import java.util.*; public class student_cj {  public static void main(String[] args){      Scanner in=new Scanner(System.in);   System.out.print("请输入学生人数:");   int num=in.nextInt();//学生人数   String[] str=new String[num];//结合一行数

写了一个简单的CGI Server

之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看,对于学生来说,拿来当简历,含金量还是足够的.如果把程序里所涉及的HTTP协议,Linux下POSIX编程等等搞清楚,我想找工作中肯定是有足够的竞争力的,当然我也只是皮毛而已,不再班门弄斧了,下面简单的说下程序流程吧,方便小伙伴们阅读. 程序源代码:戳我 在说程序流程之前,我先简单说下CGI吧,CG

编写一个简单的Jquery插件

1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var methods = { //Object showName: function (name) { alert('Name:' + name); }, showAge: function (age) { alert('Age' + age); } }; //method方法名 $.fn.showplugi

用qt写的一个简单到不能在简单的上位机

学QT时,写的一个简单得不能再简单的串口上位机,用来控制单片机上的2个LED.假设一个是只有开和关的状态.一个可以调节亮度.上位机的界面如下图: 其中,波特率,数据位,停止位下拉值在设计师里面添加.剩下的功能,基本由代码实现.通信使用的协议也是随便写的.很简单和随意.图片是老弟手绘的. 下面贴代码 (*^__^*) #include "mainwindow.h" #include "ui_mainwindow.h" #include <QtSerialPort