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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
js特殊字符转义介绍
Nov 05 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
vue实现lodop打印功能的示例
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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php日历制作代码分享
2014/01/20 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
简单实现python进度条脚本
2017/12/18 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python元组知识点总结
2019/02/18 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
GWebs公司笔试题
2012/05/04 面试题
超市端午节活动方案
2014/01/23 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
诚信考试承诺书
2014/03/27 职场文书
设计大赛策划方案
2014/06/13 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Python读写yaml文件
2022/03/20 Python