js生成五位六位N位随机数

执行函数 RndNum(传入自己想要的位数)

1
2
3
4
5
6
function RndNum(n){
var rnd="";
for(var i=0;i<n;i++)
rnd+=Math.floor(Math.random()*10);
return rnd;
}

JS随机变化CSS样式多彩效果

本特效可用于tag标签随机多彩变化的超链接样式。使用非常简单,可以预设多个想要的CSS a样式,可以设置超链接文字大小、字体颜色、字体背景等不同样式,随机刷新网页时候JQ自动实现超链接文字多样css样式特效效果。

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
var tags_a = $("a");
tags_a.each(function(){
var x = 4;
var y = 1;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tag-level-"+rand);
});
})

 

纯CSS3实现GIF图片进度加载效果

纯CSS3实现GIF图片进度加载效果

没有做兼容 只支持Chrome浏览器

主要掌握CSS3 animation box-shadow和transform属性

思维很重要 多看多写 开拓思维

单纯用伪元素写出各种效果 伪类很强大 多加深入了解

效果地址:http://www.29ym.com/demo/css3gif.html

风中的纸屑

我天性不宜交际。在多数场合,我不是觉得对方乏味,就是害怕对方觉得我乏味。可是我既不愿忍受对方的乏味,也不愿费劲使自己显得有趣,那都太累了。我独处时最轻松,因为我不觉得自己乏味,即使乏味,也自己承受,不累及他人,无需感到不安。——周国平

icon动画图标

当鼠标指针穿过元素时,会发生 mouseenter 事件,与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

animate() 方法执行 CSS 属性集的自定义动画 例子:

1
$(".btn1").click(function(){ $("#box").animate({height:"300px"}); });

效果地址:http://www.29ym.com/demo/icoanimate.html

富爸爸穷爸爸

为了钱而工作,得到报酬后,贪婪的买回来一堆没用的东西,形成了一种模式:起床-上班-付账单-再起床-再上班-再付账。

为了跳出这种恶性循环,首先要转换思维方式,不能为了钱工作,而是让钱为你工作。

正因为你没钱,就更要去学习。你所拥有的唯一真正的资产就是你的头脑。

CSS实现电池充电效果

学会如何运用animation属性的定义以及效果

1
animation

属性是一个简写属性,用于设置六个动画属性:

  • animation-name,绑定动画keyframe
  • animation-duration,规定完成动画所花费的时间
  • animation-timing-function,规定动画的速度曲线
  • animation-delay,规定动画开始之前的延迟
  • animation-iteration-count,规定动画应该播放的次数
  • animation-direction,规定是否应该轮流反向播放

效果地址:http://www.29ym.com/demo/dianchi.html

JQ上下切换幻灯效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
var index=0;
var len=$(".num>li").length;
var adTimer;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
$(".ad").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImg(index)
index++;
if(index==len){
index=0;
}
}, 3000);
}).trigger("mouseleave")
function showImg(index){
var adHeight=$(".ad").height();
$(".slider").stop(true,false).animate(
{top:-adHeight*index},1000
);
$(".num li").removeClass('on').eq(index)
.addClass("on");
}
})

幻灯效果地址