编写简单的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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 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
深入了解php4(1)--回到未来
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php获取随机数组列表的方法
2014/11/13 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
js a标签点击事件
2017/03/30 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python3爬虫学习入门教程
2018/12/11 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
农民工创业典型事迹
2014/01/25 职场文书
社区工作感言
2014/02/21 职场文书
初中班主任心得体会
2016/01/07 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python