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


    描写叙述:

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

    效果图:


    说明:

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



  • 相关阅读:
    shop--11.前端展示系统--店铺列表(后端)
    shop--11.前端展示系统--首页展示(前端)
    shop--11.前端展示系统--首页展示(后端)
    shop--10.商品--解除商品与某商品类别的关联的实现
    shop--10.商品--商品管理(前端)
    shop--10.商品--商品管理(后端)--dao层--Service层--Controller层
    shop--10.商品--商品编辑(前端)及调试注意
    shop--10.商品--商品编辑(后端)--Controller层
    shop--10.商品--商品编辑(后端)--Service层
    shop--10.商品--商品编辑(后端)--dao层
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5166599.html
Copyright © 2020-2023  润新知