Jquery 如何在URL更改时使div具有ontouch效果
我正在制作一个phonegap应用程序,其中我需要在div中给出touch start to touch end的效果 我的问题是:我使用了触摸效果墨水滴(),但在我的例子中,这不起作用,因为点击div会立即更改URL(在chrome上测试),因为角度控制器会更改,因此效果不会发生 我想建议一些新的效果,以及解决上述问题的方法 这是我想要生效的div HTML:Jquery 如何在URL更改时使div具有ontouch效果,jquery,angularjs,css,css-transitions,css-animations,Jquery,Angularjs,Css,Css Transitions,Css Animations,我正在制作一个phonegap应用程序,其中我需要在div中给出touch start to touch end的效果 我的问题是:我使用了触摸效果墨水滴(),但在我的例子中,这不起作用,因为点击div会立即更改URL(在chrome上测试),因为角度控制器会更改,因此效果不会发生 我想建议一些新的效果,以及解决上述问题的方法 这是我想要生效的div HTML: <div style="box-shadow: 0px 0px 8px 1px #ccc;margin: 0 12px;"&g
<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"> 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>
尝试使用角度波纹 这会产生你想要的涟漪效应
我实现了与此非常相似的indrop,但在我的情况下,这不起作用,因为我在点击时遇到了URL更改的问题,因此ripple通常不会出现。你可以在fiddle中复制吗..bcoz上面的fiddle链接并不能让事情变得清晰事实上我不能理解,它有一个页面重定向造成了问题,而且我还有一个扩展javascript尝试在e上制作一些不完全相同的原型
.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;
}