编写简单的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限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
javascript json2 使用方法
2010/03/16 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
flask中的wtforms使用方法
2018/07/21 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
2016年春季运动会加油稿
2015/07/22 职场文书