编写简单的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 剧场版 你必须知道的javascript
May 27 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
不使用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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python类中super() 的使用解析
2019/12/19 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
Shell编程面试题
2016/05/29 面试题
英语专业学生的自我评价
2013/12/30 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
企业授权委托书范本
2014/04/02 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
面试感谢信范文
2015/01/22 职场文书
公务员个人总结
2015/02/12 职场文书
晚会开场白和结束语
2015/05/29 职场文书
中学政教处工作总结
2015/08/13 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs