<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FirstJquery</title>
<style>
ul{
list-style: none;
}
ul li{
float: left;
padding: 20px;
}
.preImg{
height: 50px;
width: 50px;
}
.later{
position: absolute;
/*top:200px;*/
}
</style>
</head>
<body>
<ul>
<li><a href="#"> <img src="../iconClockPicture/0.jpg" class="preImg" alt="1"></a></li>
<li><a href="#"> <img src="../iconClockPicture/1.jpg" class="preImg" alt="2"></a></li>
<li><a href="#"> <img src="../iconClockPicture/2.jpg" class="preImg" alt="3"></a></li>
<li><a href="#"> <img src="../iconClockPicture/3.jpg" class="preImg" alt="4"></a></li>
</ul>
</body>
<script src="jquery-2.2.0.min.js" type="text/javascript"> </script>
<!--<script src="//code.jquery.com/jquery-1.8.0.min.js"></script>-->
<script>
$(function(){
var $aImg=$('img');
$aImg.mouseover(function () { //鼠标放在小图上
var oSrc=$(this).attr('src');
var oAlt=$(this).attr('alt');
//创建大图
var $create = $("<div id='showimg' class='later'><img src=" +oSrc+ " alt=" +oAlt+ "><p>"+this.alt+"</p></div>");
// $('#showimg>img').attr('src' ,oSrc); //这样写会导致第一次显示不出图片,因为初始src='';
//添加到页面上
$('body').append($create);
$create.css('top', 200);
$create.css('left', 300);
$aImg.mouseout(function(){ //鼠标离开,清楚大图
$create.remove();
});
});
});
</script>
</html>
jQuery简单图片提示
最新推荐文章于 2018-10-23 11:03:10 发布