基于jquery的侧边栏分享导航

今天给大家分享一款基于jquery的侧边栏分享导航。这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

在线预览   源码下载

实现的代码。

html代码:

 <div class="zzsc">
        <a href="http://www.w2bc.com/" class="lanren1">
            <img src="images/zzsc01.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
                class="lanren2">
                <img src="images/zzsc02.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
                    class="lanren3">
                    <img src="images/zzsc03.jpg" alt="爱编程" width="50" height="50" /></a>
        <a href="http://www.w2bc.com/" class="lanren4">
            <img src="images/zzsc04.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://www.w2bc.com/"
                class="lanren5">
                <img src="images/zzsc05.jpg" alt="爱编程" width="50" height="50" /></a>
    </div>

css3代码:

 *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img
        {
            border: 0;
        }
        body
        {
            background: #ccc;
        }

        .zzsc
        {
            width: 50px;
            height: 250px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -125px;
            z-index: 900;
        }
        .zzsc a
        {
            width: 50px;
            height: 50px;
            line-height: 50px;
            float: left;
            display: block;
            text-align: right;
        }
        .zzsc .lanren1
        {
            background: #305790;
        }
        .zzsc .lanren2
        {
            background: #2BA9D2;
        }
        .zzsc .lanren3
        {
            background: #CF4C3A;
        }
        .zzsc .lanren4
        {
            background: #4698CA;
        }
        .zzsc .lanren5
        {
            background: #F9694E;
        }

js代码:

  $(function () {
            $(‘.zzsc a‘).hover(function () {
                $(this).animate({ width: ‘65px‘ }, 300);
            }, function () {
                $(this).animate({ width: ‘50px‘ }, 300);
            });
        });

via:http://www.w2bc.com/Article/20126

时间: 2024-10-10 07:21:15

基于jquery的侧边栏分享导航的相关文章

一款基于jquery的侧边栏导航

之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览   源码下载 实现的代码. html代码: <div style="position: relative; overflow: hidden;"> <div class="top"> <img src="menu.png" height="35&qu

基于jquery宽屏菜单导航【精品】

demo预览地址:http://www.qhttl.com/content/view/2014/07/18/jiaoben75/jiaoben75/index.html 下载地址:基于jquery宽屏菜单导航 基于jquery宽屏菜单导航[精品],布布扣,bubuko.com

基于jquery仿天猫分类导航banner切换

分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览   源码下载 部分代码: <div class="yHeader"> <div class="yNavIndex"> <div class="pullDown"> <h2 class="pullDownTitle"> 所有商品分类 </h

基于jQuery右侧带缩略图导航的焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可实现图片的上下切换动画. 在线预览   源码下载 实现的代码. html代码: <div id="example5" class="slider-pro"> <div class="sp-slides"> <div cl

一款基于jquery滑动后固定于顶部的导航

之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1> Scroll down</h1> <h2> And watch the menu bar</h2> <nav id="menu"> <h1 id="site

一款基于jquery和css3的响应式二级导航菜单

今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="header"> <div class="logo"> <a href="#">Responsive Nav</a> </div> <nav>

分享10款基于jquery和css3的web前端的动画特效

1.响应式圆形动画导航菜单 响应式的移动导航栏,现在我发现了一个新的技术(有关HTML5)可以在没有使用Javascript的情况下做一个响应式菜单.这个菜单可以自动排列到左边.中间或者右边).不像之前的教程需要点击某"开关"来显示或隐藏菜单,现在只需要把鼠标移到菜单按钮就会出现菜单列表(而且会提示当前所在的导航位置). 在线演示 源码下载 2.Canvas 示例:4种超炫的网站动画背景效果 今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段

一款基于jquery固定于顶部的导航

今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览   源码下载 实现的代码: html代码: <div id="page"> <div id="toolbar" data-0="height:192px" data-128="height: 64px"> <div id=

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div class="