鼠标滑至某位置,在鼠标旁边出现详情弹窗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 ...
随机推荐
- WPF里的一些Effect特效
原文:WPF里的一些Effect特效 Blend的特效都在Microsoft.Expression.Media.Effects里,用之前添加一下引用. 可以在前台选中对象后直接点击Effect新建一种 ...
- BZOJ 3329 Xorequ 数字DP+矩阵乘法
标题效果:特定n,乞讨[1,n]内[1,2^n]差多少x满足x^3x=2x x^3x=2x相当于x^2x = 3x 和3x=x+2x 和2x=x<<1 因此x满足条件IFFx&(x ...
- Dijkstra含权图最短路径;审判,不要错过枚举退款保证不会重复;国际象棋八皇后问题
求两节点的最短通路.对于无权图,能够通过图的广度优先遍历求解.含权图一般通过Dijkstra算法求解. import java.util.ArrayList; import java.util.Has ...
- WPF 拖动多个文件到窗体 添加文件信息
将Window的AllowDrop属性设置为true window添加Drop事件 private void Window_Drop(object sender, DragEventArgs e) { ...
- C#基础:ref和out的区别 [转]
ref和out的区别在C# 中,既可以通过值也可以通过引用传递参数.通过引用传递参数允许函数成员更改参数的值,并保持该更改.若要通过引用传递参数, 可使用ref或out关键字.ref和out这两个关键 ...
- iOS Touch ID使用
1.首先导入头文件 #import <LocalAuthentication/LocalAuthentication.h> 2.关键代码 - (void)validateTouchID { ...
- sqlserver从xlsx读取数据
exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed Querie ...
- 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...
- Python日记:基于Scrapy的爬虫实现
安装 pywin32 和python版本一致 地址 https://sourceforge.net/projects/pywin32/files/pywin32/Build%20221/安装过程中提示 ...
- gcc与vs2013的三个charset编译选项
以gcc为例,它有三个命令选项:-finput-charset=gb18030-fexec-charset=utf-8-fwide-exec-charset=utf32顾名思议,input-chars ...