原生js，一些小应用（逢10进一，生成V字，多个div抖动）
第一题：每隔10个div换一行。并且鼠标移入 改变opacity。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
position: relative;
background: #EEE;
width: 510px;
height: 510px;
}
#box div{
width: 50px;
height: 50px;
background:url('./pic.jpg') no-repeat;
position:absolute;
opacity:0;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById('box')
var str = ''
for(var i=0; i<100; i++){
str += '<div></div>'
}
box.innerHTML = str
var oDiv = box.getElementsByTagName('div') var j = -1
var j2 = -1
for(var i=0; i<oDiv.length; i++){
j2++
if(i%10==0){
j++
j2 = 0
}
oDiv[i].style.left = j2 * 51 + 'px'
oDiv[i].style.top = j * 51 + 'px'
oDiv[i].style.backgroundPosition = ''+-(j2 * 51)+'px '+-(j * 51)+'px' oDiv[i].onmousemove = function(){
this.style.opacity = 1
}
}
</script>
</html>
二、生成V字型，绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
position: relative;
margin-top:160px;
left:100px;
}
#box div {
width: 50px;
height: 50px;
position: absolute;
left:0px;
top:0px;
background:#F60;
text-align: center;
line-height:50px;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
</body>
<script>
var coun = 0
var box = document.getElementById('box')
var btn = document.getElementById('btn')
btn.onclick=function(){
if(coun == 0 ){
a1()
}else if(coun == 1){
a2()
}else if(coun == 2){
a3()
}else if(coun == 3){
a4()
}
if(coun>=3){
coun = 0
}else{
coun++
}
}
var oDiv = null
function gg(){
box.innerHTML = ''
var str = ''
for(var i=0; i<=4; i++){
str+= '<div>'+i+'</div>'
}
box.innerHTML = str
oDiv = box.getElementsByTagName('div')
}
function a1(){
gg()
var j1 = 0
for(var i=0; i<oDiv.length; i++){
if(i>2){
j1++
}else{
j1--
}
oDiv[i].style.left = i * 50 + "px"
oDiv[i].style.top = j1 * 50 + "px"
}
}
function a2(){
gg()
var j1 = oDiv.length
var j2 = 0
for(var i=0; i<oDiv.length; i++){
if(i>2){
j2--
j1--
}else{
j1--
j2 = i
}
oDiv[i].style.left = j2 * 50 + "px"
oDiv[i].style.top = -(j1 * 50) + "px"
}
}
function a3(){
gg()
var j1 = -1
for(var i=0; i<oDiv.length; i++){
if(i>2){
j1--
}else{
j1++
}
oDiv[i].style.left = i * 50 + "px"
oDiv[i].style.top = j1 * 50 + "px"
}
}
function a4(){
gg()
var l = parseInt(oDiv.length/2)+1;
var t = parseInt(oDiv.length/2)+1
for(var i=0; i<oDiv.length; i++){
if(i>2){
l++
}else{
l--
}
t--
oDiv[i].style.left = l * 50 + "px"
oDiv[i].style.top = t * 50 + "px"
}
}
</script>
</html>
三、多个div抖动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
margin-left:100px;
width: 1200px;
height: 100px;
position: relative;
}
#box div{
position: absolute;
width: 50px;
height: 50px;
background: #ff6600;
line-height: 50px;
text-align: center;
color:#FFF;
top:90px;
cursor: pointer;
}
</style>
</head> <body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById('box')
var strs = ''
for(var i=0; i<10; i++){
strs+='<div style="left:'+i*100+'px;">'+i+'</div>'
}
box.innerHTML = strs
var oDiv = box.getElementsByTagName('div')
var len = oDiv.length
var arr = []
var sum = 0
for(var i=20; i>=0; i-=2){
arr.push(i,-i)
}
arr.push(0);
for(var i=0; i<len; i++){
oDiv[i].cc = 0
oDiv[i].onmouseover=function(){
shake(this,'top')
}
} /*
解决鼠标移入以后 无法回到原来的位置。
为什么要加obj.cc 鼠标移入时会多次触发函数。所以它会不断从新的位置开始计算。
解决方法：给每一个div添加一个自定义属性，鼠标移入时就++ 判断等于1时执行。 无论怎么移入都执行一次。触发效果结束以后设置为0
*/
function shake(obj,attr,fn){
obj.cc++
if(obj.cc==1){
var pos = parseInt(getStyle(obj,attr))
var timer = null;
var sum = 0
clearInterval(obj.timer)
obj.timer = setInterval(function(){
if(sum == arr.length){
clearInterval(obj.timer)
obj.cc = 0
fn && fn()
}else{
obj.style[attr] = pos + arr[sum] + "px"
sum++
}
},30)
}else{
return false
}
} function doMove(obj,attr,drs,end,fn){
obj.item = 'null'
clearInterval(obj.item)
obj.item = setInterval(function(){
var speed = parseInt(getStyle(obj,attr)) + drs
if(speed>end && drs>0){
speed = end
clearInterval(obj.item)
}
if(speed<end && drs<0){
speed = end
clearInterval(obj.item)
}
obj.style[attr] = speed + "px"
if(speed == end){
clearInterval(obj.item)
fn && fn()
}
},30)
} //获取当前位置的信息
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
</script>
</html>
原生js，一些小应用（逢10进一，生成V字，多个div抖动）的更多相关文章
- JS随机生成100个DIV每10个换行(换色，生成V字和倒V)
附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- 用原生js写小游戏--Flappy Bird
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
- JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- 原生js添加博客点击鼠标出小心心效果~~
昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...
- 微信小程序结合原生JS实现电商模板（二）
接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...
随机推荐
- 经验总结18--EF改动关系，多对多
EF改动关系让我费事蛮多时间.能查的资料少,网上试了非常多方法都不正确. 最后还是自己研究出来了.在这里和大家分享下,有更好的方法也能够分享下. 首先说说我一般做改动功能时,前台传參数,后台使用对象接 ...
- Lua 与C/C++ 交互系列:注冊枚举enum到Lua Code中
在Lua Code中注冊C/C++的枚举很easy,就像注冊全局变量一样.我们使用枚举名称作为命名空间,来避免注冊的枚举发生冲突.注冊的枚举存储在全局环境(线程环境)中. 当在Lua Code中訪问枚 ...
- java 命令行 编译 运行程序
学习java使用IDE前最好先用用命令行的javac.java来跑一跑简单的程序,这样能够熟悉一下包管理对.class文件路径的影响. 我们先写一段简单的代码: package com.csdn.lk ...
- netpbm开机logo制作工作【转】
本文转载自: http://www.fx114.net/qa-19-74437.aspx
- Jungle Roads --hdoj
Jungle Roads Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total ...
- 南海区行政审批管理系统接口规范v0.3（规划） 3.业务办理API 3.1.businessAuditById【业务办理】
{"c_accept":"Q2015112400002","c_operators":"gz99","v_op ...
- 中文分词--最大正向与逆向匹配算法python实现
最大匹配法:最大匹配是指以词典为依据,取词典中最长单词为第一个次取字数量的扫描串,在词典中进行扫描(为提升扫描效率,还可以跟据字数多少设计多个字典,然后根据字数分别从不同字典中进行扫描).例如:词典中 ...
- guice基本使用，guice整合guice-servlet，web scope注解（六）
guice servlet提供了几个比较有用的web scope,类似与传统servlet 的session,request这些提供的范围等. guice servlet 提供的web scope 如 ...
- 关于CI中的MVC以及扩展CI中的控制器
MVC是一种设计模式模式,M(模型)—V(视图)—C(控制器): MVC的核心思想是强制开发者在进行项目开发时,将数据的输入,处理,输出分开编写: 1.入口文件:该文件是唯一一个给浏览器直接请求的脚本 ...
- img和div的宽度不一样问题和li之间空隙问题的解决方案
img和div宽度不一致问题 今天写代码,遇到一个小问题,我把一张图片放进一个div里,然后没有设置任何的padding和margin,但是发现图片和div的高度不一样,在img的下方出现了3px的空 ...