编写简单的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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 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利用header跳转失效的解决方法
2014/10/24 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
详解参数传递四种形式
2015/07/21 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中Continue语句的用法的举例详解
2015/05/14 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python机器学习库xgboost的使用
2020/01/20 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
八年级语文教学反思
2014/02/11 职场文书
文化产业实施方案
2014/06/07 职场文书
反邪教标语
2014/06/23 职场文书
党性教育心得体会
2014/09/03 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
好人好事新闻稿
2015/07/17 职场文书
在Python中如何使用yield
2021/06/07 Python
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL