jquery带下拉菜单和焦点图代码分享

2024-09-28 16:47:49

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧
运行效果图： ----------------------查看效果下载源码-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery带下拉菜单和焦点图如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带下拉菜单和焦点图</title>
<!-- base.css | 元素还原基础样式 -->
<link rel="stylesheet" type="text/css" href="templets/default/styles/base.css" />
<!-- main.css | 页面主体样式 -->
<link rel="stylesheet" type="text/css" href="templets/default/styles/main.css" />
<!-- js -->
<script type="text/javascript" src="templets/default/scripts/jquery-1.8.0.min.js" /></script>
<script type="text/javascript" src="templets/default/scripts/jquery.SuperSlide.2.1.1.js" /></script>
<script type="text/javascript" src="templets/default/scripts/public.js"></script>
</head>
<body>
 <!-- header -->
 <div class="header_full w_100">
  <div class="header">
   <!-- top_left | logo -->
   <div class="logo f_l"> </div>
   <!-- top_right -->
   <div class="top_right f_r">
    <!-- top_link -->
    <div class="top_link">
     <i>服务热线 12345678</i>
      
     <span>
      <a href="http://www.jb51.net" title="登录">登录</a>
      /
      <A href="http://www.jb51.net" title="注册">注册</A>/
      <A href="http://www.jb51.net" title="免费试用" >免费试用</A>

     </span>
    </div>
    <!-- menu -->
    <div class="nav_bar">
     <ul class="nav clearfix">

      <!-- 单一菜单 | end -->

      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="合作专区">合作专区</a></h3>
       <ul class="sub">
        <LI ><A href="http://www.jb51.net">欢迎合作</A> </LI>
        <LI ><A href="http://www.jb51.net">合作伙伴</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>

      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="客户服务">客户服务</a></h3>
       <ul class="sub">
        <LI ><A href="http://www.jb51.net">常见问题</A> </LI>
        <LI ><A href="http://www.jb51.net">购买指南</A> </LI>
        <LI ><A href="http://www.jb51.net">备案流程</A> </LI>
        <LI ><A href="http://www.jb51.net">售后服务</A></LI>
       </ul>
      </li>
      <li class="s">|</li>

      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="我的云">我的云</a></h3>
       <ul class="sub">
       <LI ><A href="http://www.jb51.net">服务控制台</A> </LI>
        <LI ><A href="http://www.jb51.net">会员中心</A> </LI>
  </ul>
      </li>
      <li class="s">|</li>

      <li class="m">
       <h3><a target="_blank" href="http://www.jb51.net" title="产品服务">产品服务</a></h3>
       <ul class="sub">
       <LI ><A href="http://www.jb51.net">云主机购买</A> </LI>
       <LI ><A href="http://www.jb51.net">360XP盾甲</A> </LI>
       <LI ><A href="http://www.jb51.net">360天擎</A> </LI>
       <LI ><A href="http://www.jb51.net">数据中心</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>

      <li class="m">
       <h3><a href="http://www.jb51.net" title="首页">首页</a></h3>
      </li>
      <li class="block"></li><!-- 滑动块 -->

     </ul>
    </div>
    <!-- menu | end -->
   </div>
  </div>
 </div>
 <!-- header | end -->

 <!-- banner -->
 <div class="full_banner">
  <div class="bd">
 <ul>
 <li style="background:url(templets/default/images/banner.jpg) #56C1ED center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li>
 <li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li>
 <li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://www.jb51.net"></a></li>
 </ul>
 </div>
 <div class="hd"><ul></ul></div>
 </div>
 <!-- banner | end -->

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是为大家分享的jquery带下拉菜单和焦点图代码，希望大家可以喜欢。

jQuery实现的左右移动焦点图效果

本文实例讲述了jQuery实现的左右移动焦点图效果.分享给大家供大家参考,具体如下: jquery 部分: $(function () { var _speed = 1000; var _len = 0; var _size = 150; var _direction = 'left'; function mar(){ if(_direction == 'left'){ if(_len >= 450){ _direction = 'right'; }else{ $(".flow ul&qu
jQuery实现标题有打字效果的焦点图代码

本文实例讲述了jQuery实现标题有打字效果的焦点图代码.分享给大家供大家参考,具体如下: 给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能.这款焦点图适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/ 完整实例代码代码点击此处本站
jQuery焦点图插件SaySlide

先来介绍SaySlide 2.0支持自定义如下功能: 1.上下左右方向播放以及jQuery的fadeOut.slideUp.hide效果: 2.自动播放时间间隔和动画播放的的速度: 3.是否显示标题: 4.是否在新窗口打开链接: 5.是否显示底部半透明背景: 6.按钮在底部显示的位置(左中右): 7.按钮默认背景色: 8.按钮激活状态颜色: 9.设置标题文字的样式: 10.触发按钮的事件: 下面就是重点的代码,分享给大家供大家参考,具体代码如下 (function($){ $.fn.saySli
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效

支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片.上下轮播图片.自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面:IE8+.以及较现代浏览器,不介意低版本浏览器的可以使用,当然也可以使用到移动端触屏. 支持响
基于jQuery全屏焦点图左右切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,
基于Jquery实现焦点图淡出淡入效果

本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码.分享给大家供大家参考.具体如下: 这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换间隔两个参数可以改. 运行效果截图如下: 具体代码如下: Html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8">
jquery实现多屏多图焦点图切换特效的方法

本文实例讲述了jquery实现多屏多图焦点图切换特效的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效

本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
jQuery焦点图轮播特效代码分享（3款）

本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果源码下载---------------------
jQuery实现企业网站横幅焦点图切换功能实例

本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jquery带下拉菜单和焦点图代码分享

相关推荐

随机推荐