基于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 ...
随机推荐
- iOS-隐藏Navigationbar【导航栏无缝圆滑的隐藏】
1.ViewController .m - (void)viewDidLoad { [super viewDidLoad]; self.title = @"隐藏导航栏"; UIBu ...
- java对象表示方式--XStream
对象表示有各种各样的方式,序列化只是其中的一种而已.表示一个对象的目的无非就是为了对象<---->IO之间相互认识,至于怎么认识,那就有很多选择了.除了之前讲过的序列化,还可以选择将数据J ...
- C#写鞍点问题
题目: 编写程序,找一找一个二维数组中的鞍点(即该位置上的元素值在行中最大,在列上最小.有可能数组没有鞍点). 要求 * 二维数组的大小.数组元素的值在运行时输入: * 程序有友好的提示信息 usin ...
- WebSocket就是这么简单
前言 今天在慕课网上看到了Java的新教程(Netty入门之WebSocket初体验):https://www.imooc.com/learn/941 WebSocket我是听得很多,没有真正使用过的 ...
- [Python Study Notes]CS架构远程访问获取信息--Client端v2.0
更新内容: 1.增加内存信息获取 2.增加电池信息获取 3.增加磁盘信息获取 4.重新布局窗体 5.增加窗体名称 6.增加连接成功之前,不可按压 效果图: '''''''''''''''''''''' ...
- java单例模式学习笔记
最近一直在学习多线程,在学习过程中遇到了关于单例模式的多线程安全问题,内容如下: 一:首先什么是单例模式 单例模式具有的三要点: 一个类只能有一个实例: 必须是由它自己创建的这个实例: 它必须自行向外 ...
- Python自动化--语言基础3--字典、函数、全局/局部变量
字典 dict1 = {'name':'han','age':18,'class':'first'} print(dict1.keys()) #打印所有的key值 print(dict1.values ...
- 接口测试基础（fiddler、postman的使用、python实现测试接口程序）
写在前面:本文主要的章节规划: 1.什么是接口测试 另外,有的时候会直接调用别的公司的接口,比如银行的.淘宝的.支付宝的,此时也需要做接口测试以及验证数据: 做接口测试的好处: 其中, ...
- C/C++语言的特点
一.支持数据封装和数据隐藏 在C++中,类是支持数据封装的工具,对象则是数据封装的实现.C++通过建立用户定义类支持数据封装和数据隐藏. 在面向对象的程序设计中,将数据和对该数据进行合法操作的函数封装 ...
- Angular4.0用命令行创建组件服务出错
之前使用cnpm创建的angular4.0项目,由于cnpm下载的node_modules资源经常会有部分缺失,所以在用命令行创建模板.服务的时候会报错: Error: ELOOP: too many ...