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

最新推荐文章于 2022-02-19 11:12:43 发布

weixin_34211761

最新推荐文章于 2022-02-19 11:12:43 发布

阅读量355

点赞数

文章标签： javascript ViewUI

描写叙述：

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

效果图：

说明：

用到了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>

weixin_34211761

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标滑过显示图片大图效果

描写叙述：当用户将鼠标放到图片上时。显示图片的大图。效果图：说明：用到了mouseover、mouseout、mousemove三个事件。分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。对于mouserover事件。做下面几件事：获取原标题，并将标题置为空，防止title和提示框同一时候出现。创建提示框对象，并将图片地址和title放入当...
复制链接

扫一扫