鼠标滑至某位置,在鼠标旁边出现详情弹窗div
首先效果如下:

代码如下:
//这个是一个循环,循环所有name为xx的td标签(也就是给tdname为XXX的添加事件)
$("td[name='strGoodsSKU']").each(function(index,item){
var oldTest = $(this).text();
//如果td里的text长度大于了30个字符的话,后面的字符替换成。。。
if($(this).text().length>30){
var newText = $(this).text().substring(0,30);
$(this).text(newText+"...");
}
//开始添加鼠标滑过事件,传递两个function,function1为滑进事件,function2为滑出事件
$(this).hover( function () {
//添加一个div,给div设置样式,并且显示到鼠标的旁边
$(document.body)
.append($('<div id="follower" style="width:500px;height:80px;border:1px solid #000;background:#e1e1e1;position:absolute"></div>'))
.mousemove(function(e){
$("#follower").text(oldTest).css({top:e.pageY+10,left:e.pageX+10})
})
},function(){
//移除显示div
$("#follower").remove();
});
/* $(this).mouseleave( function () { }); */
});
鼠标滑至某位置,在鼠标旁边出现详情弹窗div的更多相关文章
- unity中让摄像机移动到鼠标点击的位置和鼠标控制平移视角
private Vector3 targetVector3; private float movespeed=0.5f; private bool IsOver = true; private Gam ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- 鼠标滑过侧边弹出内容(JS)
效果展示 实现原理 1. html结构: <div id="contain"> <span id="share">分享</span ...
- [JQuery代码]超酷鼠标滑过背景高亮效果
1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...
- echarts中跨域动态获取数据时,当某些对应的数据为空时,鼠标滑动到所在位置卡死
才疏学浅,万望指点. formatter: function (params) { var rel = params[0].name + "<br />"; rel + ...
- Qt 样式表鼠标滑过按钮更改Text文本颜色
QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...
- CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
随机推荐
- asp .net Cookies
Request.Cookies和Response.Cookies When validating cookies or cookie data from the browser you should ...
- Java之线程池管理
JDK5后建议使用ExecutorService与Excutors来创建与管理线程池, 不再建议直接使用Thread. 开始不明白原因, 今天知道结果了:使用Thread.currnetThread. ...
- WPF TreeView绑定xaml的写法
方法一 <Window x:Class="TreeViewDemo.MainWindow" xmlns="http://schemas.microsoft.com/ ...
- jquery评分星星
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- JDK源码阅读——Vector实现
1 继承结构图 Vector同样继承自AbstractList,与ArrayList.LinedList一样,是List的一种实现 2 数据结构 // 与ArrayList一样,也是使用对象数组保存元 ...
- 利用NPOI生成DOCX文档
首先安装NPOI控件: Install-Package NPOI 代码: using NPOI.OpenXmlFormats.Wordprocessing; using NPOI.XWPF.UserM ...
- Decision Tree
Decision Tree builds classification or regression models in the form of a tree structure. It break d ...
- 常用json解析库比较及选择 fastjson & gson
一.常用json解析库比较及选择 1.简介 fastjson和gson是目前比较常用的json解析库,并且现在我们项目代码中,也在使用这两个解析库. fastjson 是由阿里开发的,号称是处理jso ...
- Qt 开发WEB Services客户端代码(使用gSoap)
1. 首先下载gSoap开发包 http://sourceforge.net/projects/gsoap2 目录包含 wsdl2h.exe( 由wsdl生成接口头文件C/C++格式的头文件 ) ...
- jQuery.form的使用方法
首先需要引入jquery.form.js 之后即可使用 jquery.form.js的中文API网址http://www.vaikan.com/docs/jquery.form.plugin/jque ...