您的位置：首页 > Web前端 > JQuery

jQuery简单图片提示

2016-02-08 20:08 781 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航