jQuery实现推拉门效果


Posted in jQuery onOctober 19, 2020

本文实例为大家分享了jQuery实现推拉门效果的具体代码,供大家参考,具体内容如下

方法:anemate(), stop(), siblings()

动画效果:

jQuery实现推拉门效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>推拉门</title>
 <script src="../jquery.min.js"></script>
 
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  .container{
   margin: 50px auto;
   width: 988px;
   height: 405px;
   overflow: hidden;
  }
  img{
   width: 538px;
   height: 405px;
  }
  .container ul li{
   float: left;
   width: 75px;
   height: 405px;
  }
 
  .container ul li.active{
   width: 538px;
  }
 </style>
</head>
<body>
<div class="container">
 <ul>
  <li class="active"><img src="images/1.jpg" alt="图片1"></li>
  <li><img src="images/2.jpg" alt="图片1"></li>
  <li><img src="images/3.jpg" alt="图片1"></li>
  <li><img src="images/4.jpg" alt="图片1"></li>
  <li><img src="images/5.jpg" alt="图片1"></li>
  <li><img src="images/6.jpg" alt="图片1"></li>
  <li><img src="images/7.jpg" alt="图片1"></li>
 </ul>
</div>
<script type="text/javascript">
 $(document).ready(function () {
  $(".container ul li").mouseover(function () {
   // $(this).addClass("active");
   // $(this).siblings().removeClass("active");
   $(this).stop(true,false ).animate({width:538},500);
   $(this).siblings().stop(true,false).animate({width:75},500);
  });
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
You might like
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php实现的RSS生成类实例
2015/04/23 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
[原创]图片分页查看
2006/08/28 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python中 Lambda表达式全面解析
2016/11/28 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
50道外企软件测试面试题
2014/08/18 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
新春寄语大全
2014/04/09 职场文书
事业单位考核材料
2014/05/21 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS