编写简单的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 radio 联动效果
Mar 04 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
layui实现tab的添加拒绝重复的方法
Sep 04 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JavaScript简介
2015/02/15 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
浅谈五大Python Web框架
2017/03/20 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python 贪心算法的实现
2020/09/18 Python
python 解决函数返回return的问题
2020/12/05 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
写给女朋友的道歉信
2014/01/08 职场文书
生产厂长岗位职责
2014/02/21 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
创业融资计划书
2014/04/25 职场文书
专家推荐信范文
2015/03/26 职场文书
农业项目合作意向书
2015/05/08 职场文书
小学数学教学随笔
2015/08/14 职场文书
业余无线电通联Q语
2022/02/18 无线电