jquery鼠标移入文字提示_jquery实现鼠标滑过显示提示框的方法
本文实例讲述了jquery实现鼠标滑过显示提示框的方法。分享给大家供大家参考。具体如下:
一、jquery鼠标滑过显示提示框实例
1、效果图
2、实现代码 ( 需要自行添加 jquery.js、按钮图片、提示框图片 )
HTML 代码
Animated Menu Hover 1
$(document).ready(function(){
$(".menu li").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url('背景图片1') no-repeat center center;
}
.menu li em {
background: url('背景图片2') no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
Web Designer Wall
A wall of design ideas, web trends, and tutorials
Best Web Gallery
Featuring the best CSS and Flash web sites
N.Design Studio
Blog and design portfolio of WDW designer, Nick La
二、jquery鼠标滑过显示提示框实例二
鼠标划过用户名时,在鼠标右下角显示div展示用户资料这个效果
1、效果图
2、实现方式
无非就三大块,一个是div的定位,这个是该效果的主要难点;二个是通过ajax异步加载数据;第三个就是要用到两个js属性onmouseover和onmouseout,即鼠标经过和鼠标离开。
3、实现步骤
(1)、首先设计好要显示用户资料的div的样式, 这里要注意的该方法不是给每个用户名的旁边都绑定一个div,当鼠标经过时显示,鼠标离开时隐藏,网页里就一个显示信息的div,哪里需要显示时就定位在哪里,这要就需要把该div的定位方式设置为绝对定位。
HTML代码:
用户名: | |
真实姓名: | |
性别: | |
所属地区: | |
邮箱: |
(2)、相应css代码
#blockdiv{
width:380px;
height:160px;
float:left;
display:none;
border: 1px solid #ccc; position: absolute; z-index: 1; opacity: 0.1; background: white
}
.pic{
width:100px;
height:100px;
border:1px solid #ccc;
border-radius:10px;
float:left; margin:10px;
overflow:hidden;
}
.box{
width:240px;
height:140px;
margin:10px 0 10px 10px;
float:left;
overflow:hidden;text-overflow:ellipsis; white-space:nowrap;}
(3)、定位,为了能够精确的定位并且能够方便的调用,所以先在页面中放了两个标签,分别用于保存当前鼠标的坐标
然后用js获取当前坐标并保存到标签中:
jQuery(document).ready(function ($) {
$(document).mousemove(function (e) {
document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置,相对于文档的左边缘。
document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置,相对于文档的上边缘。
});
});
(4)、鼠标经过和离开事件js代码
function ShowInfo(username) {
$("#blockdiv").css({
"display": "block",
"left": document.getElementById('pagex').value,
"top": document.getElementById('pagey').value,
});
$("#messagediv").css("display", "block");
$.getJSON("../ashx/GetUserInfo。ashx?name=" + username,
function (data) {
if (data != null) {
$("#lblusername").html(data[0].User_Count)
$("#lblrealname").html(data[0].User_name);
$("#sex").html(data[0].User_Sex);
$("#lbladdress").html(data[0].User_Address)
$("#lblemall").html(data[0].User_Email);
if (data[0].User_HeadImg != null&&data[0].User_HeadImg != "") {
$("#imguserhead").attr("src", "../../Users/" + data[0].User_HeadImg.toString().substring(3));
}
else {
$("#imguserhead").attr("src", "../../Users/images/900.png");
}
$("#messagediv").css("display", "none");
}
else
$("#messagediv").html("未加载到数据!");
});
}
function HiddenInfo() {
$("#blockdiv").css({
"display": "none",
});
$("#lblusername").html("")
$("#lblrealname").html("");
$("#sex").html("");
$("#lbladdress").html("")
$("#lblemall").html("");
}
(5)、调用
')" οnmοuseοut="HiddenInfo()">
jquery鼠标滑过显示提示框
希望本文所述对大家的jQuery程序设计有所帮助。
jquery鼠标移入文字提示_jquery实现鼠标滑过显示提示框的方法相关推荐
- quill鼠标悬浮 出现提示_jQuery实现鼠标悬停显示提示信息窗口的方法
本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xht ...
- css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
- html设置鼠标移入移出样式,css实现鼠标移入移出动态效果
这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 知识点:transform-origin 兼容性:IE10以上 p { positi ...
- css实现鼠标移入图片,增加遮罩并在上方显示另一个图片
问题来源 最近做web项目,前端表单添加用户头像时遇到的问题,就是鼠标移入添加图片的按钮要有相应的动态效果,具体要求如图 #鼠标未移入效果 #鼠标移入效果 问题解决方式 不想让js代码太过繁多,只用c ...
- html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
- 鼠标移入事件onmouseover、onmouseenter 鼠标移出事件onmouseleave、onmouseout 的区别
onmouseenter和onmouseover都是鼠标移入事件,即鼠标放入到元素上相应事件触发,但是这两个事件是存在差别的. onmouseover.onmouseout子元素会影响到父元素, 而o ...
- jquery鼠标移入文字提示_Jquery hover鼠标经过时弹出div动态提示语
一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
- 鼠标移入事件_NSTrackingArea 监听鼠标移入与移出事件
在NSView中: var area:NSTrackingArea! override func updateTrackingAreas() {if area != nil {self.removeT ...
- php鼠标已入移除,angularjs鼠标移入移出实现显示隐藏
操作 主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量 截图如下: CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部 ...
最新文章
- GridControl摘录
- 徒手撸了一个API网关,理解更透彻了,代码已上传github,自取~
- GPT分区无损转MBR分区的操作
- 169v 条目不存在_存在麒麟?牛顿烈焰激光剑理论!生活中的科学思维
- 第一天开始学习使用git中遇到的问题
- Gvim开发环境配置笔记--Windows篇
- 从Hadoop到云原生,谈如何消除程序员35岁危机
- 写代码抽取代码的技巧
- 英文书: Python 网络编程基础手册
- 基于Bayes和KNN的newsgroup 18828文本分类器的Python实现
- 实战:用 C 语言实现操作系统
- Oracle安装以及彻底清除
- DDD的创新思想:开发即设计思想
- linux网络编程中端口号和ip地址转换方法
- 100Mbps 和 100Mb/s 单位Mbps和Mb/s有什么不同
- 电商直播增加人气,留人技巧有哪些
- Nebula Exchange 从Hive导入 NoSuchMethodError
- 六面体体积求解(规则不规则)
- ALK8266WIFI解决方案支持常见普通单片机实现WIFI高速传输和许多实用功能,实测速度超过M字节每秒
- GB2312的中文编码表