编写简单的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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Js类的构建与继承案例详解
Sep 15 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
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
javascript实现2048游戏示例
2014/05/04 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python flask安装和命令详解
2019/04/02 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
is_file和file_exists效率比较
2021/03/14 PHP
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
大学生个人自荐信
2014/02/24 职场文书
就业协议书范本
2014/04/11 职场文书
城南旧事电影观后感
2015/06/16 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
python程序的组织结构详解
2021/12/06 Python