编写简单的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测试题练习代码
Oct 10 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue2里面ref的具体使用方法
Oct 27 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
实用函数2
2007/11/08 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php读取本地json文件的实例
2018/03/07 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python定向爬取淘宝商品价格
2018/02/27 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
请假条格式范文
2014/04/10 职场文书
小学二年级评语
2014/04/21 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android