欢迎光临
我们一直在努力

H5点击网页彩色粒子爆炸特效

阿强爱分享阅读(1233)

H5点击网页彩色粒子爆炸特效插图

<!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图片旋转特效

阿强爱分享阅读(693)

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鼠标悬浮遮罩显示分享按钮

阿强爱分享阅读(496)

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掷色子动画

阿强爱分享阅读(691)

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版网页顶部向下滑出的全国城市切换导航

阿强爱分享阅读(631)

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动画函数:透明度渐变、位置移动、尺寸变化

阿强爱分享阅读(368)

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>

鼠标滑过更换文字内容

阿强爱分享阅读(344)

鼠标滑过更换文字内容插图

<!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>

跟随鼠标移动的流星

阿强爱分享阅读(403)

跟随鼠标移动的流星插图

<!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>