jQuery實現手機豎直手風琴效果
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery扁平UI設計垂直手風琴特效 - 何問起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/65/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/65/css/demo.css"> <!--必要樣式--> <link rel="stylesheet" href="http://hovertree.com/texiao/jquery/65/css/style.css"> </head> <body> <div class="accordion"> <div class="item"> <img src="http://hovertree.com/texiao/jquery/65/img/Location-Pin.png" alt=""> <h3>Location</h3> </div> <p>您正在何問起特效庫。<a href="http://hovertree.com/">首頁</a> - <a href="http://hovertree.com/texiao/">特效庫</a> - <a href="http://hovertree.com/texiao/jquery/65/">手風琴</a></p> <div class="item"> <img src="http://hovertree.com/texiao/jquery/65/img/Headphones.png" alt=""> <h3>Music</h3> </div> <p>好聽音樂。<audio controls="controls" src="http://cms.hovertree.com/hovertreesound/hwqxnl.mp3"></audio></p> <div class="item"> <img src="http://hovertree.com/texiao/jquery/65/img/Lightbulb.png" alt=""> <h3>Notes</h3> </div> <p>受到網店的影響，<a href="http://hovertree.com/h/bjaf/6sm1esjw.htm">服裝店</a>的生意逐漸有所下降，老闆找何問起去談，大概是準備跟上網購潮流，讓何問起準備一下， 要在網上開網店，要為服裝店建立網站。</p> <div class="item"> <img src="http://hovertree.com/texiao/jquery/65/img/Bookmarks.png" alt=""> <h3>Books</h3> </div> <p>電子書：<br /><a href="http://hovertree.com/h/bjaf/246k8ygw.htm">http://hovertree.com/h/bjaf/246k8ygw.htm</a> <br /><a href="http://hovertree.com/h/bjaf/dianzishu.htm">電子書特效</a></p> <div class="item"> <img src="http://hovertree.com/texiao/jquery/65/img/Lightning-Bolt.png" alt=""> <h3>Tendances</h3> </div> <p>燃燒吧 何問起 <a href="http://hovertree.com/h/bjaf/xmrvjvng.htm">看看</a></p> </div> <div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/vk9yjrpm.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a></div> <script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script> <script type="text/javascript"> (function ($) { 'use strict'; $('.item').on("click", function () { $(this).next().slideToggle(100); $('p').not($(this).next()).slideUp('fast'); }); }(jQuery)); </script> </body> </html>
相關推薦
jQuery實現手機豎直手風琴效果
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=
jQuery實現側邊導航手風琴效果
側導航的手風琴效果是指，點選含子層導航的父導航時，使原本隱藏的子導航顯示，再次點選，子層導航又恢復隱藏，同時，同一時間只有一個父導航的子導航能夠顯示 $("#sidenav > li").find('.sub-nav').hide();
jQuery實現加入購物車飛入動畫效果之開發不停，填坑不止（起點位置在Y軸方向位置偏移）
開發時為了完成購物車的飛入拋物線，因為懶惰隨大流使用了fly.js外掛，用的時候遇到的兩個坑坑~~ 1. 有滾動條時，拋物體的起點位置在Y軸方向上有位置偏移，偏大 2. 頁面有滾動條時，拋物體的結束位置不一樣，偏大 我：(⊙o⊙)…煩煩的。。。這就是用別人東西的代價 。。。。。。 不
Jquery實現購物車的新增動畫效果
//這塊獲取的購物車的位置 #cartN這個是購物車的id var offset = $('#cartN').offset(); //這塊是店家新增的時候的時候的操作 $(".add1").click(function () { &
jquery實現圖片輪播圖效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n
jquery實現錨點連結平滑效果
在html頁面加上錨點連結後寫上以下js程式碼： $(function(){ $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.rep
jQuery實現QQ空間圖片展示效果
[ { "id": "1.jpg", "title": "圖片1", "user": "M.J", "avatar": "http://0.gravatar.com/avatar/8a97a5bce
jquery實現手機端滑動選擇日期控制元件
最近在做手機端網頁，需要選擇日期控制元件，找到幾個使用iscroll或者mobiscroll實現的日期外掛，但是檔案都太大，所以自己用jquery實現一個，基本可用，只有單個js檔案，僅９kb 使用示
jQuery實現加入購物車飛入動畫效果
當您在電商購物網站瀏覽中意的商品時，您可以點選頁面中的“加入購物車”按鈕即可將商品加入的購物車中。本文介紹藉助一款基於 jQuery的動畫外掛，點選加入購物車按鈕時，實現商品將飛入到右側的購物車中的效果。 HTML 首先載入jQuery庫檔案和jquery.fly.min.
jQuery實現側邊導航欄效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <m
jquery實現側邊欄手風琴三級導航選單demo
jquery實現側邊欄手風琴三級導航選單 效果圖: 引入檔案，font-awesome為字型庫檔案： <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-aweso
jquery實現手機端長按響應事件
var time = 0;//初始化起始時間 $("#imgDiv").on('touchstart', '.previewImg', function(e){ e.stopProp
jquery實現導航欄吸頂效果（簡潔版）
憋說話，直接上程式碼，先是最最重要的js： $(function(){ var a = $('#course-tab'), b =a.offset();//返回或設定導航欄相
android 使用LinearGradient實現手機開機文字閃爍效果
LinearGradient：線性漸變意思,這個也是繼承了Shader類,先看下它的建構函式： public LinearGradient(float x0, float y0, float x1,
jQuery實現的手風琴效果
wrap this utf wid src sele height add doc 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UT
jquery 實現簡單的手風琴效果
PE charset ML wid 圖片 eight list true 效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">
jQuery實現手風琴效果
-h 兩個 radi 作用 del 4.2 擁有 高效 head <div class="panel"> <div class="panel-header"> jQuery的核心特性 </div> <d
自定義textview實現豎直滾動跑馬燈效果
xml佈局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr
Jquery 實現手風琴切換效果
這兩天公司需要實現一個手風琴切換的效果，但是網上搜了下，多半都是基於Bootstrap寫的，一個小小的功能，用到這麼大的庫，覺得有些太誇張了，當然引入之後使用效果可能會好看些，但是也導致了，Bootstrap的公共樣式可能會和你本地的樣式衝突，為了不必要的麻煩，
jQuery實現輪播效果(一) - 基礎
時代 例如 自己 -1 fun 時間間隔 order .html 官方 前戲： XXXX年XX月XX日，經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿，怎麽完畢得了網頁設計這樣高端的活兒呢！之前盡管有學過一點HTML。CSS的知識。可