编写简单的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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
深入理解vue路由的使用
Mar 24 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php常用数组函数实例小结
2016/12/29 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
js实现3D旋转相册
2020/08/02 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python中count函数简单用法
2020/01/05 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
房地产开盘策划方案
2014/02/10 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
选秀节目策划方案
2014/06/06 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
群众路线剖析材料
2014/09/30 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
高二语文教学反思
2016/02/16 职场文书
搭建Yolov5服务器
2022/04/30 Servers