一个简洁易用的图片切换效果,自己写之前在网上找了一些看了看,能完美实现效果的,除了jq,还都用了另外的运动插件,又增加了学习成本不说,用起来还麻烦,而用jq或js写的都有问题,要么最后一个图片会抖动,要么动起来很不流畅,总之效果不怎么理想,而且这么个小功能代码量还不小.
所以就自己动手用jq写了一个简单的原型分享出来,希望对大家有所帮助!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>最简洁的jq手风琴效果</title>
<style>
*{margin: 0; padding: 0;}
#content {
list-style: none;
width:800px;
height: 300px;
position: relative;
overflow: hidden;
margin:50px auto;
}
#content li{
width:500px;
height:300px;
position: absolute;
}
</style>
</head>
<body>
<ul id="content">
<li style="background:red;left:0px;"></li>
<li style="background:blue;left:500px;"></li>
<li style="background:yellow;left:600px; "></li>
<li style="background:green;left:700px; "></li>
</ul>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script >
$(function(){
$('li').mouseenter(function(){
for(var i=0;i<$('li').length;i++){
if($(this).index()>=i){
$('li').eq(i).stop().animate({left:i*100});
}else{
$('li').eq(i).stop().animate({left:i*100+400});
}
}
})
});
</script>
</html>
随时随地看视频
热门评论
-
qq_子非鱼_782017-12-20 0
-
mkw_wwg2017-03-06 0
-
mkw_wwg2017-03-06 0
查看全部评论223333333322挺好的！
一行代码就解决了，只是还有点儿瑕疵，与大神共同进步
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>最简洁的jq手风琴效果</title> <style> *{margin: 0; padding: 0;} #content { list-style: none; width:800px; height: 300px;overflow: hidden; margin:50px auto; } #content li{ width:100px; height:300px;float: left;transition: all 0.3s linear;} #content .active{ width: 500px; } </style> </head> <body> <ul id="content"> <li style="background:red;" class="active"></li> <li style="background:blue;"></li> <li style="background:yellow;"></li> <li style="background:green;"></li> </ul> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $("li").mouseenter(function(){$(this).addClass('active').siblings().removeClass('active');}) </script> </html>貌似还有更简单的方法。。。