<!Doctype> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{margin:0;padding:0;} .news-wrap {position: relative;padding: .16rem .34rem;background: #ccc} .news{position: relative;background: #fff;border-radius: 1rem} .news .text{position: absolute;left:.2rem;top:0;font-size: .26rem;color: #000;line-height: .6rem} .news .text span{margin: 0 .1rem 0 .06rem;padding: .06rem .1rem;font-size: .2rem;color: #fff;border-radius: .1rem;vertical-align: top;background: #ec2829} .news .text em{font-size: .2rem;color: #f76288;vertical-align: top} .news .more{position: absolute;right:.2rem;top:.16rem;padding-left: .16rem;font-size: .26rem;color: #000;line-height: .26rem;border-left:1px solid #9e9e9e;} .news .wrap{position: relative;padding: 0 1rem 0 2.2rem; height:.6rem; overflow:hidden;} .news ul { position: absolute;top:0;left: 2.2rem;right:1rem} .news .wrap li{padding: 0; display: inline-block; width: 100%; text-align: left;height:.6rem;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;} .news li a{display: inline-block;width: 100%;font-size: .26rem;color: #000;line-height: .6rem;text-decoration: none} </style> <script> setWordSize(); window.onresize = function () { setWordSize(); }; function setWordSize() { var oHtml = document.getElementsByTagName("html")[0]; var iWidth = document.documentElement.clientWidth; iWidth = iWidth > 750 ? 750 : iWidth; oHtml.style.fontSize = iWidth / 7.5 + "px"; } </script> </head> <body> <div class="news-wrap"> <div class="news"> <div class="text">电商 <span>快报</span> <em>抢</em></div> <div class="wrap" id="scroll-news"> <ul> <li><a href="javascript:;">仅24小时！十一爆品特辑，家电购。。。</a></li> <li><a href="javascript:;">优惠啦优惠啦。。。</a></li> <li><a href="javascript:;">好消息好消息。。。</a></li> </ul> </div> <a class="more" href="javascript:;">更多</a> </div> </div> <script src="js/jquery.min.js" type="text/javascript"></script> <script> // 妙味官网：www.miaov.com // 技术交流：bbs.miaov.com $.extend(jQuery.easing,{ easeIn: function(x,t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, easeOut: function(x,t, b, c, d){ //减速曲线 return -c *(t/=d)*(t-2) + b; }, easeBoth: function(x,t, b, c, d){ //加速减速曲线 if ((t/=d/2) < 1) { return c/2*t*t + b; } return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInStrong: function(x,t, b, c, d){ //加加速曲线 return c*(t/=d)*t*t*t + b; }, easeOutStrong: function(x,t, b, c, d){ //减减速曲线 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeBothStrong: function(x,t, b, c, d){ //加加速减减速曲线 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; } return -c/2 * ((t-=2)*t*t*t - 2) + b; }, elasticIn: function(x,t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, elasticOut: function(x,t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, elasticBoth: function(x,t, b, c, d, a, p){ if (t === 0) { return b; } if ( (t /= d/2) == 2 ) { return b+c; } if (!p) { p = d*(0.3*1.5); } if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; }, backIn: function(x,t, b, c, d, s){ //回退加速（回退渐入） if (typeof s == 'undefined') { s = 1.70158; } return c*(t/=d)*t*((s+1)*t - s) + b; }, backOut: function(x,t, b, c, d, s){ if (typeof s == 'undefined') { s = 3.70158; //回缩的距离 } return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, backBoth: function(x,t, b, c, d, s){ if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d/2 ) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; } return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, bounceIn: function(x,t, b, c, d){ //弹球减振（弹球渐出） return c - this['bounceOut'](x,d-t, 0, c, d) + b; }, bounceOut: function(x,t, b, c, d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; } return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, bounceBoth: function(x,t, b, c, d){ if (t < d/2) { return this['bounceIn'](x,t*2, 0, c, d) * 0.5 + b; } return this['bounceOut'](x,t*2-d, 0, c, d) * 0.5 + c*0.5 + b; } }); setInterval('AutoScroll("#scroll-news")', 1500); function AutoScroll(obj) { $(obj).find("ul:first").animate({ marginTop: "-48px" }, 2200, 'elasticOut', function() { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }); } </script> </body> </html>
