Jquery 类网页微信二维码图块滚动效果具体实现

首先是自己定制的脚本方法属性代码:


代码如下:

/*
 * 创建浮动图片广告(Generate a dock AD image)
 *
 * USAGE: 
 *  $(selector).higo_plugins_ad({
 *      src:null,                    // 广告图片路径
 *      closeSrc:null,               // 关闭图片路径
 *      href:"#",                    // 广告图片链接地址
 *      autoHide:true,               // 是否自动隐藏
 *      hideSecond:10,               // 延迟隐藏秒数
 *      top:20,                      // 距离顶部偏移高度
 *      layout:"left",               // 默认图片位置:left 居左 ,right 居右, center 居中, 
 *      width:100,                   // 宽度
 *      height:100,                  // 高度
 *      opacity:0.5              // 透明度opacity:0.5(firefox), filter:alpha(opacity=50)(IE)
 *      setPosition:function(left, top){ // 预留自定义显示位置的方法(尚未实现)
 *          return;
 *      }   
 *  })
 */

其次是详细效果实现:


代码如下:

(function($){ 
    $.fn.ad = function(options){ 
        var lastScrollY= 0; 
        var czd = $(this); 
        var settings = $.extend({ 
            src:null,                     
            closeSrc:null,                
            href:"#", 
            autoHide:true,                
            hideSecond:10, 
            position: "top",              
            top:20,     
            bottom:20,                   
            layout:"left",                
            width:100,                    
            height:100,                   
            opacity:0.5, 
            setPosition:function(left, top){ 
                return; 
            } 
        },options || {});

if(settings.src && settings.closeSrc){       
            var imgEl = "<a href='" + settings.href + "' target='_blank'><img border=0 width='" + settings.width + "px' height='" + settings.height + "px' src='" + settings.src + "'/> <br></a>"; 
            var closeImgEl = "<a href=\"#\"; onclick=\"this.parentElement.style.visibility='hidden'\"><img border=0 src='" + settings.closeSrc +"'/></a>";

$(this).append(imgEl + closeImgEl);

$(this).css("position","absolute"); 
            if(settings.position=='top'){ 
                $(this).css("top",settings.top + "px"); 
            } else { 
                $(this).css("bottom",settings.bottom + "px"); 
            } 
            $(this).css("opacity",settings.opacity); 
            $(this).css("filter","alpha(opacity=" + parseInt(settings.opacity * 100)  + ")");

switch(settings.layout) { 
                case "left": 
                    $(this).css("left","-100px"); 
                    break; 
                case "right": 
                    $(this).css("right","-100px"); 
                    break; 
                case "center": 
                    var left = (parseInt(window.screen.availWidth) - parseInt(settings.width))/2 + "px"; 
                    $(this).css("left",left); 
                    break; 
                default: 
                    $(this).css("left","-100px"); 
                    break; 
            } 
        } else { 
            return; 
        }

if(settings.autoHide) { 
            setTimeout("(function(){$('" + $(this).selector +  "').hide();})();",parseInt(settings.hideSecond) * 1000; 
        } 
        //别名不同导致事件驱动不一样:scroll与onscroll 
        $(window).bind("scroll", function(){ 
            var diffY; 
            if (document.documentElement && document.documentElement.scrollTop) 
                diffY = document.documentElement.scrollTop; 
            else if (document.body) 
                diffY = document.body.scrollTop 
                else { 
                    /*Netscape stuff*/ 
                } 
            percent= 1 * (diffY - lastScrollY); 
            if(percent>0) 
                percent=Math.ceil(percent); 
            else  
                percent=Math.floor(percent);

if(settings.position=='top'){ 
                var top = czd.css("top"); 
                czd.css("top", parseInt(top) + percent + "px"); 
                lastScrollY += percent; 
            } else { 
                var top = czd.css("bottom");

czd.css("bottom", parseInt(top) - percent + "px");lastScrollY += percent; 
            }

}); 
    } 
})(jQuery);

最后就是页面的编写:

一、导入自己定义的JQuery并配好head


代码如下:

<decorator:head /> 
        <script type="text/javascript" src="<%=basePath%>js/jquery.czd_plugins_ad.js"></script> 
        <script language="javascript"> 
        $(document).ready(function(){ 
            $("#leftbelow").ad({ 
                src:"<%=basePath%>/images/qrcode.png",                   
                closeSrc:"<%=basePath%>/images/closeAd.gif",        
                autoHide:false,                
                hideSecond:5,                
                top:480,  
                layout:"left",                
                width:100,                    
                height:100,                  
                opacity:5 
                });

$("#left").ad({ 
                src:"<%=basePath%>/images/longtentianxia20131010.jpg",                     
                closeSrc:"<%=basePath%>/images/closeAd.gif",                
                href:"......",                     
                autoHide:false,                
                hideSecond:5,                
                top:-70,                       
                layout:"left",                
                width:100,                    
                height:500 ,                
                opacity:5  
            }); 
            $("#right").ad({ 
                src:"<%=basePath%>/images/yingxiaodasai201203012.jpg",                   
                closeSrc:"<%=basePath%>/images/closeAd.gif",        
                href:"......",                     
                autoHide:false,                
                hideSecond:5,                
                top:-70,                       
                layout:"right",                
                width:100,                    
                height:500,                  
                opacity:5 
            }); 
        }); 
</script>

二、写上主体body代码


代码如下:

<body class="homeBackgroup"> 
          <div id="center"> </div>

<%@include file="/page/public/sideBar.jsp"%> 
      <div class="shadow">

<div id="container"> 
            <div id="header"> 
                <%@include file="/page/public/top.jsp"%> 
            </div> 
            <div id="mainContent">

<div id="left"></div>

<decorator:body />

<div id="right"></div> 
                        <div id="leftbelow"></div>

</div> 
            <div id="footer" > 
                <%@include file="/page/public/bottom.jsp"%> 
            </div> 
            <div id="back-top"> 
                <a href="#top"><span></span></a> 
            </div> 
        </div> 
      </div>   
</body>

(0)

相关推荐

  • jQuery+PHP实现微信转盘抽奖功能的方法

    本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div

  • JavaScript结合Bootstrap仿微信后台多图文界面管理

    js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下 效果图: 详细代码: html: <div id="wrap"> <div id="sidebar"> <div class="previewBox"> <!-- <p style="margin:10px 14px 0 14px;"><span class="ms

  • jquery仿微信聊天界面

    首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和右侧的界面.然后每个盒子里面包含了三大部分:头部.内容区.和底部.只要写好一侧,另一侧进行粘贴复制就可以了. 首先定义一个大的 来盛放左右两个盒子. <div id = "main"> //左侧聊天界面 <div id = "box"> <

  • jQuery实现微信长按识别二维码功能

    最近一直在搞一个微信开发的项目,终于快要完工了,今天小编抽个时间记录下在项目开发过程中遇到jquery.qrcode.min.js生成二维码长按不识别的解决方法,希望对大家有所帮助! 1.引入JS库 <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.qrcode

  • jquery使用ajax实现微信自动回复插件

    myscript.js 复制代码 代码如下: var _autorun;var str = new Array('转发什么','分享什么','已转发','已轉發','己转发','继续申请','在不','已发送','以转发','以分享','已分享','yv','bv','gv','pv','rv','你好','美女','索要','代码','我要','要v','要加v');var isrun = false;var i=0;function start(){    console.log('第'+(

  • jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法

    先给大家说下问题背景:最近在做一个项目,开发微信的某个功能,使用的是asp.net开发,jquery1.8.0版本. 在微信中点击按钮触发事件,调用ajax与服务器端进行交互,回调函数走的是error. 分析原因:首先我想到的是返回的数据类型有问题,因为在jquery 版本在1.4以上对json的格式非常严格,需要符合{"target":true,"message":"成功"}这样的格式.用JSON.stringify()函数分析了respons

  • 使用jQuery Rotare实现微信大转盘抽奖功能

    很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S

  • 使用jQuery.wechat构建微信WEB应用

    因为最近自己的产品要在微信公众号中推广,需要提供一些有意义的功能,于是被迫走上了支持微信这条不归路. 众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于web开发的官方文档,有的就是个别示例,剩下的...呵呵,有一个叫开发者交流互助的东东. 看完上面这个图后,有没有这样的感觉,一帮群众拼命的想知道发生了什么,但就是没有官方声明!o(∩_∩)o 哈哈 说了这么多,赶紧入正题,本期要讲的就是我痛苦中挣扎徘徊后写

  • Jquery 类网页微信二维码图块滚动效果具体实现

    首先是自己定制的脚本方法属性代码: 复制代码 代码如下: /*  * 创建浮动图片广告(Generate a dock AD image)  *  * USAGE:   *  $(selector).higo_plugins_ad({  *      src:null,                    // 广告图片路径  *      closeSrc:null,               // 关闭图片路径  *      href:"#",                

  • Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果(推荐)

    了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开心. 随着微信的到来,二维码越来越火爆,随处能看到二维码,比如商城里面,肯德基,餐厅等等,对于二维码

  • 使用jquery.qrcode.js生成二维码插件

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

  • jquery canvas生成带有二维码的海报

    本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下 需求:点击图片弹窗生成带有二维码的海报. 遇到相关问题: 1.生成的图片会模糊.不清晰. 2. 苹果手机和安卓手机 文字位置和字体大小有差异. 引入所需要的文件 //jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&qu

  • C#开发微信 二维码鼠标滑动 图像显示隐藏效果(推荐)

    客户端微信在二维码状态下,鼠标滑过,会有一张手机的图片滑动滑出,从隐藏到显示,从显示到隐藏. 思路很简单:1.设置透明度:2.给个移动的位移 先看下做的效果 整体代码也不难,就是给Image控件设置动画效果. <Grid x:Name="grid_content" Background="WhiteSmoke" Grid.Row="1"> <Grid.Triggers> <EventTrigger RoutedEve

  • jQuery 生成svg矢量二维码

    jQuery 生成矢量svg二维码,并提供PNG,和SVG的页面下载,减轻服务端的压力. 代码如下所示: <html> <head> <title>jQuery 生成svg矢量二维码</title> </head> <body> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scr

  • 使用jquery.qrcode生成彩色二维码实例

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式.(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意.) 下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table.),效果如下: 代码如下: <html> <head> <title>JS生成二维码</title>

  • JS实现鼠标移上去显示图片或微信二维码

    废话不多说了,直接给大家贴代码了. <html> <head> <script type="text/javascript"> function showImg(){ document.getElementById("wxImg").style.display='block'; } function hideImg(){ document.getElementById("wxImg").style.displa

  • Android仿微信二维码和条形码

    本文实例为大家分享了Android仿微信二维码和条形码的具体代码,供大家参考,具体内容如下 package your.QRCode.namespace; import java.io.File; import java.io.FileOutputStream; import java.util.HashMap; import java.util.Map; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHi

  • 详解基于Koa2开发微信二维码扫码支付相关流程

    前段时间在开发一个功能,要求是通过微信二维码进行扫码支付.这个情景我们屡见不鲜了,各种电子商城.线下的自动贩卖机等等都会有这个功能.平时只是使用者,如今变为开发者,也是有不小的坑.所以特此写一篇博客记录一下. 注: 要开发微信二维码支付,你必须要有相应的商户号的权限,否则你是无法开发的.若无相应权限,本文不推荐阅读. 两种模式 打开微信支付的文档,我们可以看到两种支付模式:模式一和模式二.这二者的流程图微信的文档里都给出了(不过说实话画得真的有点丑). 文档里指出了二者的区别: 模式一开发前,商

随机推荐