jquery实现简单易懂的图片展示小例子_Javascript教程-查字典教程网
jquery实现简单易懂的图片展示小例子
jquery实现简单易懂的图片展示小例子
发布时间:2016-12-30 来源:查字典编辑
摘要:HTML代码:复制代码代码如下:1234JS代码:复制代码代码如下:$(document).ready(function(){$("#box...

HTML代码:

复制代码 代码如下:

<body>

<div id="div">

<div id="imgCon">

<img src="img/1.jpg" id="img0"/>

<img src="img/2.jpg" id="img1"/>

<img src="img/3.jpg" id="img2"/>

<img src="img/1a.jpg" id="img3"/>

<img src="img/1.jpg"/>

</div>

</div>

<div num="0" id="box0">1</div>

<div num="1" id="box1">2</div>

<div num="2" id="box2">3</div>

<div num="3" id="box3">4</div>

</body>

JS代码:

复制代码 代码如下:

<script type="text/javascript">

$(document).ready(function(){

$("#box0").click(function(){

//$("#imgCon").slideUp(4200);

$("#imgCon").animate({top:'-225px'},"slow");

});

$("#box1").click(function(){

$("#imgCon").animate({top:'-450px'},"slow");

});

$("#box2").click(function(){

$("#imgCon").animate({top:'-675px'},"slow");

});

$("#box3").click(function(){

$("#imgCon").animate({top:'-900px'},"slow");

});

});

</script>

CSS:代码:

复制代码 代码如下:

<style type="text/css">

.box{

width:40px;

height:20px;

border:1px solid #000;

float:left;

cursor:pointer;

}

#imgCon img{

display:block;

padding:0;

margin:0;

width:360px;

height:225px;

}

</style>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类