js实现九宫格布局效果
本文实例为大家分享了js实现九宫格布局效果的具体代码，供大家参考，具体内容如下
效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 1200px;
margin:0 auto;
}
#top{
padding: 20px;
}
#bottom{
position: relative;
}
.box{ //每一个小块
width: 220px;
height: 360px;
margin: 0 15px 15px 0;
background-color:#e8e8e8;
}
.box img{
width: 220px;
height: 300px;
}
.box p{
color: orangered;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<button id="btn1">3列</button>
<button id="btn2">4列</button>
<button id="btn3">5列</button>
</div>
<div id="bottom">
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
<div class="box">
<img src="../img/bg2.jpg" />
<h4>以为遇见你</h4>
<p>世界才会变得美丽</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function () {
//判断是否有id
function $(id) {
return typeof id ==='string'?document.getElementById(id):null;
}
//改变每个位置的函数 jiuge
function jiuge(lieshu,pn) {
var boxW=220,boxH=360,boxXY=15;
for(var i=0;i<pn.children.length;i++){
var row =Math.floor(i/lieshu);//行
var col=Math.floor(i%lieshu);//列
console.log("当前盒子所在的坐标：("+row+","+col+")");
var sd=pn.children[i];
sd.style.position='absolute';
sd.style.left=col*(boxW+boxXY)+'px';
sd.style.top=row*(boxH+boxXY)+'px';
}
}
//调用
$('btn1').addEventListener('click',function () {
jiuge(3,$('bottom'));
});
$('btn2').addEventListener('click',function () {
jiuge(4,$('bottom'));
});
$('btn3').addEventListener('click',function () {
jiuge(5,$('bottom'));
});
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）
实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: n
-
AngularJS实现的锚点楼层跳转功能示例
本文实例讲述了AngularJS实现的锚点楼层跳转功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> #wei div{ width:100%; height:720px; background: re
-
JS实现网站楼层导航效果代码实例
壹 ❀ 引言 对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片. 由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样的条件才应该点亮对应楼层,我们先看看实现效果: 贰 ❀ 实现思路 第一点,因为是由滚动触发的楼层判断,所以肯定离不开onscroll事件. 第二点,我们貌似要获取每个楼层顶端距离视窗顶部的距离,随着滚动条往下滚动,此距离会不断缩小,当接近到某个距离时我们判定此楼层入画,当然其它楼层都满足此判定. 而
-
JS实现留言板功能[楼层效果展示]
功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示 效果图 目录 tools.js 时间工具包 function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date
-
js实现楼层导航功能
图如下所示: 1.点击跳转到相应区域: 页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离: document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength; 2.滚动滚动条时对应的导航链接被激活 每个板块的导航链接对应一个长度区间,当滚动条滚动调的长度落在该区间时,该导航条则被选中.区间范围为当前板块的scrollTop值(包含)~
-
js实现楼层效果的简单实例
今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:
-
js实现小时钟效果
本文实例为大家分享了js实现小时钟效果的具体代码,供大家参考,具体内容如下 今天给大家分享一下制作小时钟 先给大家把代码分享出来 首先 JavaScript 代码 <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //获取现在的年份. var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11:所以进行加 1 操作: var date =
-
JS实现横向跑马灯效果代码
首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; margin-left: auto; margin-right: auto; height: 47px; border: 0px solid red; overflow: hidden;"> <ul id="syNoticeUlNew" style="margin
-
JS实现导航栏楼层特效
本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下 知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库 运行效果 导航与界面实现互动 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
-
js实现九宫格布局效果
本文实例为大家分享了js实现九宫格布局效果的具体代码,供大家参考,具体内容如下 效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ width: 1200
-
原生JS实现九宫格抽奖效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #container{w
-
js游戏人物上下左右跑步效果代码分享
本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>
-
Bootstrap实现的经典栅格布局效果实例【附demo源码】
本文实例讲述了Bootstrap实现的经典栅格布局效果.分享给大家供大家参考,具体如下: 先来看看效果图: 具体代码如下(某管理系统的Bootstrap实现): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:
-
js实现九宫格图片半透明渐显特效的方法
本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible { FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f
-
原生JS实现轮播效果+学前端的感受(防止走火入魔)
插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么
-
JS平滑无缝滚动效果的实现代码
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {
-
js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边分成一张大图,和一个导航栏,在右边则是一个放大镜放大后的图片.因此,我在画页面的时候,大体的HTMl结构如下: <body> <div class="choose"> <div class="content"> <img src
-
php+lottery.js实现九宫格抽奖功能
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() function start_lottery(){ if(flag){ //alert('正在抽奖
-
js实现简单放大镜效果
用js实现简单放大镜效果,供大家参考,具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大并不是真正的放大,而是等比例移动.下面是实现的代码: css样式代码如下: <style> .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;heig