Question

我一直在尝试在我的水平页面布局上使用数据转换选项来锚定但是不成功。当选择锚链接时，我试图给内容一个很好的幻灯片效果。它们的页面布局是水平的。使用转换仅适用于页面而不是锚点吗？此外，当文本比视口长时，无论用户在上一个链接/锚点之前的位置如何，都可以将锚链接跳转到锚点的顶部？

这是 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;
}

Answer 1

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

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

CSS数据 - 过渡到锚点

1 个答案: