Jquery类网页微信二维码图块滚动效果具体实现

来源：动视网责编：小采时间：2020-11-27 20:26:13

Jquery类网页微信二维码图块滚动效果具体实现

Jquery类网页微信二维码图块滚动效果具体实现:首先是自己定制的脚本方法属性代码：/* * 创建浮动图片广告（Generate a dock AD image） * * USAGE: * $(selector).higo_plugins_ad({ * src:null, // 广告图片路径 * closeSrc:null, // 关闭图片路径 * href:"#&

推荐度：

点击下载本文 文档为doc格式

导读Jquery类网页微信二维码图块滚动效果具体实现:首先是自己定制的脚本方法属性代码：/* * 创建浮动图片广告（Generate a dock AD image） * * USAGE: * $(selector).higo_plugins_ad({ * src:null, // 广告图片路径 * closeSrc:null, // 关闭图片路径 * href:"#&

首先是自己定制的脚本方法属性代码：

/* 
 * 创建浮动图片广告（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>

更多Jquery 类网页微信二维码图块滚动效果具体实现相关文章请关注PHP中文网！

Jquery类网页微信二维码图块滚动效果具体实现

推荐度：

点击下载本文 文档为doc格式

标签： jQuery 效果实现 jquery类网页微信二维码图块滚动效果具体实现

热门焦点

Jquery类网页微信二维码图块滚动效果具体实现

Jquery类网页微信二维码图块滚动效果具体实现

Jquery类网页微信二维码图块滚动效果具体实现

最新推荐

猜你喜欢

热门推荐