侧边广告下拉效果
侧边广告下拉效果
演示地址：http://www.17sucai.com/preview/229618/2015-03-27/%E6%89%8B%E6%9C%BA%E6%BB%91%E5%8A%A8/demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>手机</title> <style> * { padding: 0px; margin: 0px; } .buttomtitle { width: 280px; height: 50px; background: url(../images/toptitle.png) no-repeat; background-position: bottom; background-position: left; } /* accordion_container */ .accordion_container { margin: 0 auto; width: 280px; } .accordion_container .content, .accordion_container .tab { width: 260px; } .accordion_container .tab { background: #fafafa; height: 30px; float: left; } .accordion_container .tab a:hover { color: #F00; text-decoration: underline; } .accordion_container .tab a { color: #4B7196; text-decoration: none; } a { color: inherit } .accordion_container .tab span { float: left; margin-top: 10px; } .accordion_container .tab strong { margin-left: 15px; float: left; margin-top: 10px; } .accordion_container .tab { padding: 10px; } .accordion_container .content { width: 280px; height: 120px; width: 280px; } .accordion_container .content img { display: block; width: 100px; height: 100px; float: left; margin: 10px; } .accordion_container .first { z-index: 5; top: 0px; } .accordion_container .second { z-index: 4; top: 49px; } .accordion_container .third { z-index: 3; top: 98px; } .accordion_container .four { z-index: 2; top: 147px; } .accordion_container .file { z-index: 1; top: 196px; } .accordion { position: relative; overflow: hidden; height: 400px; } .accordion > div { position: absolute; left: 0px; border-left: 1px solid #aaa; border-right: 1px solid #aaa; left: -1px; cursor: pointer; background-color: #FFF; width: 280px; } .hide { } .word { width: 130px; height: 80px; float: right; margin-top: 25px; margin-right: 20px; text-decoration: none; } .word p a { color: #4B7196; line-height: 20px; text-decoration: none; } .word p a:hover { color: #F00; text-decoration: none; } </style> <script type="text/javascript" src="js/jquery.min.js"> </script> <script> (function ($) { $.fn.jaccordion = function () { $(this).each(function () { var c = $(this).children().length; var d = Array(c - 1); var e = Array(c - 1); $(this).children().each(function (a) { if (a == (c - 1))return; e[a] = $(this).position().top; d[a] = $(this).position().top - $(this).children().outerHeight() }); var f = this; $(this).children().mouseenter(function () { var a = $(f).children().index(this); var b = $(f).children().index($(f).children('[class~="current"]')); if (!$(this).hasClass('current')) { if (b > a) { for (var i = b - 1; i >= a; i--) { $($(f).children().get(i)).stop(false, false); to_top = e[i] + 'px'; $($(f).children().get(i)).animate({top: to_top}) } } else if (b < a) { for (var i = b; i < a; i++) { $($(f).children().get(i)).stop(false, false); to_top = d[i] + 'px'; $($(f).children().get(i)).animate({top: to_top}) } } $(f).children().removeClass('current'); $(this).addClass('current') } }) }) } })(jQuery); </script> </head> <body> <div class="accordion_container"> <div class="buttomtitle"></div> <div class="accordion"> <div class="first current"> <div class="content"><img src="images/shouji_buttom1.jpg"/> <div class="word"><p>价格：<em style="color:#F00;"><strong>￥6088</strong></em></p><br/> <p><a href="#">国强宏利机吾大世</a></p></div> </div> <div class="tab"><span><img src="images/tea1.jpg"/></span> <strong><a href="#" target="_blank">苹果 iPhone 6 Plus</a></strong></div> </div> <div class="second"> <div class="content second"><a href="#" target="_blank"><img src="images/shouji_buttom2.jpg"/></a> <div class="word"><p>价格：<em style="color:#F00;"><strong>￥2999</strong></em></p><br/> <p><a href="#">盛旺鸿运电脑经营</a></p></div> </div> <div class="tab"><span><img src="images/tea2.jpg"/></span> <strong><a href="#" target="_blank">OPPO R5</a></strong></div> </div> <div class="third"> <div class="content third"><a href="#" target="_blank"><img src="images/shouji_buttom3.jpg"/></a> <div class="word"><p>价格：<em style="color:#F00;"><strong>￥4999</strong></em></p><br/> <p><a href="#">八一数码手机专营</a></p></div> </div> <div class="tab"><span><img src="images/tea3.jpg"/></span> <strong><a href="#" target="_blank">索尼Xperia Z3</a></strong></div> </div> <div class="four"> <div class="content four"><a href="#" target="_blank"><img src="images/shouji_buttom4.jpg"/></a> <div class="word"><p>价格：<em style="color:#F00;"><strong>￥5399</strong></em></p><br/> <p><a href="#">八一数码手机专营</a></p></div> </div> <div class="tab"><span><img src="images/tea4.jpg"/></span> <strong><a href="#" target="_blank">三星GALAXY Note4</a></strong></div> </div> <div class="file"> <div class="content file"><a href="#" target="_blank"><img src="images/shouji_buttom5.jpg"/></a> <div class="word"><p>价格：<em style="color:#F00;"><strong>￥999</strong></em></p><br/> <p><a href="#">宏达手机旗舰店</a></p></div> </div> <div class="tab"><span><img src="images/tea5.jpg"/></span> <strong><a href="#" target="_blank">中兴V5 Max</a></strong> </div> </div> </div> </div> </div> </body> </html>
