jQuery實(shí)現(xiàn)推拉門效果
更新時(shí)間：2020年10月19日 11:41:25 作者：willard_cui
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)推拉門效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)推拉門效果的具體代碼，供大家參考，具體內(nèi)容如下
方法：anemate(), stop(), siblings()
動(dòng)畫效果：
<!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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)翻動(dòng)fadeIn顯示的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)翻動(dòng)fadeIn顯示的方法,實(shí)例分析了jQuery中fadeIn方法的使用技巧,需要的朋友可以參考下2015-03-03
基于jQuery實(shí)現(xiàn)表單提交驗(yàn)證
本文給大家分享的是一段基于jQuery的實(shí)現(xiàn)簡單的表單提交驗(yàn)證的代碼，非常簡單實(shí)用，推薦給有相同需求的小伙伴們參考下。2014-11-11
jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果，實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
使用jquery為a連接綁定點(diǎn)擊事件，具體代碼如下，感興趣的朋友可以參考下，希望可以幫助到你2013-05-05
jQuery 1.5.1 發(fā)布，全面支持IE9 修復(fù)大量bug
jQuery 1.5.1發(fā)布了！這是自jQuery1.5發(fā)布以來第一個(gè)小版本更新，并且解決了很多BUG。2011-02-02
jQuery ajax調(diào)用WCF服務(wù)實(shí)例
這篇文章主要介紹了jQuery ajax調(diào)用WCF服務(wù)實(shí)例,包含服務(wù)器端和客戶端的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-07-07
JQuery復(fù)選框全選效果如何實(shí)現(xiàn)
這篇文章主要介紹了JQuery復(fù)選框全選效果如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jQuery組件easyui基本布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery easyui基本布局實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jquery實(shí)現(xiàn)簡易驗(yàn)證插件封裝
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡易驗(yàn)證插件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
jQuery Tags Input Plugin（添加/刪除標(biāo)簽插件）詳解
本文主要介紹jQuery Tags Input Plugin添加/刪除標(biāo)簽插件的用法，非常實(shí)用，有需要的朋友可以參考一下。2016-06-06