图片悬浮效果如图2.1和2.2所示,
图2.1
图2.2
实现方法:
<!-- 微影空间缩略图悬浮div -->
<div id="tooltip" class="tip"></div>
<!-- 微影空间ul列表 -->
<ul class="">
<li>
<span class="createtable" tpath='/img/20180909.jpg'>
<a href="www.baidu.com" target="_blank">
这个杀手不太冷
</a>
</span>
</li>
</ul>
<!-- 微影空间相关CSS -->
.tip{
display:none;
padding:5px;
}
<!-- 设置最大宽高后,系统会自动分配图片的比例(以高/宽为准,算出比例) -->
.tip img {
max-width: 320px;
max-height: 250px;
}
<!-- 微影空间相关JS -->
<script type="text/javascript">
$(function () {
//获取鼠标坐标
function mousePosition(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//hover某处显示悬浮框
$(".createtable").mouseover(function(e){
//获取鼠标位置函数
var mousePos = mousePosition(e);
var xOffset = 20;
var yOffset = 25;
$("#tooltip").css("display","block").css("position","absolute").css("top",(mousePos.y - yOffset) + "px").css("left",(mousePos.x + xOffset) + "px");
$("#tooltip").append('<img src="'+$(this).attr("tpath")+'" />');
});
//鼠标离开表格隐藏悬浮框
$(".createtable").mouseout(function(){
$("#tooltip").empty();
$("#tooltip").css("display","none");
});
});
</script>
<div id="tooltip" class="tip"></div>
<!-- 微影空间ul列表 -->
<ul class="">
<li>
<span class="createtable" tpath='/img/20180909.jpg'>
<a href="www.baidu.com" target="_blank">
这个杀手不太冷
</a>
</span>
</li>
</ul>
<!-- 微影空间相关CSS -->
.tip{
display:none;
padding:5px;
}
<!-- 设置最大宽高后,系统会自动分配图片的比例(以高/宽为准,算出比例) -->
.tip img {
max-width: 320px;
max-height: 250px;
}
<!-- 微影空间相关JS -->
<script type="text/javascript">
$(function () {
//获取鼠标坐标
function mousePosition(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//hover某处显示悬浮框
$(".createtable").mouseover(function(e){
//获取鼠标位置函数
var mousePos = mousePosition(e);
var xOffset = 20;
var yOffset = 25;
$("#tooltip").css("display","block").css("position","absolute").css("top",(mousePos.y - yOffset) + "px").css("left",(mousePos.x + xOffset) + "px");
$("#tooltip").append('<img src="'+$(this).attr("tpath")+'" />');
});
//鼠标离开表格隐藏悬浮框
$(".createtable").mouseout(function(){
$("#tooltip").empty();
$("#tooltip").css("display","none");
});
});
</script>