鼠标滑过显示图片大图效果

全栈程序员-站长 • 2022年1月25日下午3:00 • 未分类 • 阅读 55

大家好，又见面了，我是全栈君。

描写叙述：

当用户将鼠标放到图片上时。显示图片的大图。

效果图：

鼠标滑过显示图片大图效果

说明：

用到了mouseover、mouseout、mousemove三个事件。分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。

对于mouserover事件。做下面几件事：

获取原标题，并将标题置为空，防止title和提示框同一时候出现。

创建提示框对象，并将图片地址和title放入当中显示。

设置该提示框的位置并显示。

对于mouseout做下面几件事情：

将title还原，预备下次使用。

移除提示框

对于mousemove，我们须要动态的调整提示框的位置。

由于还没看到动画那一块，所以动画处理的不是太好，以后在优化吧。

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
	.tooltip
	{
		display:inline-block;
		margin-left:50px;
	}
	.tp
	{
		color:red;
	}
</style>
</head>

<body>
<div style="margin-left:120px; float:left">

<div class="tooltip">
<img src="./image/1.jpg" width="200px" title="二尾又旅——人柱力二位由木人">
</div>

<div class="tooltip"> 
<img src="./image/2.jpg" width="200px" title="九尾九喇嘛——人柱力漩涡鸣人">
</div>

<div class="tooltip">
<img src="./image/3.jpg" width="200px" title="八尾牛鬼——人柱力奇拉比">
</div>

<div class="tooltip">
<img src="./image/4.jpg" width="200px" title="六尾犀犬——人柱力羽高">
</div>

</div>
</body>
<script type="text/javascript">
	$(".tooltip img").mouseover(function(e){
		this.Mytitle = this.title;
		this.title = ""; 
		var $tooltip = "<div id='tooltip'><img src='"+this.src+"' width='70%'><br/><p class='tp'>"+this.Mytitle+"</p></div>";
		$("body").append($tooltip);	//加入到页面中
		$("#tooltip").css(
			{
				"top":e.pageY+"px",
				"left":e.pageX+"px",
				"position":"absolute"
			}).show("fast");	//设置x坐标和y坐标，并显示
	}).mouseout(function(){
		this.title = this.Mytitle;
		$("#tooltip").remove();	//将该div移除
	}).mousemove(function(){
		$("#tooltip").css(
		{
				"top":e.pageY+"px",
				"left":e.pageX+"px",
		});
	});
</script>
</html>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/116142.html原文链接：https://javaforall.net