1

我一直在尝试在我的水平页面布局上使用锚点的数据转换选项，但没有成功。I'm trying to give the content a nice slide effect when the anchor link is selected. 他们的页面布局是水平的。使用过渡仅适用于页面而不适用于锚点吗？此外，当文本比视口长时，是否有可能让锚链接跳转到锚的顶部，而不管用户之前在前一个链接/锚上的位置是什么？

这是HTML 

<div id="header">
    <ul id="menu">
        <li><a class="anchor" href="#box1" data-transition="slide">Home</a>
        </li>
        <li><a class="anchor" href="#box2" data-transition="slide">About Us </a>
        </li>
    </ul>
    <div id="wrap">
        <div id="box1"><a name="box1"></a> 
            <div class="contentcontainer">
                    <div class="contentccrightcontainer">

                         <h1 class="blue">Home</h1> litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo.


<h1 class="blue">Home</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet est justo. Maecenas eget cursus sapien. Fusce in nisi elementum, rhoncus odio quis, placerat velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo.

                </div>
                </div>
            </div>

        <!--- Section 2 -->

    <div id="box2"><a name="box2"></a> 
            <div class="contentcontainer">
                    <div class="contentccrightcontainer">

                         <h1 class="blue">About Us</h1> litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo.


<h1 class="blue">About Us</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet est justo. Maecenas eget cursus sapien. Fusce in nisi elementum, rhoncus odio quis, placerat velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet ultricies nulla. Phasellus vel felis nec neque ultricies condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pretium tincidunt nulla, eu vestibulum sem malesuada in. Maecenas consequat eros dolor, nec luctus lectus dignissim vel. Maecenas placerat mollis arcu, feugiat pharetra leo adipiscing sed. Curabitur eget varius libero, ac tristique justo.

                </div>
                </div>
            </div>     
    </div>

这是CSS

.contentcontainer {
    -moz-box-shadow: 1px 1px 15px 1px #000;
    box-shadow: 1px 1px 15px 1px #000;
    overflow: auto;
    margin: 0 auto;
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    width: 940px;
    padding-bottom: 25px;
    padding-left: 30px;
    top: 65px
}
.contentccleft {
    padding-top: 35px;
    float: left;
    position:relative;
    margin-left:15px;
    width: 425px;
}
.contentccright {
    margin-left: 20px;
    padding-top: 35px;
    width: 350px;
    float: left;
    position: relative;
    padding-left: 5px;
}
.contentccrightcontainer {
    position: relative;
    width: 840px;
    background:#eaeaea;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    overflow:auto;
}
#header {
    width: 100%;
    background-color: #000;
    z-index: 2000;
    height: 55px;
    position:fixed;
    margin: 0 0;
}
#menu {
    width: 940px;
    margin: 0 auto;
}
ul li {
    list-style: none;
    height: 50px;
    float:left;
    padding:0 0;
}
ul li a {
    font-family: font3;
    width: 134px;
    height: 50px;
    line-height: 53px;
    border-bottom: 6px solid #636393;
    color: #fff;
    font-size:13px;
    text-transform: uppercase;
    text-align:center;
    text-decoration: none;
    display: block;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -o-transition: .2s all linear;
    transition: .2s all linear;
}
li:nth-child(1) a {
    border-color: #fff;
}
li:nth-child(2) a {
    border-color: #FF6;
}

li:nth-child(1) a:hover, li:nth-child(1) a.active {
    color: #000;
    border-bottom: 55px solid #fff;
    height: 1px;
}
li:nth-child(2) a:hover, li:nth-child(2) a.active {
    color: #000;
    border-bottom: 55px solid #ff6;
    height: 1px;
}

#wrap {
    min-height: 100%;
    width:200%;
    overflow:hidden;
    background: #ff0000;
}

#box1, #box2, {
    width:50%;
    float:left;
    color: #000;
}
4

1 回答 1

1

默认情况下忽略同一页面上的转换。http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

来自上面的链接：
使用相同页面转换
默认情况下忽略当前活动页面的转换，但可以使用 $.mobile.changePage 方法的 allowSamePageTransition 选项启用。请注意，并非所有转换都会按预期工作，并且可能以不切实际的结果结束。

于 2013-08-01T17:24:10.460 回答