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 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
财产公证书
2014/04/10 职场文书
会员卡清退活动总结
2014/08/27 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
通知函的格式
2015/04/27 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
简短清晨问候语
2015/11/10 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server