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

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

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

描写叙述:

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

效果图:

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

说明:

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116142.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Centos重装ssh服务

    Centos重装ssh服务

  • Double转BigDecimal并保留两位小数出现异常: java.lang.ArithmeticException: Rounding necessary

    Double转BigDecimal并保留两位小数出现异常: java.lang.ArithmeticException: Rounding necessary分享知识传递快乐Double转BigDecimal并保留两位小数出现异常:java.lang.ArithmeticException:Roundingnecessary。代码如下:publicstaticvoidmain(String[]args){Doubled=0.10;BigDecimalbigDecimal=newBigDecimal(d).setScale(2);System.out.println(bigD…

  • vue cli 3 升级到 vue cli 4 方法步骤及升级点总结「建议收藏」

    vue cli 3 升级到 vue cli 4 方法步骤及升级点总结「建议收藏」vuecli3升级到vuecli4指南vuecli3升级到vuecli4方法步骤及升级点总结vue-cli3升级vue-cli4官方英文升级文档,中文滞后一.首先,在全局安装最新的VueCLI:npminstall-g@vue/cli#ORyarnglobaladd@vue/cli检查安装的版本vue-V#输出:@vue/cli4.x.x说明@vue/cli4安装成功(vuecli3的版本会输出3.x.x)

    2022年10月24日
  • SpringBoot整合Druid「建议收藏」

    SpringBoot整合Druid「建议收藏」SpringBoot整合DruidDruid简介配置数据源配置Druid数据源监控Druid数据源具有监控的功能,并提供了一个web界面方便用户查看,类似安装路由器时,人家也提供了一个默认的web页面。Druid简介Java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池。Druid是阿里巴巴开源平台上一个数据库连接池实现,结合了C3P0、DBCP等DB池的优点,同时加入了日志监控。Druid可以很好的监控DB池连接和SQL的执行情

  • Ubuntu(20.04)中安装Pycharm(2020.1.2)详细教程「建议收藏」

    Ubuntu(20.04)中安装Pycharm(2020.1.2)详细教程「建议收藏」一、下载并解压Pycharm1、官网下载:https://www.jetbrains.com/pycharm/download/#section=linux学习使用,下载community版本即可2、下载下来是tar.gz格式,将文件传入到虚拟机中。vmware安装了增强功能可直接拖拽。如果无法使用,则可以设置共享文件夹,可自行网上搜索。共享后的文件夹在ubuntu中的目录位置是:/mnt/hgfs/你设置的共享文件夹3、将文件复制(cp)或移动(mv)到/opt文件目录下。并解压(ta

  • Python学习(一)-环境搭建之PyCharm专业版激活成功教程

    Python学习(一)-环境搭建之PyCharm专业版激活成功教程PyCharm专业版激活成功教程1、下载地址:https://www.jetbrains.com/pycharm/download/#section=windows2、直接运行下载好的3、选择安装路径:E:\Pycharm\PyCharm2018.2.44、根据电脑配置打钩5、Install安装,安装后不打开软件6、将C:\Windows\System32\dri…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号