js实现的彩色方块飞舞奇幻效果
本文实例讲述了js实现的彩色方块飞舞奇幻效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
body {
margin:0; padding:0;
}
ul {
list-style:none; margin:0; padding:0;
}
li {
position:absolute;
}
#power {
font-size:50px; line-height:100px; border:2px solid green; color:green;
position:absolute; right:20px; bottom:20px;
}
</style>
</head>
<body>
<ul id="canvas"></ul>
</body>
<script type="text/javascript">
var $ = function(id) {
return document.getElementById(id);
}
var $_name = function(tag) {
return document.getElementsByTagName(tag);
}
var color = function() {
var _color = "rgb(";
_color += Math.round(Math.random()*255);
_color += ",";
_color += Math.round(Math.random()*255);
_color += ",";
_color += Math.round(Math.random()*255);
_color += ")";
return _color;
}
var createLi = function(attr) {
var ele = document.createElement("li");
ele.style.backgroundColor = attr.bgColor || "black";
ele.style.left = attr.left + "px";
ele.style.top = attr.top + "px";
ele.style.width = ele.style.height = "15px";
ele.onmouseover = function() {
var _self = this;
var _rotate = 0;
if(_self.interval) {
clearInterval(_self.interval);
_self.style.backgroundColor = _self._backgroundColorBK;
}
_self._backgroundColorBK = _self.style.backgroundColor;
_self.style.backgroundColor = color();
_self.interval = setInterval(function() {
_self.style.webkitTransform = "rotate("+_rotate+"deg)";
_rotate += 30;
if(_rotate > 360) {
clearInterval(_self.interval);
_self.onmouseover = null;
_self.style.backgroundColor = _self._backgroundColorBK;
move(_self);
return;
}
}, 100);
}
return ele;
}
var loca = {
x: 1000,
y: 0
};
var move = function(obj) {
var _self = obj;
var curX = parseInt(_self.style.left);
var curY = parseInt(_self.style.top);
var sX = loca.x - curX;
var sY = loca.y - curY;
var addX = sX/36;
var addY = sY/36;
var rotate = 0;
var backgroundColorBK = _self.style.backgroundColor;
_self.interval = setInterval(function() {
_self.style.width = _self.style.height = (parseInt(_self.style.height) + 5) + "px";
_self.style.webkitTransform = "rotate("+rotate+"deg)";
curX += addX;
curY += addY;
_self.style.left = curX + "px";
_self.style.top = curY + "px";
_self.style.backgroundColor = color();
rotate += 10;
if(rotate > 360) {
_self.style.left = loca.x + "px";
_self.style.top = loca.y + "px";
clearInterval(_self.interval);
_self.style.backgroundColor = backgroundColorBK;
return;
}
}, 30);
}
var init = function() {
var ul = $("canvas");
for(var i=50; i<90; i++) {
for(var j=50; j<90; j++) {
var color = "rgb("+i+","+j+","+Math.round(Math.random()*255)+")";
ul.appendChild(createLi({bgColor: color, left:(j-50)*16 ,top:(i-50)*16}));
}
}
}
var main = function() {
init();
}
main();
</script>
</html>
更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit
-
JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar
-
APP中javascript+css3实现下拉刷新效果
原生app里的数据列表都会使用下拉刷新的效果,在webapp里可以采用iscroll.swiper等插件或框架实现,那么如何自己编码实现类似的效果呢,下面介绍使用原生js+css3实现的简单效果. html布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-
-
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p
-
JavaScript+html5 canvas制作色彩斑斓的正方形效果
本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t
-
基于javascript实现图片左右切换效果
本文实例介绍了javascript实现图片左右切换效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>JS图片左右切换效果</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0; padding:0; } .images-scroll{ border:
-
JavaScript+html5 canvas制作的百花齐放效果完整实例
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra
-
JavaScript实现仿淘宝商品购买数量的增减效果
近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验. 1.数量一定是数字 2.点击增减按钮的时候要能自动加1或减1 3.用户输入的内容如果是非数字,则不能输入(退格键除外) 4.用户输入的值最小为1 5.输入框离开焦点时要检查取值范围,确保输入框中必须是范围内的数字 基本就是以上几点 效果如下: 以下是Html代码 <div class="bookNum"> <a id=&q
-
javascript实现图片轮播效果
本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0
-
js实现的彩色方块飞舞奇幻效果
本文实例讲述了js实现的彩色方块飞舞奇幻效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } ul { list-style:none; margin:0; padding:0; } li
-
原生JS实现多个小球碰撞反弹效果示例
本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l
-
vue自定义js图片碎片轮播图切换效果的实现代码
定义一个banner.js文件,代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) { //实例化时,可传的参
-
js简单的点击返回顶部效果实现方法
本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum
-
JS button按钮实现submit按钮提交效果
今天在使用表单是同时使用POST更新.删除操作.然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现,代码实现见如下: form设置: <form method="post" name="linkform"> 隐藏的act方法设置,代码如下: <input name="act" type="hidden" /> 最后关键的是 button的设置,更新按钮,
-
js+css简单实现网页换肤效果
本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br
-
利用Vue.js实现checkbox的全选反选效果
前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'
-
20行JS代码实现网页刮刮乐效果
分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body>  <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=&
-
js实现左侧网页tab滑动门效果代码
本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY
-
JS+CSS实现简易的滑动门效果代码
本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1