很棒的网站底部导航条效果

模板网 2014-09-25

很棒的网站底部导航条效果，访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。

打包下载：很棒的网站底部导航条效果

效果截图：

很棒的网站底部导航条效果

 

<title>很棒的网站底部导航条效果</title><style>
* {margin:0;padding:0;}
.dibian{ width:100%; height:84px; background:url(/demo/20140925/001/images/b_bg.png); position:fixed; bottom:0px; z-index:10000; font-family:"微软雅黑";}
.dibian ul{ width:960px; position:absolute; left:50%; margin-left:-480px;}
.dibian ul li{ width:80px; height:64px; background:url(/demo/20140925/001/images/b_bg2.png) no-repeat left top; float:left; display:inline; margin-top:2px; text-align:center; color:#fff; font-size:14px; padding-top:18px; position:relative;}
.dibian ul li a{ display:block; width:100%; height:100%; color:#fff;}
.dibian ul li.hover_col:hover{ background:#b48b3c url(/demo/20140925/001/images/b_bg2.png) no-repeat left top; cursor:pointer;}
.dibian ul li.b_txt{ width:318px; height:71px; padding-top:11px;}
.dibian ul li.b_yh:hover{ cursor:pointer;}
.dibian ul li.b_b{ width:2px;}
.dibian ul li.b_txt .b_text{width:235px; height:60px; background:url(/demo/20140925/001/images/b_txt.png); float:left; display:inline; margin-left:25px;}
.dibian ul li.b_txt .b_text textarea{ width:220px; height:50px; border:none; background:none; float:left; display:; margin-left:7px; margin-top:5px; color:#666;}
.dibian ul li.b_txt .b_text_an{ width:33px; height:60px; float:left; display:inline; cursor:pointer;}
.dibian ul li .b_ico{ width:25px; height:22px; background:url(/demo/20140925/001/images/b_ico.png); position:absolute; top:1px; right:0; padding-top:3px; text-align:center;}
.dibian ul li .b_ico1{ width:25px; height:23px; background:url(/demo/20140925/001/images/b_ico.png); position:absolute; top:1px; right:0; padding-top:2px; text-align:center;}
.dibian ul .b_wx .b_er{ width:162px; height:172px; position:absolute; top:-164px; right:-2px; opacity:0; transform: scale(0); -webkit-transform: scale(0);transform-origin: 100% 70%;-webkit-transform-origin: 100% 70%; transition: transform ease .3s,opacity ease .3s;-webkit-transition: all ease .3s; display:none###CODE-START###<title>很棒的网站底部导航条效果</title><style>
* {margin:0;padding:0;}
.dibian{ width:100%; height:84px; background:url(/demo/20140925/001/images/b_bg.png); position:fixed; bottom:0px; z-index:10000; font-family:"微软雅黑";}
.dibian ul{ width:960px; position:absolute; left:50%; margin-left:-480px;}
.dibian ul li{ width:80px; height:64px; background:url(/demo/20140925/001/images/b_bg2.png) no-repeat left top; float:left; display:inline; margin-top:2px; text-align:center; color:#fff; font-size:14px; padding-top:18px; position:relative;}
.dibian ul li a{ display:block; width:100%; height:100%; color:#fff;}
.dibian ul li.hover_col:hover{ background:#b48b3c url(/demo/20140925/001/images/b_bg2.png) no-repeat left top; cursor:pointer;}
.dibian ul li.b_txt{ width:318px; height:71px; padding-top:11px;}
.dibian ul li.b_yh:hover{ cursor:pointer;}
.dibian ul li.b_b{ width:2px;}
.dibian ul li.b_txt .b_text{width:235px; height:60px; background:url(/demo/20140925/001/images/b_txt.png); float:left; display:inline; margin-left:25px;}
.dibian ul li.b_txt .b_text textarea{ width:220px; height:50px; border:none; background:none; float:left; display:; margin-left:7px; margin-top:5px; color:#666;}
.dibian ul li.b_txt .b_text_an{ width:33px; height:60px; float:left; display:inline; cursor:pointer;}
.dibian ul li .b_ico{ width:25px; height:22px; background:url(/demo/20140925/001/images/b_ico.png); position:absolute; top:1px; right:0; padding-top:3px; text-align:center;}
.dibian ul li .b_ico1{ width:25px; height:23px; background:url(/demo/20140925/001/images/b_ico.png); position:absolute; top:1px; right:0; padding-top:2px; text-align:center;}
.dibian ul .b_wx .b_er{ width:162px; height:172px; position:absolute; top:-164px; right:-2px; opacity:0; transform: scale(0); -webkit-transform: scale(0);transform-origin: 100% 70%;-webkit-transform-origin: 100% 70%; transition: transform ease .3s,opacity ease .3s;-webkit-transition: all ease .3s; display:none\0; *display:none;}
.dibian ul .b_wx:hover .b_er{display: block;transform: scale(1); -webkit-transform: scale(1);opacity: 1;*display:block;}
</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
	$("#mm_text").focus(function() {
        "在此输入您的对话，直接咨询解疑！" == this.value && (this.value = "")
    });
    $("#mm_text").blur(function() {
        "" == this.value && (this.value = "在此输入您的对话，直接咨询解疑！")
    }); 
});
function mm_kst() {
    var a = document.getElementById("mm_text");
    if(a.value !="" && a.value !="在此输入您的对话，直接咨询解疑！"){
		openZoosUrl('chatwin','&e='+escape(a.value));
	}else{
		alert("请输入您要咨询的问题");
		a.focus();
	}
}
</script>

<div>
  <div style="width:100%; height:84px;">
    <div class="dibian">
      <ul>
        <li class="b_txt">
          <div class="b_text">
            <textarea id="mm_text">在此输入您的对话，直接咨询解疑！</textarea>
          </div>
          <div class="b_text_an"><img onclick="mm_kst()" src="/demo/20140925/001/images/b_txt_an.png"></div>
        </li>
        <li class="b_yh"><a href="#" target="_blank"><img src="/demo/20140925/001/images/b_zx.gif"><br>
          立即咨询</a>
          <div class="b_ico" id="kst_num" style="display: block; ">21</div>
        </li>
        <li class="hover_col"><a href="#" target="_blank"><img src="/demo/20140925/001/images/b_phone.png"><br>
          免费电话</a></li>
        <li class="hover_col"><a href="#" target="_blank"><img src="/demo/20140925/001/images/b_yh.png"><br>
          优惠</a>
          <div class="b_ico1">热</div>
        </li>
        <li class="hover_col"><a href="#" target="_blank"><img src="/demo/20140925/001/images/b_dt.png"><br>
          地图</a></li>
        <li class="hover_col"><a href="#" target="_blank"><img src="/demo/20140925/001/images/b_mf.png"><br>
          免费整形</a></li>
        <li class="b_wx hover_col"><img id="b_wx_xt" src="/demo/20140925/001/images/b_wx.png"><br>
          微信
          <div class="b_er"><img src="/demo/20140925/001/images/b_er.png"></div>
        </li>
        <li class="hover_col" id="ScrollToTop"><img src="/demo/20140925/001/images/b_db.png"><br>
          回到顶部</li>
        <li class="hover_col"><a href="#" target="_blank"><img src="/demo/20140925/001/images/b_sy.png"><br>
          首页</a></li>
        <li class="b_b"></li>
      </ul>
    </div>
  </div>
</div>
###CODE-END###; *display:none;}
.dibian ul .b_wx:hover .b_er{display: block;transform: scale(1); -webkit-transform: scale(1);opacity: 1;*display:block;}
&lt;/style&gt;

&lt;script src=&quot;http://libs.baidu.com/jquery/1.9.0/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
	$(&quot;#mm_text&quot;).focus(function() {
        &quot;在此输入您的对话，直接咨询解疑！&quot; == this.value &amp;&amp; (this.value = &quot;&quot;)
    });
    $(&quot;#mm_text&quot;).blur(function() {
        &quot;&quot; == this.value &amp;&amp; (this.value = &quot;在此输入您的对话，直接咨询解疑！&quot;)
    }); 
});
function mm_kst() {
    var a = document.getElementById(&quot;mm_text&quot;);
    if(a.value !=&quot;&quot; &amp;&amp; a.value !=&quot;在此输入您的对话，直接咨询解疑！&quot;){
		openZoosUrl(&#039;chatwin&#039;,&#039;&amp;e=&#039;+escape(a.value));
	}else{
		alert(&quot;请输入您要咨询的问题&quot;);
		a.focus();
	}
}
&lt;/script&gt;

&lt;div&gt;
  &lt;div style=&quot;width:100%; height:84px;&quot;&gt;
    &lt;div class=&quot;dibian&quot;&gt;
      &lt;ul&gt;
        &lt;li class=&quot;b_txt&quot;&gt;
          &lt;div class=&quot;b_text&quot;&gt;
            &lt;textarea id=&quot;mm_text&quot;&gt;在此输入您的对话，直接咨询解疑！&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class=&quot;b_text_an&quot;&gt;&lt;img onclick=&quot;mm_kst()&quot; src=&quot;/demo/20140925/001/images/b_txt_an.png&quot;&gt;&lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;b_yh&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_zx.gif&quot;&gt;&lt;br&gt;
          立即咨询&lt;/a&gt;
          &lt;div class=&quot;b_ico&quot; id=&quot;kst_num&quot; style=&quot;display: block; &quot;&gt;21&lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;hover_col&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_phone.png&quot;&gt;&lt;br&gt;
          免费电话&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;hover_col&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_yh.png&quot;&gt;&lt;br&gt;
          优惠&lt;/a&gt;
          &lt;div class=&quot;b_ico1&quot;&gt;热&lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;hover_col&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_dt.png&quot;&gt;&lt;br&gt;
          地图&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;hover_col&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_mf.png&quot;&gt;&lt;br&gt;
          免费整形&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;b_wx hover_col&quot;&gt;&lt;img id=&quot;b_wx_xt&quot; src=&quot;/demo/20140925/001/images/b_wx.png&quot;&gt;&lt;br&gt;
          微信
          &lt;div class=&quot;b_er&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_er.png&quot;&gt;&lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;hover_col&quot; id=&quot;ScrollToTop&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_db.png&quot;&gt;&lt;br&gt;
          回到顶部&lt;/li&gt;
        &lt;li class=&quot;hover_col&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;/demo/20140925/001/images/b_sy.png&quot;&gt;&lt;br&gt;
          首页&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;b_b&quot;&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

相关文章

  1. 利用jQuery实现的简单轮播效果

    利用jQuery实现的简单轮播效果,代码简单容易理解。 效果截图：

  2. 调用百度CDN提供的jQuery库来加速网站

    CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库，复

  3. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多 ，基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  4. 医疗网站常用的左右滑动Banner效果_jquery插件

    医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。 在线演示 使用方法： 1.在网页中引入一下代码： 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=

  5. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果 ，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

随机推荐

  1. 利用jQuery实现的简单轮播效果

    利用jQuery实现的简单轮播效果,代码简单容易理解。 效果截图：

  2. 调用百度CDN提供的jQuery库来加速网站

    CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库，复

  3. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多 ，基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  4. 医疗网站常用的左右滑动Banner效果_jquery插件

    医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。 在线演示 使用方法： 1.在网页中引入一下代码： 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=

  5. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果 ，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略