影子互联

专注深圳网站建设

网站当前网址添加扫描到手机二维码方法

时间:2016-08-10 22:16:38,点击:0

 在文章或产品页面添加扫描到手机二维码方法

<!--二维码开始-->  
<!--div style="position: relative;"><a class="TDCode" id="TDCode" style="color:#375963" href="javascript:;">扫描到手机</a></div-->
<div class="ImgWin" id="ImgWin" >
    <i class="ImgTip"><s></s></i>
        <div class="ImgCimg">
		 <script type="text/javascript">
            url=window.location.href 
            str="<img width='150' src='http://www.menglei.info/qr.php?url="+url+"'/ >"
            document.write(str);
         </script>
  </div>
    <div class="ImgCshow">
        <p class="other">用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。</p>
    </div>
    <div class="ImgClose"></div>    
</div>
  
<script type="text/javascript">
    function TDCode(){
        var T = 0,btn = $('#TDCode'),
        win = $('#ImgWin'),
        cbtn = $(win).find('.ImgClose');
        $(btn).hover(
        function(){
            clearTimeout(T);
            var l = $(this).offset().left - 20,
            t = $(this).offset().top + $(this).outerHeight() +5;
            $(win).css({"left":l+"px","top":t+"px"});
        },
        function(){
            T = setTimeout(function(){$(win).css({"display":"none1"})},1000);
        }
    )
        $(win).hover(
        function(){
            clearTimeout(T);
        },
        function(){
            clearTimeout(T);
            $(win).css({"left":"-1000px","top":"-1000px"});
            //T = setTimeout(function(){$(win).css({"left":"-1000px","top":"-1000px"})},1000);
        }
    );
        $(cbtn).click(function(){
            clearTimeout(T);
            $(win).css({"left":"-1000px","top":"-1000px"})
        });
    }
    TDCode();
</script>
 
 
<!--二维码结束-->

 

css代码部分

/*二维码*/
    a.TDCode{font-size:14px;padding-left:16px;background:url(../images/qrico.gif) no-repeat;}
    a.TDCode:hover{color:#375963;}
    .ImgWin{width:340px; height:115px; position:absolute; left:-1000px; top:-1000px; padding:9px; background:#fff; z-index:999; border:1px solid #c6c6c6;}
    .ImgClose{ position:absolute; top:5px; right:5px; width:18px; height:18px; overflow:hidden; background:url(http://hs.cnfol.com/uc/Imgs/Blog/BlogMbg.gif) -283px -86px no-repeat #fff; cursor:pointer;}
    .ImgTip{position:absolute; top:-13px; left:27px; margin-left:-6px; border-color:transparent transparent #969696 transparent;border-style:dashed dashed solid dashed;border-width: 6px;width: 0;height: 0; display:block}
    .ImgTip s{border-color:transparent transparent #fff transparent;border-style:dashed dashed solid dashed;border-width:6px;display:block;font-size:0;height:0;left:-6px;line-height:0;position:absolute;top:-5px;width:0;}
    .ImgCmess{padding-bottom:9px; float:left}
    .ImgCimg{width:115px;height:115px;padding-right:9px;overflow:hidden;/*float:left*/ position:absolute; left:9px; top:9px}
    .ImgCimg img{ width:115px; height:115px}
    .ImgCshow{width:215px; overflow:hidden;/*float:left*/ position:absolute; top:9px; left:135px;}
    .ImgCshow p{font:normal 14px/20px "";}
    .ImgCshow p span{font-weight:bold}
    .ImgCshow p.other{ font-size:12px;color:#aaa;}
 
    .ArtLink a{
        color:#1f3e81 !important;
    }
    .ArtLink a:hover{
        color:#F00 !important;
    }

 

在需要显示的位置添加以下代码:
<div style="position: relative;"><a class="TDCode" id="TDCode" style="color:#375963" href="javascript:;">扫描到手机</a></div>
 

 

这样即可实现,如有不明白的地方,可以QQ858512104 .