Question

一旦用户完全向下滚动页面，我想从右下角出现一个弹出窗口。弹出窗口可以阅读更多链接或相关内容链接。

我正在使用jquery框架库和php。我希望弹出窗口具有动态内容。

这就是我所说的：

http://economictimes.indiatimes.com/news/economy/finance/Finance-Minister-P-Chidambaram-holds-meeting-with-officials-over-rupee-fall/articleshow/20676682.cms

例如：
页面数据
页面数据
页面数据
页面数据
页面数据
页面数据
页面数据
页面数据
页面数据
滚动到此处＆lt; -----------弹出窗口从右到左.------

请指导我如何做同样的事。

Answer 1

Html代码：

Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>
<div style="display: none;" id="slideout"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">(X)</a>  <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Some More Data</span>

    <br />
    <div style="float:left; margin:15px;">llllllllllllll</div>
    <div style="float:left; margin:15px;">lllllllllllllll</div>
</div>
<div class='clear'></div>

JS代码：

$(window).scroll(function () {
    if ($(document).scrollTop() >= $(document).height() / 4) $("#slideout").show("slow");
    else $("#slideout").hide("slow");
});

CSS代码：

#slideout {
    background:#f3f3f3;
    border-radius:9px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -moz-box-shadow:inset 0 0 4px #333;
    -webkit-box-shadow:inset 0 0 4px #333;
    box-shadow:inner 0 0 3px #333;
    padding:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:3;
    height:65px;
}

http://jsfiddle.net/fakhruddin/4TrV6/

弹出从页面右下角的单词向下滚动

1 个答案: