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

重庆陈江林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

发表评论

电子邮件地址不会被公开。 必填项已用*标注