鼠标移入图片放大问题

最新推荐文章于 2022-05-18 17:11:14 发布

不懂事的哼哼

最新推荐文章于 2022-05-18 17:11:14 发布

阅读量907

点赞数

分类专栏：前端小功能文章标签： html css jquery

本文链接：https://blog.youkuaiyun.com/qq_30405009/article/details/79727737

版权

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

小功能

9 篇文章

订阅专栏

今天纠结了好一阵，为什么我放在ul下面的图片会高度有所不同，这里面的难点display的使用方式了，深刻理解display显得狠重要了，从事前端开发已经有半年了。现在又在研究后台，前台的东西还得好好巩固一下啦！

效果展示，鼠标到的位置图片，指定的图片放大

尤其要主意其中的a，img 标签的display属性要记得设置哦！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片提示信息</title>
    <script  type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
   
	<style type="text/css" >
	ul{
		width: 980px;
		margin: 30px auto;
		box-sizing: border-box;
	}
	ul li{
		list-style: none;
		display: inline-block;
		width: 300px;
        height: 300px;
        box-sizing: border-box;
        line-height: 300px;
        box-shadow: 1px 2px 5px rgba(0,0,0,.3) ;
	}
         .tooltip{
         	display: block;
         	width: 300px;
            height: 300px;
            box-sizing: border-box;
         }	
         .tooltip img{
         	width: 100%;
         	display: block;
         	cursor: pointer;
         }	
          #tooltip{
          	position: absolute;
          	display: none;
            width:600px;
            height: 600px;
          }
           #tooltip img{
           	width: 100%;
           }
            #tooltip p{
            	height: 50px;
            	color: #fff;
            	font-size: 16px;
            	background-color: #000;
            	padding:0 0 0  20px;
            }
	</style>
</head>
<body>
	<ul>
		<li><a href="img/312322.jpg" title="水果图片集" class="tooltip"><img src="img/312322.jpg" alt="水果"></a></li>
		<li><a href="img/342354543.jpg" title="柿子" class="tooltip"><img src="img/342354543.jpg" alt="水果"></a></li>
		<li><a href="img/8943823050.jpg" title="西红柿" class="tooltip"><img src="img/8943823050.jpg" alt="水果"></a></li>
		<li><a href="img/74934954395.jpg" title="水果图片集" class="tooltip"><img src="img/74934954395.jpg" alt="水果"></a></li>
		<li><a href="img/timg.jpg" title="水果图片集" class="tooltip"><img src="img/timg.jpg" alt="水果"></a></li>
		<li><a href="img/timg.jpg" title="水果图片集" class="tooltip"><img src="img/timg.jpg" alt="水果"></a></li>
	</ul>
	<script type="text/javascript">
		$(function(){
	        var x = 10;
	        var y = 20;
	        $("a.tooltip").mouseover(function(e){
                  this.myTitle = this.title;
                  // console.log(this.myTitle);
                  this.title = " ";
                  var  imgTitle = this.myTitle? "<br>"+ this.myTitle:"";
                  var  tooltip = "<div id='tooltip'><img src=' " +this.href +"  'alt='产品预览图' />" + "<p>" +imgTitle +"</p></div>";
                  $('body').append(tooltip);
                  $('#tooltip').css({
                  	'top':(e.pageY+y)+'px',
                  	'left':(e.pageX+x)+'px'
                  }).show('fast');
	        }).mouseout(function(){
	        	this.title = this.myTitle;
	        	$("#tooltip").remove();
	        }).mousemove(function(e){
                $('#tooltip').css({
                	'top':(e.pageY+y)+'px',
                  	'left':(e.pageX+x)+'px'
                });
                console.log(e.pageX);
	        });
		})
	</script>
</body>
</html>

我的代码结构，希望能帮助到有疑惑的朋友们。