彈窗漸隱漸出效果
經常看到有各種各樣的彈窗,一直不知道是怎麼回事,查了查,原理挺簡單的。
先貼出html/css程式碼
.back { display:none; position:absolute; top:0; left:0; height:100%; width:100%; background:black; z-index:1000; cursor:pointer; opacity:0.6; filter:alpha(opacity=60); } .box { position:absolute; left:25%; top:25%; width:500px; height:auto; display:block; z-index:8030; display: none; } .skin{ position:relative; padding:15px; background:#f9f9f9; border:1px solid #eee; color:#444; height:300px; width:485px; } .close { position: absolute; top:-18px; right:-18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; background-image: url(fancybox_sprite.png); }
<body>
<button id="open">Open</button>
<div class="back"></div>
<div class="box">
<div class="skin">
<div class="close"></div> <!--圖片按鈕及背景取自42qu.com-->
</div>
</div>
</body>
程式碼很簡單,主要的是一個按鈕,用於新增彈出窗事件,在實際應用中可以其他任何元素。 另外就是兩層div,最開始兩個div都是隱藏的,彈窗出來後,.back顏色為透明黑色,box為彈窗,另外還有個close關閉按鈕。最終效果如下圖
下面我們來用jQuery來實現效果。
$(function() {
$('#open').click(show);
$('.back, .close').click(hide);
function show() {
$('.back').fadeIn(700);
$('.box').fadeIn('normal');
};
function hide() {
$('.back').fadeOut(700);
$('.box').fadeOut('normal');
}
});
這樣一個簡單的漸隱漸出彈窗就實現了,點選close或黑色透明背景彈出都將關閉。
還有一個效果我沒實現,點選
相關推薦
彈窗漸隱漸出效果
經常看到有各種各樣的彈窗,一直不知道是怎麼回事,查了查,原理挺簡單的。 先貼出html/css程式碼 .back { display:none; position:absolute; top:0; left:0; height:100%; width:100%
前端模擬手機屏幕圖片漸隱漸現效果實現
pad style int 循環 sel 慢慢 inter 定時器 height 在網站上,我們經常會看到這樣的效果,有一個IphoneX的手機屏幕,然後屏幕上會像真的一樣,會出現各種動畫效果,譬如圖片的漸隱漸現。今天我們就嘗試做一個這樣的效果。 HTML頁面結構
Vue 動畫 過度效果(漸隱漸現)
首先一個toggle 效果: <div id="root"> <div v-if="show">hello world</div> <button @click="handleClick">切換</button> </
UGUI 實現介面 漸隱漸現 FadeIn/Out 效果
孫廣東 2015.7.10其實熟悉NGUI的人,應該知道 實現漸隱漸現 FadeIn/Out 效果是很方便的,因為父物件 的 改變會自動影響到子物件。 比如 UIWidget、UIPanel等元件都有 Alpha屬性,在Inspector面板上可以直接設定拖拽的改變看看。
開啟動畫效果——漸隱漸現效果
啟動某項程式時我們往往都能看到不同的“開機動畫”,千變萬化的動畫也只不過是四種基本動畫衍變美化而成的。 四種android動畫效果:alpha 漸變透明度動畫效果 scale 漸變尺寸伸縮動畫效果
vue中封裝動畫元件(漸隱漸現效果)
<body> <div id="root"> <comp :dis="show"> <div>hello</div>
iPhone開發--漸隱漸顯動畫效果
1、最簡單,最實用,最常用的[移動動畫] //移動一個view ---------------------------------------------------------------------------------------------------------
android圖片漸隱漸現動畫效果
最近專案中需要用到一個過渡動畫,就是一個圖片漸隱漸現,然後重複五次後過渡動畫消失,首先說下我的思路,一個timer,重複執行,然後執行的時候肯定要不斷呼叫顯示、隱藏動畫。其中定時器每次重複的時間是動畫顯示(或隱藏)的時間 public class Mai
UGUI DOTween漸隱漸現
Tween tweenAlpha;tweenAlpha = DOTween.To(() => MaskSpr.fillAmount, x => MaskSpr.fillAmount = x, 1f, RISE_TIME).OnComplete(() =>
Android自定義載入等待Dialog彈窗控制元件(仿ios效果實現)
效果圖 使用說明 1、專案下的build.gradle新增 allprojects { repositories { ... maven { url 'https://www.ji
兩個漸隱漸現圖片輪播
<style>div,ul, ol, li, h1,h2, p{margin:0;padding:0}body{font-size:0.8em;letter-spacing:1px;font-family:"微軟雅黑"; line-height:1.2}a{col
移動端實現彈出框漸顯和漸隱效果
在移動端想實現一個彈出框漸漸出現和消失的效果。由於用的是vue.js,所以寫法有些獨特,用變數控制是否顯示類名。但是核心解決方法就是CSS3的animation屬性應用還有CSS中的z-index應用,必須初始化定義讓彈出框在最底部。還有就是opacity屬性的應用,這樣才有漸健彈出和漸漸消失的效果。給彈出框
安卓仿知乎個人主頁,實現巢狀滑動和漸隱效果
本篇文章已經授權微信公共號guolin_blog(郭霖)獨家釋出 先看知乎的效果: 再看我們實現的效果: 網上也有很多巢狀滑動的例子,先說說我這個的優點。 1.頭部可以參與滑動 2.下面可以加viewpager 3.支援Recycler
使用Selector時增加漸入漸出動畫效果
API11 之後,Selector中增加了兩個屬性,android:enterFadeDuration和 android:exitFadeDuration,取值int,單位是毫秒。 設定這兩個屬性之後,從一種狀態切換到另一種狀態時,就會有一個漸入漸出的動畫效
如何在Unity中實現文字的漸隱效果?
1.首先建立一個GUIText物件。2.在Project面板中新建一個C#指令碼命名為FadingMessage,雙擊該指令碼進行編輯,新增如下程式碼。 using UnityEngine; using System.Collections; public clas
CSS3實現文字漸隱效果
<!DOCTYPE html> <html> <head> <style> div{ -webkit-animation: twinkling 1s infinite ease-in-out } .animated{ -webkit-animation-
js彈出框、對話框、提示框、彈窗總結
js彈出框、對話框、提示框、彈窗總結一、JS的三種最常見的對話框//====================== JS最常用三種彈出對話框 ======================== //彈出對話框並輸出一段提示信息 function ale() { /
百度地圖 彈窗效果,標註總顯示在左上角
scroll coder 自動 poi level edr local board 放大縮小 現象一: 地圖彈窗先隱藏 ->顯示地圖彈窗->設置marker -> 設置centerAndZoom 看效果標註層定點位置有問題(因顯隱),中心點還是相對
頁面彈窗效果 帶有確認取消按鈕 類似 confrim效果
auto fff document 沒有 color cti -c confirm eat 上代碼 先寫js 建立各個元素到頁面上 這裏面對應的三個參數是 內容和兩個按鈕內的內容 newconfrim ("彈窗內容","取消","完成") /*
jQuery實戰6:優雅的彈窗效果
彈窗是網頁中經常看到的效果,以前的彈窗是用window.open()等方式在瀏覽器視窗新建另一個新視窗來完成的,這種彈窗方式現在已經被很多瀏覽器所攔截。今天我們來用更加友好的方式來實現彈窗效果。完成的功能效果如圖: 如圖,在瀏覽器的左上方是兩個button按鈕,按下之後分別彈出