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

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

效果截图：

&lt;title&gt;很棒的网站底部导航条效果&lt;/title&gt;&lt;style&gt;
* {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:&quot;微软雅黑&quot;;}
.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;

随机推荐

调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。百度公共CDN为您的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。使用方法: 加载JS库，复
Jquery幻灯片特效jquery.KinSlideshow-1.1.js
KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多，基本能满足你在网页上使用幻灯片(焦点图)效果。演示页面: 演示一演示二
jQuery实现的返回顶部功能
jQuery实现的返回顶部功能
jQuery日期选择器插件jquery.date_input.js
官网： http://jonathanleighton.com/projects/date-input/ 下载： http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
医疗网站常用的左右滑动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=

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

相关文章

随机推荐