编写简单的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 this 和 $(this) 的区别
Aug 23 Javascript
javascript json2 使用方法
Mar 16 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
vue组件间通信解析
Mar 01 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
一个符号插入器 中用到的js代码
2007/09/04 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
Python 字符串换行的多种方式
2018/09/06 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Python内置函数及功能简介汇总
2020/10/13 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
春季运动会开幕词
2015/01/28 职场文书
婚庆答谢词大全
2015/09/29 职场文书
初三数学教学反思
2016/02/17 职场文书