编写简单的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 插件开发笔记整理
Jan 17 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
jquery显示隐藏input对象
2014/07/21 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
WebPack基础知识详解
2017/01/16 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python读取注册表中值的方法
2013/04/08 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
工程专业应届生求职信
2014/02/19 职场文书
应届生求职自荐信
2014/07/04 职场文书
贷款委托书怎么写
2014/08/02 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
师德师风整改措施
2014/10/24 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL