帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery tip插件代码实例
jQuery tip插件代码实例
浏览:601次
-
评论:0次
-
发布时间:2017-05-10
Html
Css
Js
素材牛欢迎您
本站url地址是
分享和互助式本站的宗旨
没有人一开始就是高手
.tip{ width: 200px; text-align: center; position: relative; border:1px solid #ccc; height: 50px; line-height: 50px; left: 50%; margin-top: 50px; transform: translateX(-50%); } .tip-container{ position: absolute; box-shadow: 2px 2px 5px #f9f9f9; z-index: 999; display: none; } .tip-container .tip-point-top, .tip-container .tip-point-bottom, .tip-container .tip-point-left, .tip-container .tip-point-right{ border:1px solid #dcdcdc; position: relative; background: white; } .tip-content{ padding:5px 10px; background: white; font-size: 12px; line-height: 1.7; font-family: "Helvetica Neue",Helvetica,Arial,"MicroSoft YaHei"; } .tip-container .tip-point-top::after, .tip-container .tip-point-top::before, .tip-container .tip-point-bottom::after, .tip-container .tip-point-bottom::before{ content:""; position: absolute; border:solid transparent; left: 50%; width: 0; height: 0; transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); } .tip-container .tip-point-right::after, .tip-container .tip-point-right::before, .tip-container .tip-point-left::after, .tip-container .tip-point-left::before{ content:""; position: absolute; border:solid transparent; top: 50%; width: 0; height: 0; transform: translate3d(0,-50%,0); -webkit-transform: translate3d(0,-50%,0); } /*tip-point-top*/ .tip-container .tip-point-top::after{ border-top-color: #fff; top: 100%; border-width: 5px; } .tip-container .tip-point-top::before { border-top-color: #dcdcdc; top: 100%; border-width: 7px; } /*tip-point-bottom*/ .tip-container .tip-point-bottom::after{ border-bottom-color: #fff; bottom: 100%; border-width: 5px; } .tip-container .tip-point-bottom::before { border-bottom-color: #dcdcdc; bottom: 100%; border-width: 7px; } /*tip-point-right*/ .tip-container .tip-point-right::after{ border-right-color: #fff; right: 100%; border-width: 5px; } .tip-container .tip-point-right::before { border-right-color: #dcdcdc; right: 100%; border-width: 7px; } /*tip-point-left*/ .tip-container .tip-point-left::after{ border-left-color: #fff; left: 100%; border-width: 5px; } .tip-container .tip-point-left::before { border-left-color: #dcdcdc; left: 100%; border-width: 7px; }
(function($, window, document, undefined) { var modePos; $.fn.tip = function(options) { var set = $.extend({ "mode": "bottom", "speed": 300, "tipText": "提示内容" }, options); if (!modePos) { //策略模式 //算法 modePos = { top: function(t, tip) { return { left: t.offset().left + (t.width() - tip.width()) / 2 + "px", top: t.offset().top - tip.height() - 12 + "px" } }, bottom: function(t, tip) { return { left: this.top(t, tip).left, top: t.offset().top + t.height() + 12 + "px" } }, left: function(t, tip) { return { left: t.offset().left - tip.width() - 12 + "px", top: t.offset().top + (t.height() - tip.height()) / 2 + "px" } }, right: function(t, tip) { return { left: t.offset().left + t.width() + 12 + "px", top: t.offset().top + (t.height() - tip.height()) / 2 + "px" } } }; } function Tip(_this) { var _that = $(_this); var _mode = set.mode; var tipText = set.tipText; var _tip = ".tip-container"; if (_that.data("mode")) { _mode = _that.data("mode"); } if (_that.data("tip")) { tipText = _that.data("tip"); } _that.css("cursor", "pointer"); _that.hover(function() { var _tipHtml = '
' + tipText + '
'; _that.removeAttr("title alt"); $("body").append(_tipHtml); $(_tip).css(modePos[_mode](_that, $(_tip))).fadeIn(set.speed); }, function() { $(".tip-container").remove(); }); } return this.each(function() { return new Tip(this); }); } })(jQuery, window, document); $(".tip").tip();
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.0.0
<!doctype html><html><head><meta charset="utf-8"><title>jQuery tip插件代码实例-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:实现了tip插件功能,并且能够自由定义弹出的方位。
拖动滚动条实现侧栏导航定位效果
简单的多级下拉菜单
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
601
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值