编写简单的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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
JavaScript继承方式实例
Oct 29 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
不使用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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
js禁止表单重复提交
2017/08/29 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
深入解析Python中的WSGI接口
2015/05/11 Python
构建Python包的五个简单准则简介
2015/06/15 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
毕业自我鉴定
2013/11/05 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
《四季》教学反思
2014/04/08 职场文书
低碳生活倡议书
2014/04/14 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python