注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

引用 新闻的滚动效果   

2015-06-22 10:18:26|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自天马hygj《新闻的滚动效果》
1。新闻显示的滚动效果
* {
    padding:0px; margin:0px;
    word-wrap:break-word;
    word-break:break-all;
}
a {
    color:#0287ca;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
ul, li {
    list-style:none;
}
img {
    border:none;
}
/*左侧样式*/
.content_left {
  background:#eee;
  border:1px solid #AAAAAA;
  width:200px;
  float:left;
  margin:200px;
  margin-right:10px;
}
.global_module {
    position:relative;
    background:#eeeeee;
    padding-bottom:8px;
    top: 2px;
    left: -1px;
}
.global_module h3 {
    height: 26px;
    background: #3b5998;
    color: #fff;
    line-height: 26px;
    text-indent: 6px;
    display: block;
    font-size: 1em;
}
.content_left .news ul {
    padding:5px 0 5px 15px;
}
.content_left .scrollNews {
    width:200px;
    height:85px;
    line-height:20px;
    overflow:hidden;
    background:#ffffff;
}
.content_left .scrollNews li {
    height:20px;
}
.module_up_down {
    position:absolute;
    top:9px;
    right:10px;
    cursor:pointer;
}
/* 产品分类样式*/
.procatalog .m-treeview {
    background:#ffffff;
}
.procatalog .m-treeview li span {
    cursor:pointer;
}
.procatalog .m-treeview li.m-expanded {
    padding-left:16px;
    background:url(第八章节例子/images/treeview-expanded.gif);
    background-repeat:no-repeat;
    background-position-x:0;
    background-position-y:0;
}
.procatalog .m-treeview li.m-expanded ul li {
   list-style-image: url('第八章节例子/images/treeview-item.gif');
}
.procatalog .m-treeview li.m-collapsed {
    padding-left:16px;
    background:url('第八章节例子/images/treeview-collapsed.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-collapsed ul{
    display:none;
}
.content_left .procatalog ul { 
padding:5px 0 5px 15px; 
}
2.脚本:
    <script type="text/javascript">
        //新闻滚动效果 
        $(function () {
            var $this = $(".scrollNews");
            var scrollTimer;
            $this.hover(
                function () { clearInterval(scrollTimer);},
                function () {
                    scrollTimer = setInterval(function () {
                        scrollNews($this);
                    },1000)
                }
                ).trigger("mouseleave");
        });
        function scrollNews(obj) {
            var $self = obj.find("ul:first");
            var lineHeight = $self.find("li:first").height();
            $self.animate({ "marginTop": -lineHeight + "px" }, 600, function () {
                $self.css("margin-top","0px").find("li:first").appendTo($self);
            });
        }
        //模块展开和关闭
        $(function () {
            $(".module_up_down").toggle(
                function () {
                    var $self = $(this);
                    $self.prev().slideToggle(600, function () {
                        $("img", $self).attr("src", "第八章节例子/images/up.gif");
                    })
                },
                function () {
                    var $self = $(this);
                    $self.prev().slideToggle(600, function () {
                        $("img", $self).attr("src", "第八章节例子/images/down.gif");
                    });
                }
                );
        });
    </script>
3.HTML
    <div class="content_left">
        <div class="global_module news">
            <h3>最新动态</h3>
            <div class="scrollNews">
                <ul>
                    <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                    <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                    <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                    <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                    <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                    <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                    <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                </ul>
            </div>
            <p class="module_up_down"><img src="第八章节例子/images/down.gif" /></p>
        </div>
        <div class="global_module procatalog">
<h3>产品分类</h3>
<ul class="m-treeview">
<li class="m-expanded">
<span>衬衫</span>
<ul>
<li><span>短袖衬衫</span></li>
<li><span>长袖衬衫</span></li>
</ul>
</li>
<li class="m-expanded">
<span>卫衣</span>
<ul>
<li ><span>开襟卫衣</span></li>
<li ><span>套头卫衣</span></li>
</ul>
</li>
<li class="m-expanded">
<span>裤子</span>
<ul>
<li><span>休闲裤</span></li>
<li><span>免烫卡其裤</span></li>
<li><span>牛仔裤</span></li>
<li><span>短裤</span></li>
</ul>
</li>
  </ul>
<p class="module_up_down"><img src="第八章节例子/images/down.gif" //></p>
</div>
    </div>
4.显示结果:新闻的滚动效果 - 天马hygj - Nothing新闻的滚动效果 - 天马hygj - Nothing
  评论这张
 
阅读(8)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018