html php照片墙代码,js写的随机照片墙
html,body{ height:100%;}
.btn{
width:50px; /*宽:50像素*/
height:50px;/*高:50像素*/
background:white;/*背景颜色:黑色*/
border-radius:50%; /*矩形圆角*/
margin-left:40px;
}
.btnBg{
width:90px; /*宽:50像素*/
height:50px;/*高:50像素*/
background:green;/*背景颜色:黑色*/
border-radius:25px; /*矩形圆角*/
}
.images img{
position:absolute; /*绝对定位,图片重叠 改变位置:left,top*/
border:white solid 9px;
box-shadow:#333 5px 5px 5px;
transition:all 1s;
}
.images img:hover{
z-index:999;
}
//js脚本
//黑色圆点 单击 黑色圆点移动
var mybtn = document.getElementById("mybtn");//创建变量(对象)
var btnBg = document.getElementById("btnBg");//创建变量(对象)
var mybody = document.body;
var flag = 1; //0代表关闭,1代表打开
mybtn.onclick = function(){
//判断 打开还是关闭
if(flag == 1){ //如果flag的值 ==(判等) 1
mybtn.style.marginLeft = "0";
flag = 0; //设置flag为关闭状态
btnBg.style.background = "gray";
mybody.style.background = "white";
}else{//否则,flag的值不是1
mybtn.style.marginLeft = "40px";
flag = 1; //设置flag为打开状态
btnBg.style.background = "green";
mybody.style.background = "gray";
}
}
//获取当前窗口的高度和宽度 mybody.offsetHeight\mybody.offsetWidth
//随意摆放图片 —— 随机 Math.random()
//alert(Math.random()*mybody.offsetWidth); //(0,1) -> (0,mybody.offsetWidth)
var imglist = document.getElementsByClassName("imglist");
for(var i=0;i<=6;i++){
imglist[i].style.top = Math.random()*(mybody.offsetHeight-400)+"px";
imglist[i].style.left = Math.random()*(mybody.offsetWidth-200)+"px";
imglist[i].style.transform = "rotate(" + parseInt(Math.random()*60-30) + "deg)";
}
var img1 = document.getElementById("img1");
img1.onmouseover = function(){
//alert();
img1.style.transform = "rotate(0deg) scale(2,2)";
}
img1.onmouseout = function(){
//alert();
img1.style.transform = "rotate(0deg) scale(1,1)";
}
html php照片墙代码,js写的随机照片墙相关推荐
- js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
- Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
- html一个页面分页代码怎么写,纯JS前端实现分页代码
先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页 ...
- 原生JS写仿淘宝搜索框(代码+效果),可实现3级搜索哦!
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
- js写css字体,js如何写出css动画 ?js写css动画的方法(代码)
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
- 前端进阶-个人笔记-如何写出更好风格的JS代码(JS 代码优化建议)
1. 按强类型风格写代码 JS 是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好.下面分点说明: (1)定义变量的时候要指明类型,告诉 JS 解释器这个变量是什么数据类型的,而不 ...
- js计算生理期代码怎么写
js计算生理期代码怎么写,js实现生理期计算方法教程如下: 1.输入上次月经日期 2.输入平均月经周期 计算结果:计算出对应排卵期.安全期和月经期 js实现代码: function Calculate ...
- js制作秒表计时器代码怎么写
js制作秒表计时器教程,js制作秒表计时器代码怎么写教程如下: js实现代码: var t=[0, 0, 0, 0, 0, 0, 0, 1]; var firstsplitflag = 0; var ...
- 前端面试:手写代码JS实现字符串反转
前端萌新面试:手写代码JS实现字符串反转 前言 因为做前年小红书的前端校招面试题,发现出现好几道关于字符串对象和数组对象的题目,说难不难,但突然要写的话一时想不起来,这不想着做个小总结. 首先明白字符 ...
- js实现密度单位转换代码怎么写
js实现密度单位转换的方法,js实现密度单位转换代码怎么写教程如下: 随机输入一个单位数据 计算结果:换算出每个单位的具体数据 js实现代码: $(function () {var qcloud = ...
最新文章
- 《iOS9开发快速入门》——导读
- java继承详解加练习题
- 必看!程序员逃生指南
- 网页拼图游戏html代码,网页设计(一):拼图游戏
- 【GISER Painter】矢量切片(Vector tile)
- 如何在eclipse调试mapreduce程序
- Python稳基修炼之计算机等级考试易错细节题2(含答案和解析)
- Flutter进阶—网络和HTTP
- 正则 0个或多个_正则表达式一知半解
- Problem D. Country Meow 2018ICPC南京
- SATA SAS SSD 硬盘介绍和评测
- C语言基础教程之函数
- 大整数相乘python fft_Python带你理解用于信号同步的CAZAC序列
- 智能优化算法:黑寡妇算法 -附代码
- 概率论:假设检验、极大似然估计、无偏估计
- 聊聊reactive streams的schedulers 1
- 网站地图是什么,怎么制作和查看网站的地图呢?
- 小孩由祖母带大会越发机灵[图]
- Android8.0 NotificationChannel修改铃声和振动的坑
- C++基础之 函数(function)