基于jQuery的一个提示功能的实现
最近有点忙，没有时间更新自己的博客，只能说我在原地踏步了，不知道你们进步了没有？
今天给大家分享一个提示的实现，有点简单，适合小白同学学习。下面是效果图
提示的功能：
当鼠标进入“我的菜单”的子菜单时，实现折叠功能，实现下面的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height:100%;
width:100%;
font-family:'Microsoft Yahei';
font-size:16px;
overflow:hidden;
}
.sidebar{
width:20%;
height:100%;
float:left;
position:relative;
}
.content-wrap{
width:100%;
height:100%;
background:#666;
overflow:hidden;
}
.menus-title{
color:#333;
text-align:left;
font-size:24px;
font-weight:700;
padding-left:15px;
}
.menus-list{
list-style: none;
padding:15px;
height:100%;
overflow-y:auto;
background:#f5f5f5;
}
.menus-list li{
line-height: 35px;
height:35px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
text-align:left;
padding-left:15px;
overflow:hidden;
}
.menus-list li a{
text-decoration: none;
color:#000;
}
.content-wrap ul li:hover{
background:#f53;
}
.menus-list li:hover a{
color:white;
font-weight: 600;
}
.suggest{
position:absolute;
left: 130px;
top:-100px;
background:skyblue;
color:#fff;
display:block;
padding-left:15px;
line-height: 35px;
width:100%;
}
.suggest:after {
content:'';
position:absolute;
top:14px;
left:-32px;
border-left:16px solid transparent;
border-right:16px solid skyblue;
border-top:16px solid transparent;
}
.suggest a{
color:#333;
text-decoration: none;
}
.content{
width:80%;
height:100%;
background:#3ff;
float:left;
}
</style>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="sidebar">
<div class="content-wrap">
<h1 class="menus-title">我的菜单</h1>
<ul class="menus-list">
<li><a href="">我的菜单</a></li>
<li><a href="">我的苹果</a></li>
<li><a href="">1412</a></li>
<li><a href="">53145</a></li>
<li><a href="">43124</a></li>
<li><a href="">我的4231421菜单</a></li>
<li><a href="">我的4124菜单</a></li>
<li><a href="">我的23单</a></li>
<li><a href="">我的单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
<li><a href="">我的菜单</a></li>
</ul>
</div>
<div class="suggest"></div>
</div>
<div class="content"></div>
<script>
$(document).ready(function(){
$(".content-wrap ul li").mouseenter(function(){
if($('.sidebar').width() == 154){
var top = $(this).offset().top-45;
var left = $(this).offset().left+145;
var suggestMessage = $(this).html()
$('.suggest').css({top:top,left:left}).html(suggestMessage).show();
} }).mouseleave(function(){
$('.suggest').hide();
});
$('.menus-title').click(function(){
console.log($('.sidebar').width());
if($('.sidebar').width() == 384){
$('.sidebar').width('8%');
$('.content').width('92%');
console.log($('.sidebar').width());
}else{
$('.sidebar').width('20%');
$('.content').width('80%');
} })
});
</script>
</body>
</html>
基于jQuery的一个提示功能的实现的更多相关文章
- 如何在myeclipse中实现jquery的自动提示功能
在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料 jquery 1.8.3.js ...
- 基于jQuery Tooltips悬停提示效果
基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览 源码 ...
- 基于 jQuery Jcrop 插件的功能模块：头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- 基于Jquery的文本提示控件 poshytip
Html中,如设置了title的属性,则当鼠标在该对象上面短暂的停留时,会显示预设的文本提示,但,这些效果只会短暂的显示,一会就会消失,又要重新把鼠标移出再移回来才被显示,样式也无法重写,实在是恼人之 ...
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- 一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- 使用jQueryUI的dialog实现一个提示功能
信息提示给用户是程序开发中,最常用的一个功能. Insus.NET使用jQueryUI的dialog来实现一个,可以定义标题,对话框的大小等. 在ASP.NET MVC环境下来演示吧. 在Octobe ...
- 基于jQuery的一个简单的图片查看器
项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
- 基于JQuery 的消息提示框效果代码
提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...
随机推荐
- HDU [P1151] Air Raid
二分图匹配求DAG图上的最小路径覆盖 应用了拆点的思想,将DAG图上的每一个点拆成二分图的x集合与y集合,对于一条有向边u->v来说,我们在ux与vy之间连一条边,然后求二分图的最大匹配 DAG ...
- BZOJ 4034: [HAOI2015]树上操作 [欧拉序列 线段树]
题意: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 a . 操作 3 :询问某个节点 x 到根的路径中所有点的点权和. 显然树链剖分可做 ...
- Typora最常用快捷键
插入图片:直接拖动到指定位置即可或者ctrl+shift+i 插入链接:ctrl+k 对于本地图片,我们可以直接拖进来 双回车可以回到行首
- 2018/1/15 JAVA多线程相关
本文不说synchronized相关,它就是JAVA的一个保留关键字,jdk自己实现了它,但说真的,可应用场景真的少,相比lock接口,它还是被淘汰好吧; 首先,说说lock接口,lock接口是一个工 ...
- 移植cjson到windows下编译
#起因 在工作过程中发现需要让Lua支持json库,如果直接用lua版本的json解析器的话效率不够高,所以找了一个用C实现的json库--cjson,据说此库比lua版本的效率高10-20倍.但是c ...
- ubuntu17.10 python3.6 install plugins for AI
install order: tensorflow-gpu scikit-learn numpy scipy matplotlib tkinter tensorflow-gpu : pip insta ...
- PHP 是一门弱类型语言
PHP 是一门弱类型语言 我们注意到,不必向 PHP 声明该变量的数据类型. PHP 会根据变量的值,自动把变量转换为正确的数据类型. 在强类型的编程语言中,我们必须在使用变量前先声明(定义)变量的类 ...
- 几个常用的文本处理shell 命令：find、grep、sort、uniq、sed、awk
find 文件查找 查找txt和pdf文件 find . \( -name "*.txt" -o -name "*.pdf" \) -print 查找所有字母开 ...
- filter-api文档
git地址:https://github.com/jiqianqin/filters 不断优化中,欢迎加入讨论- filter-tags 效果图: 参数 说明 格式 备注 data 展示的数据 [{ ...
- .net core 部署到 iis 步骤及报错解决方法
我写了一个Asp.net core mvc项目,但是部署在iis发生了502.5的问题一直解决不了. 环境 系统:最强Win10; 工具:轻巧VS Code; 各种百度bing都没有我要的解决方案,说 ...