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设置FieldSet展开与收缩
May 15 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
详解原生js实现offset方法
Jun 15 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
这样回答继承可能面试官更满意
Dec 10 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面向对象学习笔记之一 基础概念
2012/10/06 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
Javascript调用C#代码
2011/01/17 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python代码制作configure文件示例
2014/07/28 Python
Python实现批量修改文件名实例
2015/07/08 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
小学生优秀评语大全
2014/04/22 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2015年推普周活动总结
2015/03/27 职场文书
婚育证明格式
2015/06/17 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS