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


Posted in Javascript onOctober 14, 2013

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

/* 
 * 创建浮动图片广告(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>
Javascript 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
javascript实现简单的进度条
Jul 02 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 #Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 #Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 #Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 #Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 #Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 #Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
You might like
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Django对models里的objects的使用详解
2019/08/17 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
暑期社会实践学生的自我评价
2014/01/09 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
优秀老师事迹材料
2014/02/05 职场文书
运动会稿件200字
2014/02/07 职场文书
21岁生日感言
2014/02/27 职场文书
师德师风演讲稿
2014/05/05 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2015年党员自评材料
2014/12/17 职场文书
百年校庆感言
2015/08/01 职场文书
车辆挂靠协议书
2016/03/23 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS