编写简单的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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
vue实现树形结构样式和功能的实例代码
Oct 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
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
jquery indexOf使用方法
2013/08/19 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
React中的refs的使用教程
2018/02/13 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python 循环数据赋值实例
2019/12/02 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
MYSQL支持事务吗
2013/08/09 面试题
保护环境建议书
2014/03/12 职场文书
新闻编辑求职信
2014/07/13 职场文书
秋冬农业生产标语
2014/10/09 职场文书
初中教师个人总结
2015/02/10 职场文书
党章学习心得体会2016
2016/01/14 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
windows系统搭建WEB服务器详细教程
2022/08/05 Servers