图片悬浮效果

图片悬浮效果如图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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值