悬浮微信二维码微博置顶特效.上

重庆陈江林SEO分享:悬浮微信二维码微博置顶特效,非常不错的置顶脚本,而且功能包含微信二维码、微博、置顶于一身!

悬浮置顶特效使用JS+CSS来实现,多数脚本都这样。跟重庆SEO之前介绍的3D标签、浮动小人都是一回事,无非调用JS和CSS来控制样式,下面介绍需要使用的源代码:

1、CSS源代码(zdtx_style.css):

ul{margin:0;padding:0;}
fieldset,img,input{border:0 none;}
li{list-style:none;}
/*右边浮动*/
#jump{position:fixed;top:300px;left:50%;margin-left:600px;width:40px;z-index:400;_position:absolute;_top:expression(documentElement.scrollTop + "px");}
#top,#share,#reply,#sina,#ceping,#weixin{display:block;width:40px;height:42px;cursor:pointer;}
#top{background:url(../images/top.png) repeat scroll 0% 0% transparent;}
#share{background:url(../images/share.png) repeat scroll 0% 0% transparent;}
#reply{background:url(../images/reply.png) repeat scroll 0% 0% transparent;}
#sina{background:url(../images/sina.png) repeat scroll 0% 0% transparent;}
#weixin{background:url(../images/weixin.png) repeat scroll 0% 0% transparent;}
#top:hover{background:url(../images/toped.png) repeat scroll 0% 0% transparent;}
#share:hover{background:url(../images/shared.png) repeat scroll 0% 0% transparent;}
#reply:hover{background:url(../images/replyed.png) repeat scroll 0% 0% transparent;}
#sina:hover{background:url(../images/sinad.png) repeat scroll 0% 0% transparent;}
#weixin:hover{background:url(../images/weixind.png) repeat scroll 0% 0% transparent;}
#ceping{background:url(../images/ceping.png) repeat scroll 0% 0% transparent;}
#ceping:hover{background:url(../images/cepinged.png) repeat scroll 0% 0% transparent;}
.yjbys_sj { position:absolute; z-index:9999; top:150px; display:none;}
.yjbys_sj img{ border:1px solid #DDDDDD;}
#EWM{ position:absolute; right:40px; display:none;}
#EWM img{ width:150px; height:150px;}
#EWZ{ position:absolute; right:40px; display:none;}
#EWZ img{ width:150px; height:150px;}
.red{ color:red}

2、JS源代码(jquery.min.js),在《如何给网站加上浮动小人》中有使用过该文件,所以此源代码此处省略,如果没有jquery.min.js源代码的可以去下,我们只需要调用该源代码;

3、所需images文件:

fdtx

4、效果图如下:

fdtx (2)

Ps:在网站实现悬浮微信二维码微博置顶特效,在《悬浮微信二维码微博置顶特效.下》中介绍,学习新的知识不断武装自己!

《悬浮微信二维码微博置顶特效》下载:http://pan.baidu.com/s/1gdf4xs3

来源:陈江林SEO博客

重庆SEO | 长寿SEO | 遵义SEO | 仁怀SEO

微云SEO

微云SEO

微信公众号:vy-seo 欢迎您的加入!
wordpress

30分钟建站技术

全面系统的WP技术培训,从零基础到模板制作达人!
重庆陈江林

SEO技术培训

月入4000元,当前网络最真实的赚钱方法!
作者:
该日志由 Jianglin 于2014年07月04日发表在网站建设分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原文固定链接: http://www.chenjianglin.cn/807.html/
标签: ,
【上一篇】
【下一篇】

您可能感兴趣的文章:

发表评论


正在加载中……