效果图如下
css代码
代码语言：javascript复制*{
margin: 0;
padding: 0;
}
ul{
width:900px;
margin: 0 auto;
}
ul li{
list-style: none;
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 20px;
float: left;
}
ul li img{
width: 100px;
height: 100px;
}
ul li .active{
width: 300px;
height: 300px;
position: absolute;
}html代码
代码语言：javascript复制 <ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
</ul>jq代码
代码语言：javascript复制 // 划入li 时添加节点
$("ul li").hover(
// 划入时 ， 2 滑出时
function(){
//创建一个img节点 ， 获取img 信息
var oimg=$(this).children().attr("src")
var img=$("<img class='active' src='" oimg "' /> ")
$(this).append(img)
},
function(){
$(this).children(".active").remove()
}
)
// 鼠标跟随
$("ul li").on("mousemove",function(e){
var xx=e.pageX
var yy=e.pageY
console.log(yy)
$(".active").css({
"left":xx,
"top":yy
})
})一个简单的效果完成了
