jQuery图片预览

最新推荐文章于 2023-06-28 09:55:31 发布

蓝色羽翼

最新推荐文章于 2023-06-28 09:55:31 发布

阅读量582

点赞数

分类专栏： Ajax+jQuery 文章标签： jQuery图片预览图片预览

本文链接：https://blog.csdn.net/zhangquanok/article/details/8281953

版权

Ajax+jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="F:/新建文件夹/EditPlus/cs/jquery-1.7.1.js"></script>
  <style type="text/css">

#ad{
	position:absolute;//绝对定位，不可少
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;//初始隐藏，增强效果
}
#aaa{
	width:300px;
	height:300px;
}
.im{
	width:100px;
	height:100px;
}
</style>
  <script type="text/javascript">
  $(document).ready(function(){
	  var x=10;
	  var y=20;
	$(".ad").mouseover(function(e){
		this.myTitle = this.title;
		this.title="";
		var ad = "<div id='ad'>"+this.myTitle+"<br/><img id='aaa' src='F:/456/P_1.jpg'></img>"+"<br/>"+"底部文字"+"</div>";
		$("body").append(ad);//将ad元素动态的添加到body中
		$("#ad").css({
			"top":(e.pageY+y)+"px",
			"left":(e.pageX+x)+"px"
			}).show("fast");
		}).mouseout(function(){
			this.title = this.myTitle;
			$("#ad").remove();
		}).mousemove(function(e){
		$("#ad").css({
			"top":(e.pageY+y)+"px",
			"left":(e.pageX+x)+"px"
			})
		});
  });
  </script>
 </head>

 <body>
  <p><a href="#" class="ad" title="图片预览"><img class="im" src="F:/456/P_1.jpg"></img></a></p>
 </body>
</html>