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

最新推荐文章于 2016-01-07 18:26:00 发布

Happy编程

最新推荐文章于 2016-01-07 18:26:00 发布

阅读量2.2k

点赞数

分类专栏：前端技术文章标签： jquery 图片放大预览大图

本文链接：https://blog.csdn.net/wanghaiping1993/article/details/47066283

版权

前端技术专栏收录该内容

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目录结构图：

效果图：

Happy编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
类似淘宝产品预览的快速实现（jquery）

本次用例采用的是jquery的技术，如下注意事项：1、引入jquery的js文件2、提供三张源图片3、注意图片路径代码如下：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here/js/jquery-1.8
复制链接

扫一扫