web前端群，189394454，有视频、源码、学习方法等大量干货分享
效果知识点：html常用标签, css浮动定位盒模型，javascript自定义动画、鼠标跟随移动特效等。
👇html代码：
<div id="box">
<div class="pic">
<ul>
<li>
<img src="images/1.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/1.jpg" />
</div>
</li>
<li>
<img src="images/2.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/2.jpg" />
</div>
</li>
<li>
<img src="images/3.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/3.jpg" />
</div>
</li>
<li>
<img src="images/4.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/4.jpg" />
</div>
</li>
<li>
<img src="images/5.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/5.jpg" />
</div>
</li>
<li>
<img src="images/1.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/1.jpg" />
</div>
</li>
<li>
<img src="images/2.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/2.jpg" />
</div>
</li>
<li>
<img src="images/3.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/3.jpg" />
</div>
</li>
<li>
<img src="images/4.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/4.jpg" />
</div>
</li>
<li>
<img src="images/5.jpg" />
<div class="bigImg">
<img style="width:380px;height:350px;" src="images/5.jpg" />
</div>
</li>
</ul>
</div>
</div>
👇css代码：
<style type="text/css">
*{margin:0px;padding:0px;}
body{overflow:hidden;}
#box{
width:100%;height:211px;
margin:80px auto;background:url("images/bg1.jpg");
padding-top:35px;
}
.pic{width:100%;height:175px;position:relative;}
.pic ul{width:5000px;}
.pic ul li{
width:254px;height:175px;border:1px solid #000;
float:left;list-style-type:none;
position:relative;
}
img{width:254px;height:175px;}
.bigImg{
width:380px;height:350px;border:5px solid #ddd;
box-shadow:0px 0px 20px #000;
position:absolute;left:0px;top:0px;z-index:10;
display:none;
}
</style>
👇javascript代码：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
var i = 0;
var time = 0;
$(".pic ul li").hover(function(){
clearInterval(time);
clearInterval(time);
$(this).children(".bigImg").show();
},function(){
$(this).children(".bigImg").hide();
time = setInterval("junmper()",10);
})
$(".pic ul li").mousemove(function(e){
var x = e.clientX; //鼠标当前点距离浏览器窗口左边的距离,也就是大图距离浏览器窗口左边的距离
var y = e.clientY; //鼠标当前点距离浏览器窗口上边的距离,也就是大图距离浏览器窗口上边的距离
var li_x = $(this).offset().left; //当前li距离浏览器窗口左边的距离
var li_y = $(this).offset().top;//当前li距离浏览器窗口上边的距离
var yd_x = x-li_x; // 鼠标当前点距离li左侧的距离
var yd_y = y-li_y; // 鼠标当前点距离li上侧的距离
$(this).children(".bigImg").css({left:yd_x,top:yd_y});
})
function junmper(){
i--;
$(".pic").css("left",i+'px');
if (i==-window.innerWidth)
i=0;
}
time = setInterval("junmper()",10);
</script>
网友评论