文章目录

• 前言
• 一、html代码及说明
• 二、css代码及说明
• 三、js代码及说明
• 四、完整代码
• 五、效果图
• 总结

前言

主要我们来练习jQuery语法，这是我在学习jQuery时写的案例，感觉比较有意思。大家可以看一下，运用到你们自己写的网页中。

一、html代码及说明

        这个结构主要是用div装ul li里面放两张图片(一张大图一张小图)，一张为大图，一张为小图。先展示小图，鼠标放到图片上后用缓慢动画变成大图片。

        我这里是准备演示4个图片的缩放，所以代码如下：

二、css代码及说明

        首先平铺li 然后让第一个图显示大图（隐藏小图），其余的图全显示小图（隐藏大图）如下图所示

 代码如下：

* {margin: 0;padding: 0;}/* 大盒子 */.king {width: 1400px;height: 200px;}/* ul去黑点 */.king ul {list-style: none;width: 100%;}/* li样式 */.king ul li {position: relative;top: 0px;left: 0px;float: left;width: 200px;height: 200px;}/* 第一个显示大图li宽变成图片宽 */.king ul .current {width: 400px;} /* 大图样式 用定位把大图和小图叠起来，使宽度还为大图的宽度 而不是大图+小图的宽度*/.king ul li a .big {position: absolute;left: 0px;top: 0px;width: 400px;height: 200px;display: none;}/* 小图样式 */.king ul li a .small {position: absolute;left: 0px;top: 0px;width: 200px;height: 200px;}/* 第一个先显示大图 */.king ul .current a .big {display:inline-block;}/* 把第一个小图隐藏 */.king ul .current a .small {display: none;}

三、js代码及说明

        在用jQuery之前必须引入jQuery文件：

         当鼠标放到某个li身上时，用到排他思想：

                1.当前小li宽度变成400px（大图的宽度），同时小图淡出，大图淡入。

                2.其余兄弟小li宽度为200px,小图淡入，大图淡出。

代码：

            $(function(){// 鼠标经过$(".king li").mouseenter(function(){// 1.当前小li宽度变成400px，同时小图淡出，大图淡入$(this).stop().animate({width:400},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2.其余兄弟小li宽度为200px,小图淡入，大图淡出$(this).siblings("li").stop().animate({width:200},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})})

        这里fadeOut()就是淡出效果，fadeIn()是淡入效果。注意stop()是在做效果时要先停止上一次鼠标经过的操作，防止鼠标在短时间内经过多个图片发生排队效果。 

四、完整代码

五、效果图

        鼠标没有经过图片时效果图：

        鼠标经过第二张图效果（默认就是第一张显示大图）： 

         鼠标经过第三张图效果：

        第四张图也是一样，和我们分析写代码时一样。 

总结

        这里因为放的是图片，体现不出来图片淡入淡出的效果，还有缓慢动画的效果。感兴趣的可以自己运行体验一下。。。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！