经验分享程序开发文档资料数据资源其它资源

jQuery自适应横排下拉导航代码特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自适应横排下拉导航代码特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery自适应横排下拉导航代码特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<title>jQuery自适应横排下拉导航代码</title>
	<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="bg">
    <img class="bg" id="bg_01" src="image/02.jpg">
    <img class="bg" id="bg_02" src="image/03.jpg">
    <img class="bg" id="bg_03" src="image/06.jpg">
    <!-- <div class="bg" id="bg_01">
    <div class="bg" id="bg_02">
    <div class="bg" id="bg_03"> -->
</div>
<div id="header" class="container">
    <div id="header_logo" ></div>
    <div id="header_nav">
       <ul id="header_menu_list">
           <li class="header_menu_list header_menu_list_checked header_menu_list_fi"><a href="">首页</a></li>
           <li class="header_menu_list"><span></span><a href="">音乐</a></li>
           <li class="header_menu_list"><span></span><a href="">图片</a></li>
           <li class="header_menu_list"><span></span><a href="">文章</a></li>
           <li class="header_menu_list"><span></span><a href="">影片</a></li>
           <li class="header_menu_list"><span></span><a href="">关于</a></li>
           <div class="clear"></div>
       </ul>
       <div id="header_menu_details">
            <div id="header_menu_details_box">
                <div id="header_menu_details_mask">
                    <div class="header_detail_container">
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="header_detail_container">
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="header_detail_container">
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="header_detail_container">
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="header_detail_container">
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="header_detail_container">
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="header_detail_box">
                            <div class="header_detail_img">
                                <div class="header_detail_imgCover"></div>
                            </div>
                            <p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
       </div>
       </div>
    </div>
    <div id="header_search">
        <input class="header_search_text" type="text" name="" id="header_search_text" value="输入搜索内容">
        <input class="header_search_subm" type="submit" value="">
    </div>
    <div class="clear"></div>
</div>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>

JS代码(common.js):

/* *初始化部分页面数据 */
var viewHeight;
	//浏览器窗口可视高度var viewWidth;
	//浏览器窗口可视宽度var pageHeight;
	//文档页面高度var pageWidth;
	//文档页面宽度$(document).ready(function (){
	// DOM绘制完毕即开始运行，不等到，图片，文字的元素的加载//window是在所有元素均加载完成后才开始运行，注意区别 //alert(viewWidth+'/'+viewHeight+'/'+pageWidth+'/'+pageHeight)}
)window.onload = function(){
	//window是在所有元素均加载完成后才开始运行，注意区别 //延迟加载,用于处理部分因DOM加载耗时较长引起的BUG var t_load = setTimeout(function(){
	//刷新部分全局数据getValue();
	//进行页面调整pageAdjust();
}
,300);
	//delayTime}
$(window).resize(function(){
	//刷新部分全局数据getValue();
	//进行页面调整pageAdjust();
}
)function getValue(){
	/*全局变量 * 浏览器窗口可视高度 */
viewHeight = $(window).height();
	/*全局变量 * 浏览器窗口可视宽度 */
 viewWidth = $(window).width();
	//获取部分全局变量/*全局变量 * 文档高度 */
 pageHeight = $(document).height();
	/*全局变量 * 文档宽度 */
 pageWidth = $(document).width();
}
function pageAdjust(){
	//页面样式的调整//在初始化和页面尺寸变化时，从getValue()调用/* *nav_list的调整 */
var width_header_menu_list = $('#header').width() - 416;
	$('#header_menu_list').width(width_header_menu_list);
	var left_header_menu_list = (width_header_menu_list*0.28-12)/2+208;
	$('#header_menu_list').css('marginLeft',left_header_menu_list);
	//section_button_list位置调整console.log(viewHeight/2-50) $("#section_button").css('top',viewHeight/2-50 + "px");
	for (var i = 0;
	i <6;
	i++){
	$('.header_detail_container').eq(i).css('left',1000*i+'px');
}
//调整背景 $('#bg').height(viewHeight);
	$('.bg').height(viewHeight);
}
/* *header_nav_list上移动menu_detail移动特效 * */
(function(){
	var open_status = false;
	//true表示打开状态var run_status =false;
	//动画运行状态，true表示正在运行var run1_status = false;
	//nav的动画状态$('.header_menu_list').on('mouseenter',function(){
	/*移动到header_nav_list上时， *先判断menu_detail有没有打开，如果打开就直接进行左右切换，如果没有打开则先进行左右切换再打开 * */
 if(open_status){
	//打开状态if(!run_status){
	run_status = true;
	//正在运行var index = $(this).index();
	$('#header_menu_details_mask').animate({
	left:-1000*index+'px'}
,300,function(){
	run_status = false;
	//结束运行状态}
)}
}
else{
	//关闭状态 var index = $(this).index();
	$('#header_menu_details_mask').css('left',-1000*index+'px');
	if(!run1_status){
	$('#header_menu_details').slideDown();
	run1_status = true;
	//打开完毕，标记状态 open_status = true;
}
}
}
)$('#header_nav').on('mouseleave',function(){
	//鼠标离开nav区域，关闭header_menu_details$('#header_menu_details').slideUp(300,function(){
	run1_status = false;
}
);
	//关闭完毕，标记状态open_status = false;
}
)}
)();
	//不会自动提升/* *搜索框效果 * */
$('#header_search_text').on('focus',function(){
	$(this).css('color','black');
	var value = $(this).val();
	console.log(value);
	if( value == '输入搜索内容'){
	$(this).val('');
}
}
).on('blur',function(){
	$(this).css('color','#8e8e8e');
	var value = $(this).val();
	if( value == ''){
	$(this).val('输入搜索内容');
}
}
)/* *背景切换 */
var val ={
	fa_id:"bg",son_class:"bg",speed:7000,interval:10000,}
;
	banner(val);
	function banner(opts){
	//输入值为父级的ID以及最大子元素的类名 console.log(opts);
	console.log(opts.fa_id);
	var banner = document.getElementById(opts.fa_id);
	//获取当前banner的对象 var banner_img = $("#"+opts.fa_id).children("."+opts.son_class);
	//获取所有子元素的对象 var img_num = banner_img.length;
	//获取当前banner的图片张数 var speed = opts.speed;
	//渐变持续时间，单位：毫秒 var interval = opts.interval;
	//间隔时间 var currentImg = 0;
	//当前显示的图片，初始化时保留显示第一张图片。 init();
	//调用初始化函数； function init(){
	//初始化 console.log(img_num);
	//部分变量默认值初始化 if(!speed){
	speed = 1000;
	console.log(speed);
}
if(!interval){
	interval = 3000;
	console.log(interval);
}
if(speed<50){
	speed = 50;
	alert("速度时间间隔不得小于50ms");
}
if(speed>interval){
	interval = 2*speed;
	alert('变化时间不得大于变化间隔');
}
for(i=1;
	i<img_num;
	i++){
	//隐藏多余的图片 banner_img.eq(i).hide();
}
t1 = setTimeout(function(){
	picChange();
}
,3000);
}
function picChange(){
	//自动轮换 banner_img.eq(currentImg).fadeOut(speed);
	banner_img.eq((currentImg + 1)%img_num).fadeIn(speed);
	currentImg = (currentImg + 1)%img_num;
	t2 = setTimeout(function(){
	picChange();
}
,interval);
}
}

CSS代码(style.css):

*{padding:0;margin:0;}
body{font-family:Helvetica,arial,'微软雅黑',sans-serif;}
img{border:none;font-size:0;display:block;}
.clear{clear:both;}
.fl{float:left;}
.fr{float:right;}
a{text-decoration:none;color:black;}
li{list-style:none;}
.construct{width:100%;position:relative;}
.container{width:96%;margin:0 auto;position:relative;padding:0;}
#bg{width:100%;height:auto;background:url('../image/06.jpg');background-size:cover;position:absolute;left:0;top:0;z-index:0;overflow:hidden;}
.bg{width:100%;height:auto;position:absolute;}
#bg_01{background:url('../image/02.jpg');background-size:cover;}
#bg_02{background:url('../image/03.jpg');background-size:cover;}
#bg_03{background:url('../image/06.jpg');background-size:cover;}
#header{/*background-color:#f9f9f9;*/
 height:108px;border-bottom:#c9c9c9 2px solid;position:relative;z-index:10;background:url('../image/nav_bg.png');background-repeat:repeat;}
#header_logo{width:206px;height:65px;position:absolute;top:24px;left:2px;background-image:url('../image/index_logo.png');}
#header_nav{position:absolute;top:40px;width:100%;}
#header_menu_list{width:auto;height:68px;margin-left:208px;margin-bottom:0;}
.header_menu_list{width:12%;height:68px;float:left;line-height:68px;text-align:center;font-size:18px;color:#8e8e8e;position:relative;}
.header_menu_list_checked{border-bottom:#009cad 2px solid;}
.header_menu_list a{height:68px;width:100%;color:#fff;display:inline-block;text-decoration:none;transition:font-size 0.2s,color 0.5s;}
.header_menu_list_checked a{font-size:18px;color:#0099cc;}
.header_menu_list span{height:22px;width:2px;background-color:#ececec;position:absolute;left:0;top:23px;}
.header_menu_list a:hover{font-size:18px;color:#0099cc;}
#header_search{width:208px;height:32px;position:absolute;top:62px;right:10px;background-color:#edeeef;}
#header_menu_details{/*overflow:hidden;*/
 display:none;position:absolute;background-color:#f3f3f3;width:100%;height:170px;background:url('../image/nav_nemu_bg.png');background-repeat:x-repeat;}
.header_search_text{width:165px;height:30px;font-family:'微软雅黑';font-size:12px;color:#8e8e8e;background-color:transparent;border:none;outline-style:none;line-height:30px;text-indent:5px;float:left;}
.header_search_subm{width:32px;height:32px;float:right;background-color:#7bd2db;border:none;outline-style:none;background-image:url('../image/zoomIn.png');background-position:center center;background-repeat:no-repeat;}
.header_detail_container{width:1000px;height:170px;position:absolute;top:0;left:0;}
#header_menu_details_box{width:1000px;height:170px;margin:0 auto;overflow:hidden;position:relative;}
#header_menu_details_mask{width:6000px;height:170px;position:absolute;}
.header_detail_box{float:left;}
.header_detail_box{width:200px;height:170px;}
.header_detail_img{width:180px;height:85px;background:url('../image/nav_yang.jpg');background-size:cover;margin:25px 0 10px 10px;}
.header_detail_title img{display:inline-block;margin-right:8px;}
.header_detail_title{text-align:center;}
#tip{display:inline-block;width:100%;text-align:center;font-size:18px;color:#2b2b2b;margin-top:200px;position:relative;z-index:1000;}
#tip a{color:orange;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
445.46 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
445.46 KB
立即下载
齐静悦雁
了解
打赏作者 鼓励作者
Html Js 菜单导航特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章