付费节点推荐

免费节点

节点使用教程

演 示 下 载

原文地址: http://w3c.bcoder.cn/35.html

简介

jQuery微信扫描关注网页特效是一款基于jquery+css3实现的带微信二维码跟返回顶部代码特效，可自行修改图片二维码。

浏览器兼容

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

使用方法

1、引入文件

<link rel="stylesheet" href="css/animation.css">

<link rel="stylesheet" href="css/index.css">

 

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

2、HTML

<div id="code"></div>

 

<div id="code_img"></div>

 

<a id="gotop" href="javascript:void(0)"><img src="images/fhjt.png" alt=""/></a>

3、CSS

/*返回顶部开始*/

#code,#code_hover {

    width:40px;

    height:195px;

    background:url(../images/icon.png) no-repeat;

    position:fixed;

    right:50px;

    cursor:pointer;

    _position:absolute;

    _bottom:auto;

    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

}

#code {

    background-position:-189px 0px;

    bottom:120px;

    _margin-bottom:120px;

}

#code_hover {

    background-position:-189px 0px;

    bottom:120px;

    _margin-bottom:120px;

}

#gotop {

    background-position:-276px -310px;

    bottom:67px;

    _margin-bottom:67px;

    width:40px;

    height:40px;

    position:fixed;

    right:50px;

    cursor:pointer;

    _position:absolute;

    _bottom:auto;

    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

}

#code_img {

    width:270px;

    height:355px;

    background:url(../images/icon.png) 92px 109px no-repeat;

    position:fixed;

    right:90px;

    bottom:67px;

    cursor:pointer;

    display:none;

    _position:absolute;

    _bottom:auto;

    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

    _margin-bottom:67px;

}

/*返回顶部结束*/

4、JavaScript

<script type="text/javascript">

    function b(){

        h = $(window).height();

        t = $(document).scrollTop();

        if(t > h){

            $('#gotop').show();

        }else{

            $('#gotop').hide();

        }

    }

    $(document).ready(function(e) {

 

        b();

 

        $('#gotop').click(function(){

            $(document).scrollTop(0);

        });

 

        $('#code').hover(function(){

            $(this).attr('id','code_hover');

            $('#code_img').show();

            $('#code_img').addClass('a-fadeinL');

        },function(){

            $(this).attr('id','code');

            $('#code_img').hide();

        })

 

    });

 

    $(window).scroll(function(e){

        b();

    });

</script>

未经允许不得转载：Bcoder资源网 » jQuery微信扫描关注网页特效

相关推荐