类似淘宝产品预览的快速实现（jquery）

╰半橙微兮° 2024-02-17 16:01 4阅读 0赞

本次用例采用的是jquery的技术，如下注意事项：

1、引入jquery的js文件

2、提供三张源图片

3、注意图片路径

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <% String path=request.getContextPath(); %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
    	$("ul li").css({"list-style-type":"none","display":"inline","margin-left":"10px"});
    	$("img").css({"height":"100px","width":"100px"});
    	var x=10;
    	var y=10;
    	$("a.tooltips").mouseover(function(e){
    		this.myTitle=this.title;
    		this.title="";
    		var imgTitle=this.myTitle?"<br/>"+this.myTitle:"";
    		var tooltips="<div id='tooltips1'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";
    		$("body").append(tooltips);
    		$("#tooltips1").css({
    			"margin-top":(e.pageY+y)+"px",
    			"margin-left":(e.pageX+x)+"px"	
    		}).show("fast");
    	}).mouseout(function(){
    		this.title=this.myTitle;
    		$("#tooltips1").remove();
    	}).mousemove(function(e){
    		$("#tooltips1").css({
    			"top":(e.pageY+y)+"px",
    			"left":(e.pageX+x)+"px"	
    		});
    	});
    });
    
    </script>
    </head>
    <body>
    	<ul>
    		<li><a href="<%=path %>/img/10_52.png" class="tooltips" title="图片一"><img src="<%=path %>/img/10_52.png" alt="图片一"></a></li>
    		<li><a href="<%=path %>/img/10_53.png" class="tooltips" title="图片二"><img src="<%=path %>/img/10_53.png" alt="图片二"></a></li>
    		<li><a href="<%=path %>/img/10_55.png" class="tooltips" title="图片三"><img src="<%=path %>/img/10_55.png" alt="图片三"></a></li>
    	</ul>
    </body>
    </html>

附上web目录结构图：

![Center][]

效果图：

![Center 1][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/0bab96af29554bb3ae3e5ecc2ace4176.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/bc655b64a9b04e19b4943ad7b71b8dc6.png