基于jquery的侧边栏分享导航

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

在线预览源码下载

实现的代码。

html代码：

 <div class="zzsc"><a href="http://***/" class="lanren1"><img src="data:images/zzsc01.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://***/"class="lanren2"><img src="data:images/zzsc02.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://***/"class="lanren3"><img src="data:images/zzsc03.jpg" alt="爱编程" width="50" height="50" /></a><a href="http://***/" class="lanren4"><img src="data:images/zzsc04.jpg" alt="爱编程" width="50" height="50" /></a> <a href="http://***/"class="lanren5"><img src="data: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://***/Article/20126

基于jquery的侧边栏分享导航相关推荐

基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览源码下载部分代码: <div class=&quo ...
《基于JQuery和CSS的特效整理》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅 https://www.web ...
10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单下拉箭头翻转动画之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: 脚本之家 dl{width:150px;} dl,dd{margin:0;} dt{ backgro ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
一款基于jquery和css3实现的摩天轮式分享按钮
之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...

基于jquery的侧边栏分享导航

基于jquery的侧边栏分享导航相关推荐

最新文章

热门文章