编写简单的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 window.onload 加载多个函数的方法
Nov 02 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
关于JavaScript轮播图的实现
Nov 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
JavaScript中的细节分析
2012/06/30 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
应届生英语教师求职信
2013/11/05 职场文书
企业厂长岗位职责
2013/12/17 职场文书
2013年军训通讯稿
2014/02/05 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
求职信格式要求
2014/05/23 职场文书
2014年村官工作总结
2014/11/24 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
家电创业计划书
2019/08/05 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Nginx跨域问题解析与解决
2022/08/05 Servers