12个div逐个显示效果

2024-10-26 20:21:31

这个效果一般可以用于导航栏目显示，图片显示。如果你的层名字不规则（不是div1、2、3...），可以先把她们放在数组里，然后调用。

无标题文档

#container{ width:60%; height:80%; position:absolute; text-align:center}
#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10,#div11,#div12{ width:80px; height:80px; background:#eeeeee; margin:0 2px 2px 0; padding:20px; border:3px #ccc double; font:30px Verdana, Arial, Helvetica, sans-serif; color:#666; float:left; display:none }

var i=1,j
function shoppingcat(){
if(i=1)&&(j

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

顺序显示

#container{
position:absolute;
border:1px solid #666;
padding:10px;
}
#container li{
display:none;
list-style:none;
float:left;
margin:1px;
padding:20px;
width:80px;
height:80px;
border:3px #ccc double;
background:#eee;
font:30px Verdana, Arial, Helvetica, sans-serif;
color:#666;
}
#container .orderly-change{
border:3px #666 double;
background:#ccc;
}

var i=0,j
function orderly_show(){
var container_li=document.getElementById("container").getElementsByTagName("li");
if(i

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

12个div逐个显示效果

这个效果一般可以用于导航栏目显示,图片显示.如果你的层名字不规则(不是div1.2.3...),可以先把她们放在数组里,然后调用. 无标题文档 #container{ width:60%; height:80%; position:absolute; text-align:center} #div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10,#div11,#div12{ width:80px; height:80px; back
javascript+jQuery实现360开机时间显示效果

实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &
jQuery构造函数init参数分析

在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var
BootStrap入门教程(三)之响应式原理

相关阅读: BootStrap入门教程(一)之可视化布局 BootStrap入门教程(二)之固定的内置样式 Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .
javascript实现仿百度图片的瀑布流加载效果

由于没有服务器,就用一个json字符串作为下拉时加载图片数据的来源了 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/waterfall.js"></script> <styl
JavaScript瀑布流布局实现代码

先说一下什么是瀑布流布局. 就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站都采用这种瀑布流布局,如蘑菇街.美丽说等等. 首先要实现它就要明白它是怎样排列的. 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的.. 第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的. 首先实现框架. <div id = "main"> <div class = "box"> <div class = &quo
一个JavaScript的求爱小特效

这里面做了一个JavaScript的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了.闷骚男们,是不是可以给你的小萝莉发个这样的网页啊.给力的. 贴上code吧: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t
Jquery瀑布流插件使用介绍

瀑布流布局浅析浅谈个人在瀑布流网页的实现中遇到的问题和解决方法折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流.各大瀑布流简析与建议因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧. 先看看Demo 把代码放出来吧复制代码代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:'waterfall_column'
JavaScript高仿支付宝倒计时页面及代码实现

实现目标一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除订单. 四,单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体图(可以参照"如何制作字体图"章节)的相关知识. 这里分享出来,希望大家能从中学到自己想要的知识. 代码
BootStrap3学习笔记(一)之网格系统

如果显示网格,代码应类似这样: <div class="container"> <div class="row"> <div class="col-md-4"><p>Box 1</p></div> <div class="col-md-4"><p>Box 2</p></div> <div class=&

12个div逐个显示效果

相关推荐

随机推荐