编写简单的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 相关文章推荐
可恶的ie8提示缺少id未定义
Mar 20 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python验证企业工商注册码
2015/10/25 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python命令 -u参数用法解析
2019/10/24 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
python保存图片的四个常用方法
2022/02/28 Python