jQuery彈出深色系層選單

阿新 • • 發佈：2019-01-18

低調奢華jQuery彈出層選單，使用新版的jQuery庫，相容多種瀏覽器。Demo展示：

本特效可以作為網站的引導頁，使用jQuery實現導航選單，滑鼠懸停，在右側傾斜而出，可以關閉。大圖可以選用深色的圖片。

效果圖如下：

程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" 
 />
<title>彈出層導航 - 何問起</title><base target="_blank" />

<link type="text/css" href="http://hovertree.com/texiao/layer/3/css/index.css" rel="stylesheet">
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" 
>
$(document).ready(function(){
function anim(duration){
$('#hovertreemin').animate(
{height: 'toggle'},
{duration: duration}
);
}
$('#hover'+'treeclose').on("mouseover",function() {
$('#hov'+'ertreeminbar').hide();
anim(60);
});

$('#hover'+'treemin').on("click", function () {
anim( 
60);
$('#hovertreeminbar').show();
})    
});
</script>

</head>

<body> 

<div class="hovertreebj"><img src="http://hovertree.com/hvtimg/bjafje/7o1qq4ge.gif" /></div>

<div id="hovertreeminbar"><a id="hovertreeclose" target="_self" href="javascript:;"><img src="http://hovertree.com/texiao/layer/3/images/wd02.png" /></a></div>

<div id="hovertreemin" style="display:none;position:absolute;top:0;right:0px;">
<div class="box-nav-bj"><img style="right:0px; top:0px;" src="http://hovertree.com/texiao/layer/3/images/wd06.png" /></div>
<ul class="box-nav">
<li><a href="http://hovertree.com/about/">關於我們</a></li>
<li><a href="http://hovertree.com/menu/webfront/">產品展示</a></li>
<li><a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm">案例展示</a></li>
<li><a href="http://hovertree.com/menu/zixun/">新聞中心</a></li>
<li><a href="http://hovertree.com/h/bjaf/rnqpxtsq.htm">新聞資訊</a></li>
<li><a href="http://hovertree.com/h/bjaf/meihua.htm">聯絡我們</a></li>
</ul>
<img src="http://hovertree.com/texiao/layer/3/images/wd07.png" alt="絲帶"/>
<div class="box-phone">
<p>公司主頁：</p>
<p>hwq2.com</p>
</div>
</div>

<div class="box-dibu">
<div class="box-dibu1">
<p>網站引導頁</p>
<p>何問起，分享網頁特效，前端知識，題庫程式碼等。<a href="http://hovertree.com/h/bjaf/yindaoye.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a></p>
</div>
<div class="box-dibu2">
<a href="http://hovertree.com/map/"><img src="http://hovertree.com/texiao/layer/3/images/wd04.png" /></a>
<a href="http://hovertree.com/about/"><img src="http://hovertree.com/texiao/layer/3/images/wd05.png" /></a>
</div>
</div>

</body>
</html>

jQuery彈出深色系層選單

低調奢華jQuery彈出層選單，使用新版的jQuery庫，相容多種瀏覽器。Demo展示：本特效可以作為網站的引導頁，使用jQuery實現導航選單，滑鼠懸停，在右側傾斜而出，可以關閉。大圖可以選用深色的圖片。效果圖如下：程式碼如下： <!DOCTYPE html> <html&

jquery 彈出遮罩層

/* 修改密碼是彈出遮罩層 */// url:傳遞aspx頁面// heigth: 彈出頁面顯示高度// width: 彈出頁面顯示寬度function frmMaks(url, heigth, width) { $("body").append("<div class='DivMask'>

JQuery 彈出層，始終顯示在屏幕正中間

filter scrolltop rep 指定 mode spa -c target mod 1.讓層始終顯示在屏幕正中間：樣式代碼： Html代碼 .model{ position: absolute; z-ind

jQuery彈出層layer插件的使用

layui scroll 彈出層 eight flow one max func 簡單引入插件layer 觸發彈出層的按鈕/鏈接 <a href="javascript:showPop();"> <img src="" /> </a

jquery-彈出層

ges cti 關閉按鈕 pointer otto int flow lock 內容 html： <html><head> <meta charset="utf-8"> <title>jquery彈出層</title&g

JQuery 彈出層，始終顯示在螢幕正中間

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

JQuery彈出選單時禁止頁面（body）滾動

最近在做手機端的彈出選單，但是選單彈出來後滑動手機螢幕的話頁面滾動總是會將選單滑上去，體驗非常不好，所以查了一下彈出選單時禁止頁面滾動的方法，整理如下：方法一：彈出選單時給body和html新增一個css樣式：height:100%;overflow:hidden;彈出層消失再去掉這個類。(只給body新

JS 彈出框 jquery 彈出層

幾種面板式樣

JS 彈出框 jquery 彈出層

幾種面板式樣功能： Js程式碼 //1. 傳入字串 art.dialog({ content: '我支援HTML'}); [js] view plain copy print?//1. 傳入字串art.dialog({ content: '我支援HTM

JQuery彈出層空間——JqModal

下面是從官方網站翻譯的一點內容，也就是比較常用的幾點，如果不正確的地方還望指正，如果想察看更詳細的資料，察看後面的網址即可！ JqModal 是jQuery的一個外掛，用來在web瀏覽器中顯示自定義通告，對話方塊和模型視窗。它的靈活和小巧類似於一把瑞士軍刀，而且它為通用

jquery 彈出層外掛facebox用法

在網上查找了一大堆jquery 彈出視窗的外掛，用法的時候要注意路徑問題現在就由小弟來介紹下具體怎麼用，高手勿噴！在網上下載一個facebox 取出facebox.js 和facebox.css

layer的使用官方演示與講解(jQuery彈出層外掛) ||表單驗證錯誤提示

概要 layer是一款近年來備受青睞的web彈層元件，這完全得益於她全方位的解決方案。她致力於服務各個水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操作體驗。在與同類元件的比較中，layer總是能輕易獲勝。她儘可能地在以更少的程式碼展現更強健的功能，且格外注重效能的提升、

jQuery彈出層_點選自身以外地方關閉彈出層

<html> <style> .hide{display:none;} </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script ty

jQuery彈出關閉遮罩層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

layer jquery 彈出層使用。

地址：http://sentsin.com/jquery/layer/ 特別說明：事件需自己繫結，以下只展現呼叫程式碼。 //初體驗 layer.alert('內容') //第三方擴充套件面板 layer.alert('內容', { icon: 1,

jQuery彈出側邊欄滑動選單實現思路

昨天下午下了一個用jQuery實現彈出側邊欄滑動選單的demo，其實看明白了很簡單，現在把思路整理一下。 js部分：主要用了jQuery的toggleClass()方法，該方法檢查每個元素中指定的類。

jquery 彈出浮層(div) + 遮蔽層方法一

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>test</title> <script type="tex

JQuery 彈出視窗，(div顯示與隱藏)，隱藏層半透明

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="te

jquery彈出框

pos AD hid doctype play pan start nbsp position <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

jQuery彈出深色系層選單

相關推薦