JavaScript和CSS实现详情图片显示大图特效

最新推荐文章于 2022-06-15 18:58:41 发布

爱学习的蹭蹭

最新推荐文章于 2022-06-15 18:58:41 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/jilongliang/article/details/43168195

版权

JavaScript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
	<title>JavaScript和CSS实现详情图片显示大图特效</title>
	<meta http-equiv="content/text" charset="utf-8">
	<style type="text/css">
		BODY {
			FONT-SIZE: 14px;
			LINE-HEIGHT: 1.5;
			TEXT-DECORATION: none;
			FONT-FAMILY: simsun, Arial, "宋体";
			background-color: #FFFFFF;
		}
		td a:HOVER {
			color: red;
			background-color:#89d9fa;
		}
		 
		 #lookImg /*新增加大图样式*/
		{
			margin: 0 auto;
			border: 1px solid #0F0F0F;
			padding: 20px;
			height:660px;
			width: 480px;
			background: #FFFFFF;
			display: none;
			position: absolute; /*  这个对显示鼠标的位置很重要，如果不是绝对位置的话，将显示的地方不一样*/
			vertical-align: middle;
			text-align: center;
			font-family: Arial;
		}
	 
</style>
	<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
		
	<script>
		$(function(){
			
			$(".lookImages").mouseover(function (e) {
				var p=$(this).attr("p");
				var lookImg = "<div id = 'lookImg'>";
					lookImg+= "<img src ='"+p+"'  height='460px' width='460px' />";
					lookImg+= "</div>";
				 
				$("body").append(lookImg);
				$("#lookImg").css({
				   "bottom": (e.pageY/2) + "px",
				   "right": (e.pageX/2) + "px"
				}).show("slow"); 
			}).mouseout(function () {
				$("#lookImg").remove();
			}).mousemove(function (e) {
				$("#lookImg").css({
					 "bottom": (e.pageY/2) + "px",
					 "right": (e.pageX/2) + "px"
				});
			});//----mouseover--end
		});
	
	</script>
	
</head>

<body>

	<div>
		<a class="lookImages" style="color: blue;cursor: pointer;"
		p="http://weilailm.duapp.com/wechat/resource/images/qrcode_for_med.jpg">lookImages</a>
	</div>

</body>

</html>