<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5点击网页彩色粒子爆炸特效 - 站长素材</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
font-family: 'Inconsolata', monospace;
overflow: hidden;
}
#canvas {
display: block;
cursor: pointer;
}
.hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0;
visibility: hidden;
-webkit-animation: fade-in 1s ease-out 1s forwards, fade-out 1s ease-out 5s forwards;
animation: fade-in 1s ease-out 1s forwards, fade-out 1s ease-out 5s forwards;
}
.hint > h1 {
font-size: 32px;
color: #fff;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@-webkit-keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
@keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="hint" id="hint">
<h1>Click.</h1>
</div>
<script>
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var getRandom = function getRandom(min, max) {
return Math.random() * (max - min) + min;
};
var getRandomInt = function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var getRandomColor = function getRandomColor() {
var colors = [
'rgba(231, 76, 60, 1)', // red
'rgba(241, 196, 15, 1)', // yellow
'rgba(46, 204, 113, 1)', // green
'rgba(52, 152, 219, 1)', // blue
'rgba(155, 89, 182, 1)' // purple
];
return colors[getRandomInt(0, colors.length)];
};
// Particle
var
Particle = function () {
function Particle(system, x, y) {_classCallCheck(this, Particle);
this.system = system;
this.universe = this.system.world.universe;
this.x = x;
this.y = y;
this.color = getRandomColor();
this.life = 1;
this.aging = getRandom(0.99, 0.999); // 0.99, 0.999 || 0.999, 0.9999
this.r = getRandomInt(8, 16);
this.speed = getRandom(3, 8);
this.velocity = [
getRandom(-this.speed, this.speed),
getRandom(-this.speed, this.speed)];
}_createClass(Particle, [{ key: 'update', value: function update(
dt) {
this.life *= this.aging;
if (
this.r < 0.1 ||
this.life === 0 ||
this.x + this.r < 0 ||
this.x - this.r > this.universe.width ||
this.y + this.r < 0 ||
this.y - this.r > this.universe.height)
{
this.system.removeObject(this);
}
this.r *= this.life;
this.x += this.velocity[0];
this.y += this.velocity[1];
} }, { key: 'render', value: function render(
ctx) {
// Main circle
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
var r = this.color.match(/([0-9]+)/g)[0];
var g = this.color.match(/([0-9]+)/g)[1];
var b = this.color.match(/([0-9]+)/g)[2];
// Gradient
var spread = 1.5;
var gradient = ctx.createRadialGradient(
this.x, this.y, this.r,
this.x, this.y, this.r * spread);
gradient.addColorStop(0, 'rgba(' + r + ', ' + g + ', ' + b + ', 0.3)');
gradient.addColorStop(1, 'rgba(' + r + ', ' + g + ', ' + b + ', 0)');
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r * spread, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.globalCompositeOperation = 'source-over';
// Aberration
var offset = this.r * 0.5;
var color = 'rgba(' + g + ', ' + b + ', ' + r + ', 0.3)';
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(this.x + offset, this.y + offset, this.r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.globalCompositeOperation = 'source-over';
} }]);return Particle;}();
// Crown
var
Crown = function () {
function Crown(system, x, y) {_classCallCheck(this, Crown);
this.system = system;
this.x = x;
this.y = y;
this.r = getRandomInt(15, 20); // 5, 20
this.mod = 1.1;
this.life = 1;
this.aging = getRandom(0.83, 0.88);
this.speed = getRandom(4, 5);
this.color = {
r: getRandomInt(236, 242),
g: getRandomInt(196, 241),
b: getRandomInt(195, 242) };
this.angle1 = Math.PI * getRandom(0, 2);
this.angle2 = this.angle1 + Math.PI * getRandom(0.1, 0.5);
}_createClass(Crown, [{ key: 'update', value: function update(
dt) {
this.life *= this.aging;
if (this.life <= 0.0001) this.system.removeObject(this);
this.r += Math.abs(1 - this.life) * this.speed;
this.x1 = this.x + this.r * Math.cos(this.angle1);
this.y1 = this.y + this.r * Math.sin(this.angle1);
this.angle3 = this.angle1 + (this.angle2 - this.angle1) / 2;
this.x2 = this.x + this.r * this.mod * Math.cos(this.angle3);
this.y2 = this.y + this.r * this.mod * Math.sin(this.angle3);
} }, { key: 'render', value: function render(
ctx) {
var gradient = ctx.createRadialGradient(
this.x, this.y, this.r * 0.9,
this.x, this.y, this.r);
gradient.addColorStop(0, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.life + ')');
gradient.addColorStop(1, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.life * 0.5 + ')');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, this.angle1, this.angle2, false);
ctx.quadraticCurveTo(this.x2, this.y2, this.x1, this.y1);
ctx.fill();
ctx.closePath();
} }]);return Crown;}();
// Explosion
var
Explosion = function () {
function Explosion(world, x, y) {_classCallCheck(this, Explosion);
this.world = world;
this.x = x;
this.y = y;
this.objects = [];
var particles = getRandomInt(30, 80); // 10, 30 amount of particles
var crowns = particles * getRandom(0.3, 0.5);
while (crowns-- > 0) {this.addCrown();}
while (particles-- > 0) {this.addParticle();}
}_createClass(Explosion, [{ key: 'update', value: function update(
dt) {
this.objects.forEach(function (obj) {
if (obj) obj.update(dt);
});
if (this.objects.length <= 0) {
this.world.clearExplosion(this);
}
} }, { key: 'render', value: function render(
ctx) {
this.objects.forEach(function (obj) {
if (obj) obj.render(ctx);
});
} }, { key: 'addCrown', value: function addCrown()
{
this.objects.push(new Crown(this, this.x, this.y));
} }, { key: 'addParticle', value: function addParticle()
{
this.objects.push(new Particle(this, this.x, this.y));
} }, { key: 'removeObject', value: function removeObject(
obj) {
var index = this.objects.indexOf(obj);
if (index !== -1) {
this.objects.splice(index, 1);
}
} }]);return Explosion;}();
// World
var
ConfettiWorld = function () {function ConfettiWorld() {_classCallCheck(this, ConfettiWorld);}_createClass(ConfettiWorld, [{ key: 'init', value: function init()
{
this.objects = [];
window.addEventListener('click', this.explode.bind(this));
// Initial explosion
var counter = 3;
while (counter-- > 0) {
this.explode({
clientX: this.universe.width / 2,
clientY: this.universe.height / 2 });
}
} }, { key: 'update', value: function update(
dt) {
this.objects.forEach(function (obj) {
if (obj) obj.update(dt);
});
var amount = this.objects.reduce(function (sum, explosion) {
return sum += explosion.objects.length;
}, 0);
} }, { key: 'render', value: function render(
ctx) {
this.objects.forEach(function (obj) {
if (obj) obj.render(ctx);
});
} }, { key: 'explode', value: function explode(
event) {
var x = event.clientX;
var y = event.clientY;
this.objects.push(new Explosion(this, x, y));
} }, { key: 'clearExplosion', value: function clearExplosion(
explosion) {
var index = this.objects.indexOf(explosion);
if (index !== -1) {
this.objects.splice(index, 1);
}
} }]);return ConfettiWorld;}();
// Time
var
Time = function () {
function Time() {_classCallCheck(this, Time);
this.now = 0; // current tick time
this.prev = 0; // prev tick time
this.elapsed = 0; // elapsed time from last tick
this.delta = 0; // time from last update
this.fps = 60; // desired fps
this.step = 1 / 60; // step duration
}_createClass(Time, [{ key: 'update', value: function update(
time) {
this.now = time;
this.elapsed = (this.now - this.prev) / 1000;
this.prev = thi
HTML5 360图片旋转特效
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS3鼠标悬停360度旋转效果</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
body {
background:#1F1F1F;
}
.zzsc {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("/jscss/demoimg/201405/author.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.zzsc:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="zzsc"></div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>
jQuery鼠标悬浮遮罩显示分享按钮
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="gb2312">
<title>jQuery鼠标悬浮遮罩显示分享按钮</title>
<style>
.pinit {
position:relative;
display:inline-block;
}
.pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:200;
display:none;
background:transparent url('/jscss/demoimg/201405/semi-white.png') repeat 0 0;
text-align:center;
}
.pinit .pinit-overlay a {
position:relative;
top:50%;
left:50%;
margin:-10px 0 0 -21px;
display:block;
width:43px;
height:20px;
background:transparent url('/jscss/demoimg/201405/pinit-button.png') no-repeat 0 0;
text-indent:-9999em;
}
.pinit .pinit-overlay a:hover {
background-positon: 0 -21px;
}
.pinit .pinit-overlay a:active {
background-position: 0 -42px;
}
</style>
</head>
<body>
<div class="container" style="text-align:center; font-family:arial">
<h2>jQuery鼠标悬浮遮罩显示分享按钮</h2>
<img src="/jscss/demoimg/201405/01.jpg" alt="Steak" width="300"/>
<img src="/jscss/demoimg/201405/02.jpg" alt="Fruit Cake" width="300" /><br/>
<img src="/jscss/demoimg/201405/03.jpg" alt="Hambuger" width="300" />
<img src="/jscss/demoimg/201405/04.jpg" alt="Drink" width="300" />
</div>
<script src="/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
pinit: function(options) {
var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}
var options = $.extend(defaults, options);
var o = options;
return this.each(function() {
var e = $(this),
pi_media = e.data('media') ? e.data('media') : e[0].src,
pi_url = o.pageURL,
pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
pi_isvideo = 'false';
bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);
var eHeight = e.outerHeight();
e.wrap(o.wrap);
e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');
$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});
$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});
});
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(function () {
$('img').pinit();
});
</script>
<div style="text-align:center;clear:both"></div>
</body>
</html>
jQuery掷色子动画
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示:jQuery掷色子动画</title>
<style type="text/css">
.demo{width:760px; height:120px; margin:10px auto;}
.wrap{width:90px; height:90px; margin:120px auto 30px auto; position:relative}
.dice{width:90px; height:90px; background:url(http://www.aspku.com/jscss/demoimg/201404/dice.png) no-repeat; cursor:pointer;}
.dice_1{background-position:-5px -4px}
.dice_2{background-position:-5px -107px}
.dice_3{background-position:-5px -212px}
.dice_4{background-position:-5px -317px}
.dice_5{background-position:-5px -427px}
.dice_6{background-position:-5px -535px}
.dice_t{background-position:-5px -651px}
.dice_s{background-position:-5px -763px}
.dice_e{background-position:-5px -876px}
p#result{text-align:center; font-size:16px}
p#result span{font-weight:bold; color:#f30; margin:6px}
#dice_mask{width:90px; height:90px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999}
</style>
<script type="text/javascript" src="http://www.aspku.com/ajaxjs/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var dice = $("#dice");
dice.click(function(){
$(".wrap").append("<div id='dice_mask'></div>");//加遮罩
dice.attr("class","dice");//清除上次动画后的点数
dice.css('cursor','default');
var num = Math.floor(Math.random()*6+1);//产生随机数1-6
dice.animate({left: '+2px'}, 100,function(){
dice.addClass("dice_t");
}).delay(200).animate({top:'-2px'},100,function(){
dice.removeClass("dice_t").addClass("dice_s");
}).delay(200).animate({opacity: 'show'},600,function(){
dice.removeClass("dice_s").addClass("dice_e");
}).delay(100).animate({left:'-2px',top:'2px'},100,function(){
dice.removeClass("dice_e").addClass("dice_"+num);
$("#result").html("您掷得点数是<span>"+num+"</span>");
dice.css('cursor','pointer');
$("#dice_mask").remove();//移除遮罩
});
});
});
</script>
</head>
<body>
<div id="main">
<h2 class="top_title">jQuery掷色子动画</h2>
<div class="demo">
<div class="wrap">
<div id="dice" class="dice dice_1"></div>
</div>
<p id="result">请直接点击上面的色子!</p>
</div>
</div>
</body>
</html>
JS版网页顶部向下滑出的全国城市切换导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页顶部向下滑出的切换城市导航</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
p{line-height:24px}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
#container{ width:960px; text-align:left; margin:0 auto; }
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11; text-decoration:underline;}
.header{ background:url(/jscss/demoimg/201403/tuan_head_01.gif) repeat-x; height:32px;}
.header .topCtiy {PADDING-RIGHT: 10px; PADDING-TOP: 4px; HEIGHT: 22px}
.header .topCtiy UL {FLOAT: right}
.header .topCtiy LI {PADDING-RIGHT: 10px; DISPLAY: inline; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; COLOR: #fff; LINE-HEIGHT: 22px; PADDING-TOP: 0px}
.header .topCtiy LI.i1 {PADDING-RIGHT: 13px; PADDING-LEFT: 13px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: #e16e6e; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}
.header .topCtiy LI.i2 {BACKGROUND: url(/jscss/demoimg/201403/tuan_icon10.gif) no-repeat 100% 50%; CURSOR: pointer}
.header .topCtiy LI A {COLOR: #fff}
.header .topCtiy LI A:hover {COLOR: #fff}
.selCity {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 10; BACKGROUND: url(/jscss/demoimg/201403/tuan_bgx06.gif) #7e2725 repeat-x 50% bottom; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 2px; POSITION: relative;}
.selCity .none {LEFT: 47.5%; BOTTOM: -18px; POSITION: absolute}
.selCity .none A {DISPLAY: block; BACKGROUND: url(/jscss/demoimg/201403/tuan_bg15.gif) no-repeat; WIDTH: 68px; TEXT-INDENT: -3000px; HEIGHT: 21px; TEXT-DECORATION: none}
.selCity .none A:hover {DISPLAY: block; BACKGROUND: url(/jscss/demoimg/201403/tuan_bg15.gif) no-repeat; WIDTH: 68px; TEXT-INDENT: -3000px; HEIGHT: 21px; TEXT-DECORATION: none}
.selCity TABLE {MARGIN: 0px auto; WIDTH: 950px; BORDER-COLLAPSE: collapse}
.selCity TABLE TD {BORDER-RIGHT: #8b3d3b 1px dashed; BORDER-TOP: #8b3d3b 1px dashed; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-LEFT: #8b3d3b 1px dashed; WIDTH: 157px; COLOR: #fff; BORDER-BOTTOM: #8b3d3b 1px dashed; HEIGHT: 39px; TEXT-ALIGN: center}
.selCity TABLE TD A {DISPLAY: block; COLOR: #fff; LINE-HEIGHT: 40px; HEIGHT: 40px; TEXT-DECORATION: none}
.selCity TABLE TD A:hover {BACKGROUND: #a86e6d; COLOR: #fff; TEXT-DECORATION: none}
.selCity TABLE TD A.cur {BACKGROUND: #a86e6d}
.header .box {MARGIN-TOP: 36px; TEXT-ALIGN: left}
.header .lab_city {MARGIN-TOP: 1px; FLOAT: left; WIDTH: 210px; COLOR: #fff; POSITION: relative; HEIGHT: 25px}
.header .sel_fl {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #400a09; LEFT: -97px; PADDING-BOTTOM: 27px; WIDTH: 361px; PADDING-TOP: 23px; POSITION: absolute; TOP: 28px}
.header .sel_fl TABLE {BORDER-COLLAPSE: collapse}
.header .sel_fl TABLE TD {
BORDER-RIGHT: #8b3d3b 1px dashed; BORDER-TOP: #8b3d3b 1px dashed; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-LEFT: #8b3d3b 1px dashed; WIDTH: 88px; COLOR: #fff; BORDER-BOTTOM: #8b3d3b 1px dashed; HEIGHT: 34px; TEXT-ALIGN: center}
.header .sel_fl TABLE TD.first {BORDER-LEFT-WIDTH: 0px}
.header .sel_fl TABLE TD.last {BORDER-RIGHT-WIDTH: 0px}
.header .sel_fl TABLE TD A {DISPLAY: block; LINE-HEIGHT: 34px; HEIGHT: 34px; TEXT-DECORATION: none}
.header .sel_fl TABLE TD A:hover {DISPLAY: block; LINE-HEIGHT: 34px; HEIGHT: 34px; TEXT-DECORATION: none}
.header .sel_fl TABLE TD A:hover {BACKGROUND: #5c2f2e}
.header .sel_fl TABLE TD A.cur {BACKGROUND: #5c2f2e}
.header .lab_city .city {FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(/jscss/demoimg/201403/tuan_bg01.gif) no-repeat 100% 0px; FLOAT: left; WIDTH: 70px; LINE-HEIGHT: 25px; MARGIN-RIGHT: 16px; TEXT-ALIGN: center}
.header .lab_city .txt {DISPLAY: inline-block; CURSOR: pointer; PADDING-TOP: 8px}
</style>
</head>
<BODY>
<DIV class=selCity id=allCity style="DISPLAY: none">
<DIV class=area>
<TABLE>
<TBODY>
<TR>
<TD><A class=cur href="#">北京</A></TD>
<TD><A href="#">上海</A></TD>
<TD><A href="#">广州</A></TD>
<TD><A href="#">深圳</A></TD>
<TD><A href="#">西安</A></TD></TR>
<TR>
<TD><A href="#">天津</A></TD>
<TD><A href="#">南京</A></TD>
<TD><A href="#">成都</A></TD>
<TD><A href="#">杭州</A></TD>
<TD><A href="#">济南</A></TD></TR>
<TR>
<TD><A href="#">哈尔滨</A></TD>
<TD><A href="#">海南</A></TD>
<TD><A href="#">沈阳</A></TD>
<TD><A href="#">大连</A></TD>
<TD><A href="#">石家庄</A></TD></TR>
<TR>
<TD><A href="#">长春</A></TD>
<TD><A href="#">郑州</A></TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR></TBODY></TABLE>
<DIV class=none><A id=foldin href="javascript:;">收起</A></DIV></DIV></DIV>
<DIV class=header>
<DIV class=area>
<DIV class=r>
<DIV class="topCtiy clear">
<UL>
<LI class=i1>北京 </LI>
<LI class=i2 id=changeCity>切换城市 </LI>
</UL>
</DIV>
</DIV>
</DIV>
</DIV>
<SCRIPT src="/jscss/demoimg/201403/sohu.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
jQuery(function(){
$("#changeCity").click(function(a){$("#allCity").slideDown(300);a.stopPropagation();$(this).blur()});$("#allCity").click(function(a){a.stopPropagation()});$(document).click(function(a){a.button!=2&&$("#allCity").slideUp(300)});$("#foldin").click(function(){$("#allCity").slideUp(300)})
});
</SCRIPT>
<br /><br />
<p></p>
</body>
</html>
JS动画函数:透明度渐变、位置移动、尺寸变化
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function rand(min,max){
return Math.round(min+(Math.random()*(max-min)));
};
var fade = function(element, transparency, speed, callback){//透明度渐变:transparency:透明度 0(全透)-100(不透);speed:速度1-100,默认为1
if(typeof(element)=='string')element=document.getElementById(element);
if(!element.effect){
element.effect = {};
element.effect.fade=0;
}
clearInterval(element.effect.fade);
var speed=speed||1;
var start=(function(elem){
var alpha;
if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':
'100';
}else{
alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];
}
return alpha;
})(element);
if(window.console&&window.console.log)console.log('start: '+start+" end: "+transparency);
element.effect.fade = setInterval(function(){
start = start < transparency ? Math.min(start + speed, transparency) : Math.max(start - speed, transparency);
element.style.opacity = start / 100;
element.style.filter = 'alpha(opacity=' + start + ')';
if(Math.round(start) == transparency){
element.style.opacity = transparency / 100;
element.style.filter = 'alpha(opacity=' + transparency + ')';
clearInterval(element.effect.fade);
if(callback)callback.call(element);
}
}, 20);
};
var move = function(element, position, speed, callback){//移动到指定位置,position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340};speed:速度 1-100,默认为10
if(typeof(element)=='string')element=document.getElementById(element);
if(!element.effect){
element.effect = {};
element.effect.move=0;
}
clearInterval(element.effect.move);
var speed=speed||10;
var start=(function(elem){
var posi = {left:elem.offsetLeft, top:elem.offsetTop};
while(elem = elem.offsetParent){
posi.left += elem.offsetLeft;
posi.top += elem.offsetTop;
};
return posi;
})(element);
element.style.position = 'absolute';
var style = element.style;
var styleArr=[];
if(typeof(position.left)=='number')styleArr.push('left');
if(typeof(position.top)=='number')styleArr.push('top');
element.effect.move = setInterval(function(){
for(var i=0;i<styleArr.length;i++){
start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;
style[styleArr[i]] = start[styleArr[i]] + 'px';
}
for(var i=0;i<styleArr.length;i++){
if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){
if(i!=styleArr.length-1)continue;
}else{
break;
}
for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';
clearInterval(element.effect.move);
if(callback)callback.call(element);
}
}, 20);
};
var resize = function(element, size, speed, callback){//长宽渐变:size:要改变到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250};speed:速度 1-100,默认为10
if(typeof(element)=='string')element=document.getElementById(element);
if(!element.effect){
element.effect = {};
element.effect.resize=0;
}
clearInterval(element.effect.resize);
var speed=speed||10;
var start = {width:element.offsetWidth, height:element.offsetHeight};
var styleArr=[];
if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){
//除了ie下border-content式盒模型情况外,需要对size加以修正
var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;
if(typeof(size.width)=='number'){
styleArr.push('width');
size.width=size.width-CStyle.paddingLeft.replace(/\D/g,'')-CStyle.paddingRight.replace(/\D/g,'');
}
if(typeof(size.height)=='number'){
styleArr.push('height');
size.height=size.height-CStyle.paddingTop.replace(/\D/g,'')-CStyle.paddingBottom.replace(/\D/g,'');
}
}
element.style.overflow = 'hidden';
var style = element.style;
element.effect.resize = setInterval(function(){
for(var i=0;i<styleArr.length;i++){
start[styleArr[i]] += (size[styleArr[i]] - start[styleArr[i]]) * speed/100;
style[styleArr[i]] = start[styleArr[i]] + 'px';
}
for(var i=0;i<styleArr.length;i++){
if(Math.round(start[styleArr[i]]) == size[styleArr[i]]){
if(i!=styleArr.length-1)continue;
}else{
break;
}
for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = size[styleArr[i]] + 'px';
clearInterval(element.effect.resize);
if(callback)callback.call(element);
}
}, 20);
};
</script></head>
<body>
<div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)"><div style="background-color:#369; height:100%;"></div></div>
<br/>
动画测试
<input type="button" value="改变大小"
onClick="resize('testDiv', {width:rand(60,600),height:rand(30,300)})" />
<input type="button" value="改变宽度"
onClick="resize('testDiv', {width:rand(60,600)})" />
<input type="button" value="改变高度"
onClick="resize('testDiv', {height:rand(30,300)})" />
<input type="button" value="移动位置"
onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" />
<input type="button" value="水平移动"
onClick="move('testDiv', {left:rand(40,600)})" />
<input type="button" value="垂直移动"
onClick="move('testDiv', {top:rand(40,400)})" />
<input type="button" value="透明度变化"
onClick="fade('testDiv', rand(5,100))" />
<input type="button" value="还原"
onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" />
</body>
</html>
鼠标滑过更换文字内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过变换文字</title>
<style>
#Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; }
#Menu ul{ margin:0;padding:0;list-style:none;}
#Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; }
#Menu a{ width:100px;float:left;overflow:hidden;} #Menu span{display:block;margin-top:-22px;}
#Menu a:hover{padding-top:22px;}
</style>
</head>
<body>
<ul id="Menu">
<li><a href="#"><span>HOME</span>首页</a></li>
<li><a href="#"><span>NEWS</span>新闻</a></li>
<li><a href="#"><span>ABOUT</span>关于</a></li>
<li><a href="#"><span>CONTACT</span>联系</a></li>
<li><a href="#"><span>照片</span>PHOTO</a></li>
</ul>
</body>
</html>
跟随鼠标移动的流星
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>跟随鼠标移动的流星</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
html{
overflow:hidden;
}
body{
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
}
#screen{
background:#000;
position:absolute;
width:100%;
height:100%;
}
#screen span{
background:#fff;
font-size:0;
overflow:hidden;
width:2px;
height:2px;
}
</style>
<script type="text/javascript">
var Follow = function () {
var $ = function (i) {return document.getElementById(i)},
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
OBJ = [], sp, rs, N = 0, m;
var init = function (id, config) {
this.config = config || {};
this.obj = $(id);
sp = this.config.speed || 4;
rs = this.config.animR || 1;
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
this.setXY();
this.start();
}
init.prototype = {
setXY : function () {
var _this = this;
addEvent(this.obj, 'mousemove', function (e) {
e = e || window.event;
m.x = e.clientX;
m.y = e.clientY;
})
},
start : function () {
var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
OBJ[N++] = OO = new CObj(null, 0, 0);
for(var i=0;i<360;i+=20){
var O = OO;
for(var j=10; j<35; j+=1){
var x = fn(i, j).x,
y = fn(i, j).y;
OBJ[N++] = o = new CObj(O , x, y);
O = o;
}
}
setInterval(function() {
for (var i = 0; i < N; i++) OBJ[i].run();
}, 16);
}
}
var CObj = function (p, cx, cy) {
var obj = document.createElement("span");
this.css = obj.style;
this.css.position = "absolute";
this.css.left = "-1000px";
this.css.zIndex = 1000 - N;
document.getElementById("screen").appendChild(obj);
this.ddx = 0;
this.ddy = 0;
this.PX = 0;
this.PY = 0;
this.x = 0;
this.y = 0;
this.x0 = 0;
this.y0 = 0;
this.cx = cx;
this.cy = cy;
this.parent = p;
}
CObj.prototype.run = function () {
if (!this.parent) {
this.x0 = m.x;
this.y0 = m.y;
} else {
this.x0 = this.parent.x;
this.y0 = this.parent.y;
}
this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
this.css.left = Math.round(this.x) + 'px';
this.css.top = Math.round(this.y) + 'px';
}
return init;
}();
</script>
</head>
<body>
<div id="screen"></div>
<script type="text/javascript">
new Follow('screen', {
speed: 4,
animR : 2,
fn : function (i, j) {
return {
x : j/4*Math.cos(i),
y : j/4*Math.sin(i)
}
}
})
</script>
</body>
</html>