css+js框浮动位移效果

css+js框浮动位移效果

1.要实现的效果

咯，这个样儿就是要搞整起来的目标（看下面~看下面，好像有点像是电影的宣传一样 ！=_=！ ）

图 1-1

2.先来一个小框框

哈哈，就是使用一个div包裹

“
图 2-1

3.然后加上其他元素

头图

html

<img class="img-tezhan" src="./tz.jpg" alt="The Dark Knight Rises" onclick="">

css

.tezhan img{
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

图 3-1

标题和价格

html

<div class="title">
    <h2>The Dark Knight Rises</h2>
    <p>$ 35</p>
</div>

css

.tezhan .title{
    -moz-box-shadow:0px 2px 2px #0000001a;
    -webkit-box-shadow:0px 2px 2px #0000001a;
    box-shadow:0px 2px 2px #0000001a;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 10px 0;
}
.tezhan .title > p{
    color: #e74c3c;
}

图 3-2

4.最后加上box下面的 “go” 块儿和hover效果

“go” 加加加

html

<div class="view" onclick="location=''">GO →</div>

css

.tezhan .view{
    color: black;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    background-color: ;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

图 4-1

.tezhan 的hover

这边hover主要的一点是实现该元素的位移
css

.tezhan:hover{
    -moz-box-shadow:0px 2px 12px #0000002a;
    -webkit-box-shadow:0px 2px 12px #0000002a;
    box-shadow:0px 2px 12px #0000002a;
    margin-top: -5px;
}

针对“go”进行js强化

绑定鼠标over以及out事件对应要改变的css，因为hover是设置的“go”的父元素（好像是有其他的解决方式）
js

$('.tezhan').mouseover(function(){
    $(this).children('.view').css("background-color","#f69204");
    $(this).children('.view').css("color","#fff");
    $(this).children('.title').css("box-shadow","0px 0px 0px #0000001a");

});
$('.tezhan').mouseout(function(){
    $(this).children('.view').css("background-color","transparent");
    $(this).children('.view').css("color","transparent");
    $(this).children('.title').css("box-shadow","0px 2px 2px #0000001a");
});

5.分块儿链接设置

首先来一个想法，点击图片是查看该电影的详细信息页面，而点击下方的“go”就是进入购买页面，那如果是设置一个a标签来进行链接的话是不行的。

使用localtion

用localtion的话直接在多个对应的标签上使用onclick="xxxxx.html"就行了，方便快捷还可以使用url传参数。
比如onclick="location='user/exhibition/show.jsp?exhibitionId=33324343'"

使用js+input属性

有时候我们使用的时候需要一些对应参数，那可以使用一下input来储存一下参数信息，
<input type="hidden" exhibitionId="11" exhibitionName="22" ticketId="33" />
那要怎么取出来呢？jQuery太方便，直接各个元素的点击事件加上获取input中储存的参数信息就可以了。
$('#tezhan-container div').click(function(){
var exhibitionId = $(this).children("input").attr("exhibitionId");});
值取出来了就一切好办了，进行ajax的提交啊或者是转向其他的页面的都是可以操作的。

6.使用ajax异步加载数据啷个办呢

首先进行将“go”的js代码封装function，之后在ajax完成后进行调用。

封装（加个tt）

function tezhanMouse(){
    $('.tezhan').mouseover(function(){
        ····
    });
    $('.tezhan').mouseout(function(){
        ····
    });
}

然后是ajax

$.ajax({
    url:'xxxxx.do',
    tpye:'post',
    data:{},
    dataType:'text',
    success:function(result){
        var obj = JSON.parse(result);
        var html = "";
        /*分配数据*/
        $.each(obj,function(index1,item){
            html=""；
            //进行字符串拼装
        });
        // !!! 加载完成后或者是将拼装好的字符串append到文档流中完成后才能去绑定事件
        tezhanMouse();
    }
});

！有时候进行一些操作的时候还需要进行ajax的异步转同步
！如果没有文档对象鼠标事件是加不上的哦，所以很多时候JavaScript的引用都是放在整个html文件最后的body标签之前。

还可以做下屏幕适应

考虑到如果是使用的ipad或者手机，这个时候hover效果就gg，所以果断在css中进行设备配置：当小于某一个临界值就直接显示出来。靠的就是@media 。

@media (max-width: 992px) {
    .tezhan{
        -moz-box-shadow:0px 2px 12px #0000002a;
        -webkit-box-shadow:0px 2px 12px #0000002a;
        box-shadow:0px 2px 12px #0000002a;
    }

    .tezhan .title{
        -moz-box-shadow:0px 0px 0px #0000001a;
        -webkit-box-shadow:0px 0px 0px #0000001a;
        box-shadow:0px 0px 0px #0000001a;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        padding: 10px 0;
    }
    .tezhan .view{
        color: #fff;
        background-color: #f69204;
    }
}

源代码通道 jar

问题抱团了

1.背景色的问题

在处理过程中body使用的背景色是白色，body 和.tezhan 使用的背景色是白色，.view背景色设置的为透明来保证隐藏。如果body设置的颜色为其他颜色，那这时候.view就是凸显出来，显示为白色。那这个时候可以使用css属性透明度为0加上调整.tezhan的背景色为空或者使用透明色。

2.在hover触发的时候，页面的长度是要改变的

单独拿出来使用的话多个框处于一行的状态下会出现问题，在原来的模块中是使用的bootstrap中的栅格系统，然后进行行列分配。

还有好多好多呢 >o<

同时发布在：shaoxiaobin