Jquery 类网页微信二维码图块滚动效果
来源:互联网 发布:c语言返回值是什么 编辑:程序博客网 时间:2024/06/02 00:58
首先是自己定制的脚本方法属性代码:
/* * 创建浮动图片广告(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.scrollTopelse {/*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>
- Jquery 类网页微信二维码图块滚动效果
- 网页上右边有一个微信二维码随着页面滚动而不动的效果
- 微信网页二维码扫描
- 微信网页二维码授权登陆
- 微信扫描二维码登录网页原理
- ZXing生成二维码和带logo的二维码,模仿微信生成二维码效果
- jQuery滚动停顿滚动效果
- QQ网页微信二维码登陆原理分析
- iOS开发 - 微信扫描二维码登录网页的原理
- 微信网页PC端登录扫二维码登录
- 微信二维码扫描时的动画效果 线
- jquery酷滚动效果
- jQuery-滚动效果
- Jquery文字滚动效果
- jquery全屏滚动效果
- jQuery实现滚动效果
- Jquery 滚动效果实现
- jQuery.qrcode二维码插件生成网页二维码
- Android中按比例缩放图片以减少内存消耗 解决oom问题
- 计算机图形学-直线
- JavaSE视频学习阶段性总结 四(继承)
- 利器之cssQuery
- 国内外一些开源项目,开源代码网站介绍
- Jquery 类网页微信二维码图块滚动效果
- springMVC工作原理以及简单实现
- 阿甘正传
- CABasicAnimation
- Android Media 简单 Demo
- Android的AlertDialog详解
- 【笔试or面试】3G门户校园招聘
- SQL identity 使用汇总
- ubuntu 个人开发中遇到的一些命令