编写简单的jQuery提示插件


Posted in Javascript onDecember 21, 2014

很简单的代码,就不多废话了。

代码:

/**

* 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();

    };

})($);

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

编写简单的jQuery提示插件

很实用吧,小伙伴们自由发挥下,结合到自己的项目中吧

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
js中日期的加减法
May 06 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
不使用ajax实现无刷新提交表单
Dec 21 #Javascript
webapp框架AngularUI的demo改造之路
Dec 21 #Javascript
浅析webapp框架AngularUI的demo
Dec 21 #Javascript
AngularJS基础知识
Dec 21 #Javascript
javascript关于继承的用法汇总
Dec 20 #Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 #Javascript
jQuery的text()方法用法分析
Dec 20 #Javascript
You might like
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python3+PyQt5泛型委托详解
2018/04/24 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python常用函数与用法示例
2019/07/02 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
产品发布会策划方案
2014/05/12 职场文书
森林防火标语
2014/06/23 职场文书
银行招聘自荐信
2015/03/06 职场文书
人代会简报
2015/07/21 职场文书