<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
width: 390px;
height: 220px;
} ul li {
width: 390px;
height: 220px;
border: 1px solid orange;
} ul li img {
width: 384px;
height: 214px;
} .opacity_li {
opacity: 0.5;
} div img {
width: 608px;
height: 424px;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$("ul li").hover(function() {
// over
//鼠标移入当前列透明度为1 其他列为0.5
//$(this).css("opaacity", "1").siblings("li").addClass("opacity_li"); var $imgsrc = $(this).find("img").attr("src");
var $div = "<div><img src='" + $imgsrc + "'/></div>";
$("body").append($div);
$("div img").attr("src", $imgsrc);
}, function() {
// out
//鼠标移出的时候把其他列透明度去掉
//$(this).siblings().removeClass("opacity_li"); $("div").remove();
}).mousemove(function(e) {
$("div").css({
position: "absolute",
left: e.pageX + 10,
top: e.pageY + 10
}); //设置div绝对定位 坐标就是距离鼠标当前的位置
});;
})
</script>
</head> <body>
<ul>
<li>
<img src="data:images/问奈何.png" alt="" />
</li>
<li>
<img src="data:images/夏承凛.png" alt="" />
</li>
<li>
<img src="data:images/怀璧明罪问奈何.png" alt="" />
</li>
</ul>
</body> </html>