那些遇到过的问题

小编Lor*_*lin的帖子

带有框阴影的CSS语音泡泡

创建一个使用CSS在左侧绘制三角形的DIV.尝试将统一的box-shadow应用于父元素和伪元素(请参阅图像)和代码.

这可能吗？或者我最好使用border-image吗？

(上:暗影之前,中间:CSS Box-Shadow,Bottom:Desired Result)

添加Box-Shadow之前的元素

添加了box-shadow的元素

期望的结果

.bubble{
    height: 200px;
    width:  275px;

    opacity: 0;

    margin-top: 41px;

    float: right;

    background-color: #F2F2F2;

    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 6px #B2B2B2;
}

.bubble::after {
        height: 0px;
        width:  0px;

        content: "\00a0";

        display: block;

        margin-left: -10px;
        margin-top:   28px;

        border-width: 10px 10px 10px 0;
        border-style: solid;
        border-color: transparent #F2F2F2 transparent transparent;

        -webkit-box-shadow: 0px 0px 6px #B2B2B2;
    }
Run Code Online (Sandbox Code Playgroud)

html css css3 dropshadow css-shapes

Lor*_*lin
2015 03-26
53
推荐指数
3
解决办法
5万
查看次数

Javascript touchEvents在iPad上打破垂直滚动

我非常接近这种效果,但我在路上碰到了一个小小的凹凸.

我有一个带有主div(#message-viewer)的消息系统,它包含一个消息线程.我想要的是,当用户在iPad上查看此内容并向右滑动(此div内的任何位置)时,#message-viewer从屏幕滑出,#div2从屏幕左侧进入.

  • 好消息:iPad上的效果非常流畅,反应灵敏.来自Padalicious的Javascript就像一个魅力.

  • 问题:

    • 当效果上,我的其他的jQuery功能不工作(例如,我的按钮,打开一个新的div).
    • 垂直滚动不起作用!=(

  • 我试过了:

    • 在#swipeBox上的CSS中,我尝试了所有[overflow:]选项来启用滚动.没有bueno.
    • 我尝试将[ontouchstart =""]附加到单独的Div,而不是创建一个新的.没有bueno.

我希望这是有道理的......我附上了我的代码.我认为Padalicious代码可能会干扰Y滚动...

谢谢您的帮助!

HTML

<!DOCTYPE html>

<link rel="stylesheet" href="global/styles/base.css" type="text/css" />

  <script src="global/js/jquery.tools.min.js"></script>
  <script src="global/js/jquery.min.js"></script>
  <script src="global/js/jquery-ui.min.js"></script>
  <script src="global/js/jquery-1.5.js"></script>
  <script src="global/js/ipad.js"></script>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0,
  width=device-width, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

</head>

<body>

<div id="swipeBox" ontouchstart="touchStart(event,'message-viewer');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
  <div id="content-container">
    <div id="message-viewer">
       // CONTENT HERE
    </div>

    <div class="Div2">
       // CONTENT HERE
    </div>
  </div>
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS

#swipeBox {

width: 100%;
height: auto;

} …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery scroll ipad

Lor*_*lin
lucky-day
0
推荐指数
1
解决办法
2220
查看次数

标签 统计

css ×2

css-shapes ×1

css3 ×1

dropshadow ×1

html ×1

ipad ×1

javascript ×1

jquery ×1

scroll ×1