1

水平方向のページ レイアウトのアンカーに data-transition オプションを使用しようとしましたが、うまくいきませんでした。アンカー リンクが選択されたときに、コンテンツに素敵なスライド効果を与えようとしています。ページのレイアウトは横長です。トランジションはアンカーではなくページでのみ使用できますか? また、テキストがビューポートよりも長い場合、ユーザーが以前のリンク/アンカーのどこに配置されていたかに関係なく、アンカー リンクをアンカーの上部にジャンプさせることは可能でしょうか?

ここに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 に答える