jQuery元素動畫方式滑動效果
本章節分享一段程式碼例項,它實現了利用jQuery的animate()方法實現元素滑動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ font-family: 'Signika Negative', sans-serif; } #head{ z-index:10; position:absolute; top:0; left:0; width:100%; height:30px; border-color:#0055ff; border-width:0 0 10px 0; border-style:solid; background:#0088ff; } #head li{ list-style:none; float:left; display:block; height:30px; padding:0 10px; cursor:pointer; font-size:26px; } #head li:hover{ color:#ffffff; background:#0055ff; border-color:#0011ff; border-width:0 0 10px 0; border-style:solid; } #box{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } #bg{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; } .cell{ width:100%; height:100%; overflow:auto; } .list{ position:absolute; top:50%; left:50%; width:800px; height:600px; margin:-300px 0 0 -400px; background:#0088ff; } #class_1{ position:absolute; top:0; left:0; } #class_2{ position:absolute; top:0; left:100%; } #class_3{ position:absolute; top:0; left:200%; } #class_4{ position:absolute; top:100%; left:0; } #class_5{ position:absolute; top:100%; left:100%; } #class_6 { position:absolute; top:100%; left:200%; } #class_7{ position:absolute; top:200%; left:0; } #class_8{ position:absolute; top:200%; left:100%; } #class_9{ position:absolute; top:200%; left:200%; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#l_01").click(function(){ $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow"); }); $("#l_02").click(function(){ $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow"); }); $("#l_03").click(function(){ $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow"); }); $("#l_04").click(function(){ $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow"); }); $("#l_05").click(function(){ $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow"); }); $("#l_06").click(function(){ $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow"); }); $("#l_07").click(function(){ $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow"); }); $("#l_08").click(function(){ $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow"); }); $("#l_09").click(function(){ $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow"); }); }); </script> </head> <body> <div id="head"> <li id="l_01">1</li> <li id="l_02">2</li> <li id="l_03">3</li> <li id="l_04">4</li> <li id="l_05">5</li> <li id="l_06">6</li> <li id="l_07">7</li> <li id="l_08">8</li> <li id="l_09">9</li> </div> <div id="box"> <div id="bg"> <div class="cell" id="class_1"> <div class="list"></div> </div> <div class="cell" id="class_2"> <div class="list"></div> </div> <div class="cell" id="class_3"> <div class="list"></div> </div> <div class="cell" id="class_4"> <div class="list"></div> </div> <div class="cell" id="class_5"> <div class="list"></div> </div> <div class="cell" id="class_6"> <div class="list"></div> </div> <div class="cell" id="class_7"> <div class="list"></div> </div> <div class="cell" id="class_8"> <div class="list"></div> </div> <div class="cell" id="class_9"> <div class="list"></div> </div> </div> </div> </body> </html>
相關文章
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫
- jQuery滑動方式上下左右滾動效果jQuery
- jQuery 效果 – 滑動jQuery
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- android: slide 滑動動畫效果AndroidIDE動畫
- jQuery 效果 – 動畫jQuery動畫
- jQuery動畫方式設定元素的透明度jQuery動畫
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- jquery外掛——點選交換元素位置(帶動畫效果)jQuery動畫
- jquery實現滑動門效果詳解jQuery
- JavaScript元素動畫效果JavaScript動畫
- Android 進出activity的滑動動畫效果Android動畫
- jQuery以動畫方式設定元素的透明度jQuery動畫
- jQuery 效果 – 停止動畫jQuery動畫
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- 簡單的動畫方式實現的元素下拉和上卷效果動畫
- jQuery動畫效果的刪除行效果jQuery動畫
- jquery動態生成元素並飄落效果jQuery
- jquery實現的滑動軸效果程式碼例項jQuery
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫
- 教你三種jQuery框架實現元素顯示及隱藏動畫方式jQuery框架動畫
- jQuery 動畫效果程式碼例項jQuery動畫
- 前端基礎-jQuery的動畫效果前端jQuery動畫
- 前端與移動開發----jQuery----JQuery動畫,JQ操作元素屬性,JQ操作元素樣式(大量案例)前端移動開發jQuery動畫
- jQuery背景色漸變動畫效果jQuery動畫
- jquery實現的點選頁面動畫方式平滑定位到某元素程式碼jQuery動畫
- 10個超讚的jQuery圖片滑塊動畫jQuery動畫
- Android 設定TextView滑動滾動條和滑動效果AndroidTextView
- jQuery動畫的顯示與隱藏效果jQuery動畫
- jQuery動畫的顯示與隱藏效果!jQuery動畫
- jQuery入門筆記之(四)動畫效果jQuery筆記動畫
- CSS3 元素水平運動和背景色切換動畫效果CSSS3動畫
- JavaScript元素抖動效果JavaScript
- jQuery滑動導航選單jQuery
- 9個精巧絢麗的jQuery圖片滑塊動畫jQuery動畫
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- 用js實現動畫效果核心方式JS動畫
- 三種滑動方式的比較(scrollTo & view動畫 & 改變佈局引數)View動畫