类似淘宝产品预览的快速实现（jquery）-蒲公英云

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

本次用例采用的是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>