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

鼠标悬停 图片自动放大功能 jquery

2016-11-11 12:45 477 查看
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
ul,li{ list-style:none; float:left; }
</style>
<script>
$(function(){
$("#gallery li").mouseover(function(){
var y = $(this).offset().top+50;
var x = $(this).offset().left+50;
var imgsrc = $(this).children().attr("src");
var html = "<div id='pop' style='position:absolute; top:"+y+"px;left:"+x+"px;'> <img src='"+imgsrc+"' width='400' height='300'/></div>";
$("body").append(html);
});
$("#gallery li").mouseout(function(){
$("#pop").remove();
});
})
</script>
<ul id="gallery">
<li><img src="http://m2.quanjing.com/2m/sps009/4251r-4561.jpg" width="60" height="60"></li>
</ul>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: