首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在URL更改时为div提供ontouch效果

如何在URL更改时为div提供ontouch效果
EN

Stack Overflow用户
提问于 2015-06-30 14:39:45
回答 1查看 74关注 0票数 0

我正在制作一个phonegap应用程序,在其中我需要在一个div中给出触摸开始到触摸结束的效果。

我的问题:我使用了触摸效果墨水(https://github.com/akhilarjun/InkDrops),但在我的情况下,这是不起作用的,因为单击div会立即更改URL (就像在chrome上测试的那样),由于角度控制器会发生变化,因此效果不会发生。

我想要一些新的效果的建议,以及上述问题的补救措施。

下面是我想要实现的div

HTML:

代码语言:javascript
运行
复制
 <div style="box-shadow: 0px 0px 8px 1px #ccc;margin: 0 12px;">
           <div class="opporMain  inkMe" style="margin:0px" >
                <div class="opporHeader" >

                    <div class="opporHeading">This is the Header</div>
                </div>
                <div class="lineDiv"></div>
                <div class="opporContent"  >
                    <div class="contentContainer">
                        <div class="contentStatus">
                            Hi this is the content
                        </div>
                    </div>
                <div class="clearContent"></div>
                    <div class="contentUpdateTime"><img class="timeIcon" src="images/drawable-mdpi/time-icon-mdpi.png" alt="clock">&nbsp;Time  ago</div>
                    <div class="clearContent"></div> 
                    <div class="contentUpdateBy">updated by <font color="black">here goes the name</font></div>     

                    </div>
     </div>
</div>
<div class="lineDiv"></div>

CSS:

代码语言:javascript
运行
复制
.commentIcon{
   content:url(images/drawable-xxhdpi/comment.png);
   height:16px;
   width:16px;
   }

.timeIcon
{
    content:url(images/drawable-xxhdpi/time-icon-xxhdpi.png);
   height:12px;
   width:12px;
}
.opporMain {

margin-left:12px;
    margin-right:12px;
}
.opporHeader {
    clear:both;
    /*position:relative;*/
    display:inline-block;
    display:block;
    background-color:#ffffff;
    overflow:hidden;
    word-break :break-all;
    min-height:40px;

}
.circleIcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    margin-top:6px;
    display:block;
    -wsebkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    background-color:#ffb400;
    margin-left: 8px;
    text-align: center;
    font-family: Roboto-Light;
    font-size:18px; 
    color:White;
    vertical-align: middle;
    line-height: 28px;
}
.opporHeading {
    display: inline-block;
    font-family: Roboto-bold;
   /* font-weight: 700;*/
    font-size: 16px;    
    column-rule: #000;231f20;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 45px;
    padding-right: 4px;
}
.lineDiv {
    border-bottom: 1px solid #eee;
}
.opporContent {

    background-color:#ffffff;
    overflow:hidden;

    padding-bottom:12px;    

}
.opporComment
{
    height:40px;
    background-color:#ffffff;
    overflow:auto;
    margin-left:12px;
    margin-right:12px;
    cursor: pointer;

}
.contentContainer
{
    /*display:inline-block;*/
}
.contentStatus
{


    float:left;
    font-family:Roboto-R;
    font-weight:400;
    font-size:14px;
    color:#4554a5;
    margin-top:10px;   
    margin-left:8px;

}
.clearContent
{
    clear:both;    
}
.contentUpdateTime
{

    float:right;
    font-family:Roboto-Light;
    font-weight:100;
    font-size:12px;    
    color:#b1b3b6;
    margin-top:20px;
    margin-right:10px;

}
.contentUpdateBy
{
    float:right;
    font-family:Roboto-Light;
    font-size:14px;    
    font-weight:300;
    color:#b1b3b6;
    margin-top:4px;
    margin-right:10px;

}    
.opporCommentContent
{
    display: inline-block;
    float:left;
    font-family: Roboto-Medium;
    font-weight: 500;
    font-size:14px;
    margin-top:10px;
    margin-left:6px;
    color:#4f4f51;
}
.commentIcon
{
    display: inline-block;
    float:left;
    margin-top:14px;
    margin-left:8px;
}
.opporCommentDetails
{
    float:right;
    margin-top:10px;
    margin-right:10px;
    font-family: Roboto-Light;
    font-size:14px;
    color:#b1b3b6;
}

http://jsfiddle.net/tvaibhav/vjxe9ozq/

EN

回答 1

Stack Overflow用户

发布于 2015-06-30 14:47:26

尝试使用Angular-Ripple

这会产生你想要的连锁反应。

https://github.com/nelsoncash/angular-ripple/tree/master

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31131296

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档