这次给大家带来jquery实现图片滑动切换（附代码），jquery实现图片滑动切换的注意事项有哪些，下面就是实战案例，一起来看一下。
JQuery实现简单的图片滑动切换特效
$('ul li').hover(function(){ $(this).stop(true).animate({ width: '789px' }, 500).siblings().stop(true).animate({width:'100'},500); })t图片的滑动 *{ margin:0; padding:0; } #main{ width:1089px; height:360px; margin:100px; background:url(../image/7.png); } ul li{ list-style:none ; width:100px; height:360px; float:left; } a{ color:#ffffff; text-decoration:none; } .txt{ width:100px; height:360px; float:left; background:rgb(182, 255, 0); } p{ font-family :"Arial.black",Gadugi.sans-serif ; font-size:18x; position:relative ; width:18px; font-weight:bold ; margin-top :120px; margin-left:48px; } .li1 { background: url( ../image/43.png); } .li2{background: url( ../image/42.png);} .li3{background: url( ../image/39.png);} .li4{background: url( ../image/47.png);}
登录后复制
jQuery图片从下往上滚动效果是一款jquery animate方法制作的图片从下往上滚动效果。
jQuery实现图片从下往上滑动切换效果 $(document).ready(function(){$('.box .box1').mouseover(function(){$(this).stop().animate({"top":"-514px"}, 200); })$('.box .box1').mouseout(function(){$(this).stop().animate({"top":"0"}, 200); })})
登录后复制
上演示图
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jquery miniui表格控件与合并单元格实现方法
jquery实现叠层3D文字方法详解
以上就是jquery实现图片滑动切换（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2768840.html
