demo1---相册

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了demo1---相册相关的知识,希望对你有一定的参考价值。

技术分享

 

 html代码:
  创建基本框架结构   尽量使用div css代码:   style样式保存在css文件中,使用<link rel = "" href = "" >导入   滑动效果使用"hover"属性 js代码:   使用<script src="" ></script>导入   同时可以将图片资源保存为data.js文件,在jQuery中使用$.each(arr, function(){})方法遍历即可 jQuery代码:   使用<script src="" ></script>导入   由于有多个相同的div,可以使用jQuery进行动态创建,优化代码



具体问题:

一 div独占一行的解决方法:
  1 通过display改变容器的显示类型
      display:inline;//不能控制行高
      display:inblock-block;//可以控制行高,但是元素之间会有文本占位
      display:none;//此元素不存在
  2 通过float使元素浮动,脱离文档流,达到自左向右或自右向左的效果
      float:none;//设置对象不浮动
      float:left;//设置对象浮在左边
      float:right;//设置对象浮在右边
   float在display为none时不生效
  
二 href和src的区别:
  link的href的链接是使用网络资源
img的src是将资源保存到本地缓冲

三 <a>标签
  <a>标签拥有默认样式,修改样式必须在<a>标签内部
  text-decoration:none;//去掉下划线
  
四 图片溢出容器处理
  1 设置图片宽高
  2 在父容器中将溢出部分隐藏
    overflow:hidden;
  3 通过百分比设置为父容器的百分之几
    width:100%;
    height:100%;//当通过百分比设置容器高时,父容器必须设置高度,否则百分比失效

五 img的特性
  设置宽或高时等比缩放

六 改变元素层级
  z-index:1;
  只能在position:absolute;有效
  只在层级元素中有用,数值越大,层级越高,层级从1开始,0为默认层级

七 通过position给元素定位
  
  position 不仅可以给元素定位,还可以改变元素参照物,向父辈容器中寻找一个带有定位属性的元素为参照点,如果没有,以body为参照
  position:absolute;//绝对定位
  position:relative;//相对定位
    以元素在当前位置为标准,不影响正常文档流
  position:fixed;//固定定位
    永远以浏览器可视窗口区域为参照区域,定位元素不随页面的滚动而改变位置,保证定位元素永远显示在可视范围内

八 使元素在另一个容器中绝对居中,可以通过绝对定位和magin:auto;的方式
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;

 

<!DCOTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>demo1_相册</title>
        
        <link rel="stylesheet" href="css/demo1.css" />
    </head>
    <body>
        <div class="mainbox">
            <div class="title">Hoverbox Image Gallery</div>
            <div class="hr"></div>
            <div class="footer"></div>
        </div>
        
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="js/imgdata.js" ></script>
        <script type="text/javascript" src="js/demo1.js" ></script>
    </body>
</html>
.mainbox{
    width: 600px;
    height:400px;
    margin:0 auto;
    padding: 0px;
    border:1px solid #000000;
}
.title{
    text-align: center;
    height:40px;
    font-weight: bold;
    line-height:40px;
    color:#900;
}
.hr{
    border-top:1px dashed #000000;
}
.box{
    background: #ccc;
    width:114px;
    height:80px;
                
    /*取消div独占一行*/
    float: left;
    
    margin-top: 5px;
    margin-left: 5px;
                
    border-color: #A9A9A9;
                
    position:relative;
}
.box img{
    /*处理图片溢出*/
    width: 102px;
    height: 68px;
                
    margin:5px;
    padding: 1px;
                
    background-color: #A9A9A9;
    border:1px solid #FFF;
}
.box img:hover{
    width:140%;
    height:140%;

    position: absolute;
    top:-20px;
    left:-20px;
                
    /*修改img的层级*/
    z-index: 1;
}
$(function(){
    var $mainbox = $(".mainbox");
    var $imgmainbox = $("<div class=‘imgmainbox‘></div>");

    $.each(imgdata, function(i,o) {
        var $box = $("<div class=‘box‘><img src =‘"+ o.img +"‘/></div>");
        $imgmainbox.append($box);
    });

    $mainbox.append($imgmainbox);
})

 

 

var imgdata=[{
    name:"img1",
    img:"img/img1.jpg"
},{
    name:"img2",
    img:"img/img2.jpg"
},{
    name:"img3",
    img:"img/img3.jpg"
}]

 



























































以上是关于demo1---相册的主要内容,如果未能解决你的问题,请参考以下文章

片段 getActivity 不起作用

WebView 无法加载 Imgur 相册

C代码编译成可执行程序的过程

jsp实现仿QQ空间新建多个相册名称,向相册中添加照片

jsp实现仿QQ空间新建多个相册名称,向相册中添加照片

使用纯CSS代码实现3D旋转效果