运动侧边栏广告函数插件

函数功能描述:

设置在浏览器的垂直位置居中,水平位置左侧或右侧的函数插件;

使用方法:

1,在body后面先引入starmove函数,只需引用即可,无需做任何设置;

2,引入fixedMoveAside函数,同样只需引用即可;

3,执行fixedMoveAside(elem,LorR)只需一句话即可,其中有两个参数,elem是获取的dom元素,LorR可以选择left或者right分别表示浏览器的左侧位置或右侧位置;

以下是starmove和fixedMoveAside函数源码;

①startMove函数包括startMove和getStyle

function startMove(elem, json, fn){
clearInterval(elem.timer);
// 开启定时器(开始运动)
elem.timer = setInterval(function(){
// 假设都执行到终点了
var flag = true;
// 循环所有需要操作的属性
for( var attr in json ){
//目标点
target = json[attr];

// 获取当前属性的值
var v = getStyle(elem, attr);

if( attr == "opacity" ){
v = v * 100;
v = Math.round(v);
}else{
v = parseInt(v);
}

// 求目标点到起点的间距 除以 7 表示速度(即步长)
var speed = (target - v) / 7;

if( speed>0 ){
speed = Math.ceil(speed);
}else{
speed = Math.floor(speed);
}

// 更新属性
if( attr == "opacity" ){
elem.style.opacity = (v+speed)/100;
elem.style.filter = "alpha(opacity="+(v+speed)+")";
}else{
elem.style[attr] = (v+speed)+"px";
}

// 坚持是否到了目标点
if( v != target ){
flag = false;
}
}

// 所有的属性,都到达了目标点后,定时器才停止
if( flag ){
clearInterval(elem.timer); //停止定时器
// 如果有函数,则执行
if( fn ){
fn();
}
}
}, 30);
}

// 获得样式
function getStyle(obj, attr){
if( window.getComputedStyle ){
return getComputedStyle(obj, null)[attr];
}else{
return obj.currentStyle[attr];
}
}

②//需要在文档头部提前引入startMovr;

//LorR:"left" "right";要加引号;
//警告:如果有页面中有comeHead同时使用,要放在comeHead后面在执行;
function fixedMoveAside(elem,LorR){
elem.style.top="0px";
if(LorR=="left"){
elem.style.left=0+"px";
}else{
elem.style.right=0+"px";
}
elem.style.position="absolute";
window.οnresize=window.οnlοad=window.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
var t=(clientHeight-elem.offsetHeight)/2+scrollTop;
startMove(elem, {"top":parseInt(t)});

}
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值