Jquery 类网页微信二维码图块滚动效果具体实现_Javascript教程-查字典教程网
Jquery 类网页微信二维码图块滚动效果具体实现
Jquery 类网页微信二维码图块滚动效果具体实现
发布时间:2016-12-30 来源:查字典编辑
摘要:首先是自己定制的脚本方法属性代码:复制代码代码如下:/**创建浮动图片广告(GenerateadockADimage)**USAGE:*$(...

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

复制代码 代码如下:

/*

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

<div id="center"> </div>

<%@include file="/page/public/sideBar.jsp"%>

<div>

<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教程学习
    编程开发子分类