xiaobin's studio

css+js框浮动位移效果

字数统计: 1.2k阅读时长: 5 min
2017/06/11 Share

[TOC]

#css+js框浮动位移效果

##1.要实现的效果

###咯,这个样儿就是要搞整起来的目标(看下面~看下面,好像有点像是电影的宣传一样 !=_=! )
图 1-1
1-1

##2.先来一个小框框

###哈哈,就是使用一个div包裹

图 2-1
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
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
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
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<

原文作者:小镔

原文链接:http://www.shaoxiaobin.com/2017/06/11/2017-06-11css+js框浮动位移效果/

发表日期:June 11th 2017, 9:00:00 am

更新日期:January 11th 2019, 9:14:10 am

版权声明:非商业用途,转载请注明出处:邵小镔 http://www.shaoxiaobin.com

CATALOG
  1. 1. “go” 加加加