【help】淘宝无间断焦点图原理

籽沫 2011-04-15 10:05:32
有兴趣的朋友帮忙看看

最近要做个五间断的焦点图，对于其原理总是找不到核心，看了下网上很多方法都是用多余的div去clone活动内容来实现的，可是通过jquery实现起来也大致的知道就是通过insert去做，但是今天无意看到淘宝的焦点图也是无间断的，然后仔细的剥离了下，发现它是在li里面处理的，可是自己怎么想都想不同它怎么做出来的这个效果有没高手解惑下非常感谢！

它的实现js是：



(function() {

    if (typeof(HTMLElement) != "undefined" && !HTMLElement.prototype.insertAdjacentElement) {

        HTMLElement.prototype.insertAdjacentElement = function(a, b) {

            switch (a.toLowerCase()) {

            case "beforebegin":

                this.parentNode.insertBefore(b, this);

                break;

            case "afterbegin":

                this.insertBefore(b, this.firstChild);

                break;

            case "beforeend":

                this.appendChild(b);

                break;

            case "afterend":

                if (this.nextSibling) {

                    this.parentNode.insertBefore(b, this.nextSibling)

                } else {

                    this.parentNode.appendChild(b)

                }

                break

            }

        };

        HTMLElement.prototype.insertAdjacentHTML = function(b, d) {

            var c = this.ownerDocument.createRange();

            c.setStartBefore(this);

            var a = c.createContextualFragment(d);

            this.insertAdjacentElement(b, a)

        }

    }

})();

(function() {

    com_tanx = window.com_tanx || {};

    com_tanx.p = com_tanx.p || {};

    com_tanx.p.show = (function(d, b, a, g, c) {

        var f = c ? c: window;

        var e = c ? c.document: document;

        if (b) {

            window.setTimeout((function() {

                b.insertAdjacentHTML("beforebegin", d);

                if (typeof g == "function") {

                    g()

                }

            }), 0)

        } else {

            if (a) {

                window.setTimeout((function() {

                    a.insertAdjacentHTML("afterbegin", d);

                    if (typeof g == "function") {

                        g()

                    }

                }), 0)

            } else {

                e.write(d);

                if (typeof g == "function") {

                    g()

                }

            }

        }

    })

})();

(function() {

    com_tanx = window.com_tanx || {};

    com_tanx.acookie = com_tanx.acookie || {};

    com_tanx.acookie.exec = com_tanx.acookie.exec || (function(b) {

        if (!com_tanx.acookie.loaded) {

            com_tanx.acookie.loaded = true;

            if (b == "" || location.host.indexOf("www.taobao.com") < 0) {

                var c = document;

                var a = c.createElement("iframe");

                a.style.width = "0px";

                a.style.height = "0px";

                a.style.borderWidth = "0px";

                a.style.display = "none";

                a.marginWidth = 0;

                a.marginHeight = 0;

                a.frameBorder = 0;

                a.src = "http://cdn.tanx.com/t/acookie/acbeacon2.html";

                c.body.insertBefore(a, c.body.firstChild)

            }

        }

    })

})();

(function(a) {

    com_tanx = window.com_tanx || {};

    com_tanx.p = com_tanx.p || {};

    com_tanx.p[a] = (function(f, b, g, e) {

        var d = '';

        com_tanx.p.show(d, b, g, undefined, e)

    })

})("pic");

com_tanx.p["pic"](

/*![JDATA[*/

{

    "title": "\u9996\u98752\u7126_0405",

    "clickurl": "http:\/\/click.tanx.com\/tc?p=0&s=25571586&e=F%2BAuPQlMYxdrjDX7wGwymZlM0MAYTuI8dKmwAQi34m0Oh9fdER0IWBD12a1oTOowweJAa5JdKieV9VlnJ99DAhc7Qz1Cj5JdOxUMeEq5H%2BZwZV6suP7hXelFtt0cqOZONoZW9vMCZexZGBxwSN1Jy%2FZ8jzEJKh%2BpWhI0GERzLWqR9XadTwtWkyQLdM0dJzU%2Bgyg359Po%2FAzI1M5OWkmLCdQhzk1sATc9Urt5c2CJ%2FP9sJJ54tU%2Bv1gks2tOLeB%2FVQTyyquXQcLQj2VuvzEhvEAenVCBsqenT1u2j0fD1s0fM0sgU72Tnk964hwnZDqCDZ2MRptjw7ls%3D&ec=hQkhMXIb23Gsa%2Bxuhiu6HA%3D%3D&c=25886",

    "data": "http:\/\/i.mmcdn.cn\/simba\/img\/T1OQ46XgRXXXXXXXXX.jpg?noq=y",

    "pid": "mm_12852562_1778064_9118777",

    "width": "490",

    "height": "170",

    "adboardtype": "pic"

}

/*!]JDATA]*/

, document.getElementById("tanx-a-mm_12852562_1778064_9118777"));

try {

    com_tanx.acookie.exec('V4suBkp0/kYCAbhC5HTxn5WV')

} catch(err) {};

同时它在html中的中间几个li中调取对li设置overflow为hidden：



<ol style="-moz-transition-property: none; -moz-transition-duration: 500ms; -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); position: absolute; top: -170px;" class="tb-slide-list ks-switchable-content">

		<li data-resid="48" class="J_DirectPromo" id="J_DirectPromo_48"><a href="http://ju.atpanel.com/?url=http://www.taobao.com/market/sale/psmlh.php?ad_id=&am_id=&cm_id=1400431863f8f1acd614&pm_id=1500416502d159f67b28" target="_blank"><img src="http://img01.taobaocdn.com/tps/i1/T1ctN9XchoXXXXXXXX-490-170.jpg"></a></li>

												<li style="display: block;">

<script type="text/javascript">

document.write('<a style="display:none!important" id="tanx-a-mm_12852562_1778064_9118777"></a>');

tanx_s = document.createElement("script");

tanx_s.type = "text/javascript";

tanx_s.charset = "gbk";

tanx_s.id = "tanx-s-mm_12852562_1778064_9118777";

tanx_s.async = true;

tanx_s.src = "http://p.tanx.com/ex?i=mm_12852562_1778064_9118777";

document.getElementsByTagName("head")[0].appendChild(tanx_s);

</script><a target="_blank" href="http://click.tanx.com/tc?p=0&s=25596267&e=AUHPccU5M9jdwpsBsRsbOZXSbPBLdLUhSalPP0IEhvXE1mzGoEpO5wz9CLUYO8eYWN2SoJSPzjxo88Vgu38x7K%2FxUnZAztTeYwSamheryrG%2BD6yt4oWAYifIubkD%2FbcCB2qzzKNr1nYtNsgjlQ%2FZPFMKibWTN5v4tlNCDQD2XoIDMR7n6mlI8VkHqZAk1i4Lu3vbCNfIuNKxwdisGU8nB9NisMsM8AxIE8RAdvuMUS3i9y7IKheTrD%2BH4j7sRoOw36cZHFq2VZg0Ih2Lh%2B%2Bz4pJ4wBzQqOW0KC7M3OojnU00e23uQuQKWg%3D%3D&ec=m%2Bm4iUhcA6JSIPvtA1hCeQ%3D%3D&c=50573"><img width="490px" height="170px" border="0" src="http://i.mmcdn.cn/simba/img/T1DhX9XfNqXXXXXXXX.jpg?noq=y"></a><a id="tanx-a-mm_12852562_1778064_9118777" style="display:none!important"></a>

</li>

<li style="display: block;">

<script type="text/javascript">

document.write('<a style="display:none!important" id="tanx-a-mm_12852562_1778064_9118778"></a>');

tanx_s = document.createElement("script");

tanx_s.type = "text/javascript";

tanx_s.charset = "gbk";

tanx_s.id = "tanx-s-mm_12852562_1778064_9118778";

tanx_s.async = true;

tanx_s.src = "http://p.tanx.com/ex?i=mm_12852562_1778064_9118778";

document.getElementsByTagName("head")[0].appendChild(tanx_s);

</script><a id="tanx-a-mm_12852562_1778064_9118778" style="display:none!important"></a>

</li>

<li style="display: block;">

<script type="text/javascript">

document.write('<a style="display:none!important" id="tanx-a-mm_12852562_1778064_9118779"></a>');

tanx_s = document.createElement("script");

tanx_s.type = "text/javascript";

tanx_s.charset = "gbk";

tanx_s.id = "tanx-s-mm_12852562_1778064_9118779";

tanx_s.async = true;

tanx_s.src = "http://p.tanx.com/ex?i=mm_12852562_1778064_9118779";

document.getElementsByTagName("head")[0].appendChild(tanx_s);

</script><a target="_blank" href="http://click.tanx.com/tc?p=0&s=25604829&e=%2ByoWNbJzI0TdwpsBsRsbOZXSbPBLdLUhSalPP0IEhvXE1mzGoEpO59zl%2BACnGVhOtD6aGUW2hlofQpYddm8aoG9RP9p37ubNrno52m78aOqNFmX7qY8cKyfIubkD%2FbcCB2qzzKNr1nYtNsgjlQ%2FZPFMKibWTN5v4GJmKuOa%2FmYG6mhA4h6DF4UI54LFVVRqbu3vbCNfIuNKxwdisGU8nB9NisMsM8AxIE8RAdvuMUS3i9y7IKheTrD%2BH4j7sRoOw36cZHFq2VZg0Ih2Lh%2B%2Bz4pJ4wBzQqOW0KC7M3OojnU00e23uQuQKWg%3D%3D&ec=jobQZM%2F9MzwheBRNqOBArQ%3D%3D&c=59135"><img width="490px" height="170px" border="0" src="http://i.mmcdn.cn/simba/img/T1kxV9Xg8kXXXXXXXX.jpg?noq=y"></a><a id="tanx-a-mm_12852562_1778064_9118779" style="display:none!important"></a>

</li>

			<li data-resid="49" class="J_DirectPromo" id="J_DirectPromo_49" style="display: block;"><a href="http://ju.atpanel.com/?url=http://www.taobao.com/market/sale/xzcwsp.php?ad_id=&am_id=&cm_id=14004333734799becefe&pm_id=150041650342eec4d123" target="_blank"><img src="http://img01.taobaocdn.com/tps/i1/T1_.l8Xk4eXXXXXXXX-490-170.png"></a></li>

</ol>
...全文
210 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
渔舟唱晚， 2011-04-19
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 nx8823520 的回复:]

结贴了 过来接分吧
[/Quote]
籽沫 2011-04-19
  • 打赏
  • 举报
 回复
结贴了 过来接分吧
籽沫 2011-04-19
  • 打赏
  • 举报
 回复
接分都没人来都给你吧
籽沫 2011-04-15
  • 打赏
  • 举报
 回复
汗、、、这么的代码估计也没几个人愿意看，还是自己闲下来在研究吧
籽沫 2011-04-15
  • 打赏
  • 举报
 回复
最理不清的关键是 它怎么实现的不间断，实现起来其实很多方法只不过它在中级的li中clone内容第一个和最后一个不clone 这样怎么去实现的呢？？
这个问题我一直想不通，可能我方向错了，大家有时间的帮忙看看非常感谢
关于Mongodb的全面总结，学习mongodb的人，可以从这里开始！
和官方文档类似，介绍MongoDB的内部原理是少之又少，只有在附录的一个章节中介绍了相关内容。 对于大多数的MongoDB的用户来说，MongoDB就像是一个大黑盒，但是如果你能够了解到MongoDB内部一些构造的话，将有利...
MongoDB总结
和官方文档类似，介绍MongoDB的内部原理是少之又少，只有在附录的一个章节中介绍了相关内容。 对于大多数的MongoDB的用户来说，MongoDB就像是一个大黑盒，但是如果你能够了解到MongoDB内部一些构造的话，将有利于...
关于Mongodb的全面总结
和官方文档类似，介绍MongoDB的内部原理是少之又少，只有在附录的一个章节中介绍了相关内容。 对于大多数的MongoDB的用户来说，MongoDB就像是一个大黑盒，但是如果你能够了解到MongoDB内部一些构造的话，将有利于...
mongodb
和官方文档类似，介绍MongoDB的内部原理是少之又少，只有在附录的一个章节中介绍了相关内容。 对于大多数的MongoDB的用户来说，MongoDB就像是一个大黑盒，但是如果你能够了解到MongoDB内部一些构造的话，将有利于...
MongoDB全面总结
和官方文档类似，介绍MongoDB的内部原理是少之又少，只有在附录的一个章节中介绍了相关内容。 对于大多数的MongoDB的用户来说，MongoDB就像是一个大黑盒，但是如果你能够了解到MongoDB内部一些构造的话，将有利...
JavaScript

87,902

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章