saber酱的抱枕

Fly me to the moon

05/19
08:00
学习

js做的元素不间断来回移动的效果

今天用js做了个元素移动的效果,支持水平、垂直方向上的单次移动和来回移动,支持斜向运动(斜向运动时自带反弹效果 哈哈)。

假设这个元素是我们想要移动的:

<img id="moveE" src="http://www.saber.我爱你/wp-content/uploads/2014/07/1_b.gif">

它可以是图片,也可以是其他元素。可以定义css样式,这个没关系。

js代码如下:

function move_on(element,far,to,cishu,time) {
	var add=(to%2==1)?true:false;
	var num=(to<3)?((element.style.marginLeft==="")?0:parseInt(element.style.marginLeft)):((element.style.marginTop==="")?0:parseInt(element.style.marginTop));
	var max=(to%2==1)?(num+far):num;
	var min=(to%2==1)?num:(num+far);
	var time=setInterval(function  () {
	    if(add){
	        num++;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num>=max){
	            add=false;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }else{
	        num--;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num<=min){
	            add=true;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }
	},time);
}

(代码挺短的吧~三元操作符真是个好东西啊

参数解释:

要移动的元素、移动多少像素、移动类型、移动次数、定时器执行间隔时间(毫秒)
移动类型规定如下:
1 左右来回移动,起始点是从左向右
2 左右来回移动,起始点是从右向左
3 上下来回移动,起始点是从上向下
4 上下来回移动,起始点是从下向上
移动次数定义如下:
为0时为无限制来回移动,否则定义为多少则移动多少次。注意,一次单向运动算1次,一次来回运动算2次。

可能看的有点迷,没关系,接下来我一个个上例子。
Read More →

js做的元素不间断来回移动的效果

07/21
08:54
学习

一个樱花飞舞的jq特效

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="/f/jquery-sakura.min.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/f/jquery-sakura.min.css" />
<script>
// domReady
$(function() {
$('body').sakura();
});
// windowLoad
$(window).load(function() {
$('body').sakura();
});
</script>

转自离别歌,十几岁已经完爆我了。

页面太长的话可能会导致有点卡顿。jq版本不知有无影响。

查看demo

一个樱花飞舞的jq特效

01/9
10:15
学习

网站雪花飘落效果一例

刚刚找到并且使用的一个效果。严格来说飘落的并不是雪花,只是白色的光团。使用起来很简单,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>snow Examples</title>
</head>
<body style="background: #000;">.
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://saber.love/f/snow.js"></script>	
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;" class="snow-container"></div>
</body>
</html>

这个js貌似没有提供自定义参数,有时产生的大光团太大了,算是一个缺点吧。有时候光团会有随着移动产生变大变小的效果,与鼠标的移动也有互动效果,产生了3D感,不过感觉还是可以改进(反正我是站着说话不腰疼=,=)。

网站雪花飘落效果一例

10/14
10:18
学习

研究SuperSlide的记录

已弃坑。我下面试的几次,都是自己对其示例进行了结构的简化,想要以后用着方便,事实证明这么做意义不大,该用的时候拉过来源代码直接修改就成了。以后只做一些补充就行了。

用superslide做焦点图,其切换间隔太快,但是demo文档里又没有这个参数设置,于是去查看官网的参数文档,找到了interTime参数,如下:

jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:5000});

css里有些地方得改一下:

.slideBox .bd{ position:relative; height:100%; z-index:0; left:50%; margin-left:-960px;  }/*这里设置居中*/
/*.slideBox .bd img 如无必要,不要设置width,否则可能导致图片变形*/
/*指示器默认是靠右的,可能会被右侧的漂浮广告挡住,给.slideBox .hd设置一个right值比较合适。*/

注意参数最后是不加分号的,加了报错。另附动画效果参数:

[v1.0] fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;
[v2.0] fold:淡入淡出
[v2.1] slideDown:下拉效果
Read More →

研究SuperSlide的记录

10/14
09:27
学习

MSClass.js滚动插件

在仿站的时候发现某网站的滚动大量使用这个插件,原来是MSClass.js,官网在此。现在网上流传的版本有很多都是07年的了,然而照样能用,我只能说666666了。我也摸索了下怎么用(我实验的时候用的是老版)。

首先引入这个js。之后需要一个容器,设置id,里面放上需要滚动的内容,也可以是列表,复杂些的内容也可以。最后在容器结束之后,为这个容器创建滚动对象。

容器不需要设置超出隐藏和宽高(你在参数里指定之后MSClass.js会把这些规则加到元素上)。容器内的子元素浮动的话可能导致滚动失效。至于滚动的参数可以看说明。

我发现图片的html换行的话,图片之间会产生空白,至今无法解决。使图片浮动的话就没有空白了,但是滚动会失效。

MSClass.js滚动插件

08/1
22:45
学习

Jq显示隐藏div

多个选项卡的切换(隐藏显示)是网页常见的特效,用jq来做很省事。

首先引入jq,然后封装一个事件,在div中写入onclick="showdome1()"

下面是两个tab切换的:

function showfuwutab2 () {
$("#dome2").show();
$("#dome1").hide();
$("#dome2").css('color','#cd4726');
$("#dome1").css('color','#fff');
}[/code]
下面是单个按钮切换一个div显示隐藏的:

function showdome1() {
if($('#dome1').is(':hidden')){
$("#dome1").show();
}else{
$("#dome1").hide();
}
}[/code]
如果封装的js太长的话可以保存到外部文件。

参考:http://www.phpvar.com/archives/183.html

Jq显示隐藏div