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 相关文章推荐
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
浅析JavaScript 函数柯里化
Sep 08 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
1 Tube Radio
2021/03/02 无线电
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python制作图片缩略图
2019/04/30 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python属于解释语言吗
2020/06/11 Python
python安装后的目录在哪里
2020/06/21 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
八年级语文教学反思
2014/02/11 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP