0

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

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

这就是我所指的：

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

例如：
页面数据
页面数据
页面数据
页面数据
页面数据页面数据
页面数据
页面数据
页面数据
页面数据
滚动到这里<-----------从右到左弹出窗口。------

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

4

1 回答 1

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/

于 2013-06-22T07:50:14.117 回答