精华内容
下载资源
问答
  • 新闻滚动html

    2019-12-31 21:56:12
    标题 新闻滚动无缝连接切换-HTML css样式## /*新闻动态样式begin*/ .notice_active{ float: left; width: 100%; height: 42px; overflow: hidden; position: relative; box-sizing: border-box; white-...

    标题 新闻上滚动无缝连接切换-HTML

    css样式##

    /*新闻动态样式begin*/
    .notice_active{
    	float: left;
    	width: 100%;
    	height: 42px;
    	overflow: hidden;
    	position: relative;
    	box-sizing: border-box;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	background-color: rgb(229,245,252);
    	margin-top: 20px;
    }
    .notice_active>ul>li{
    	line-height: 42px;
    	display: flex;
    	align-items: center;
    	font-size: 16px;
    }
    .notice_active>ul>li>img{
    	width: 0.4rem;
    	margin-right: 0.2rem;
    }
    .tooLength{
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	display: block;
    }
    

    html模板

    <!--新闻动态begin-->
    <div class="notice_active">
    	<ul>
    		<li v-for="item,index in informationDynamicsList">
    			<span style="margin-left: 12px;width: 80px;">
    				<a style="color:#00a0e9;" href="/information/infodynamics-list">资讯动态:</a>
    			</span>
    			<span style="width: 84px;color:#939393;" v-html="item.infoPublishTime"></span>
    			<span style="margin:0 24px;width: 767px;">
    				<a class="tooLength" target="_blank" :href="'/information/information-detail?infoId='+item.id" style="color: #4a4a4a;" v-html="item.title"></a>
    			</span>
    			<span style="float: right;text-align: right;">
    				<a style="color:#00a0e9;text-decoration: underline;" href="/information/infodynamics-list">查看更多&gt;&gt;&gt;</a>
    			</span>
    		</li>
    	</ul>
    </div>
    <!--新闻动态end-->
    

    JS模块

    //新闻动态上下滚动
    //3.方法
    function t() {
    	var he = $(".notice_active>ul>li").height();//找到li高
    	$(".notice_active>ul").animate({
    			"marginTop": "-" + he
    		}, 500, function () {
    			$(".notice_active>ul").css({
    				"marginTop": 0
    			});
    			//二选一
    			//复制第一个到最后一个
    			$(".notice_active>ul>li").eq(0).appendTo($(".notice_active>ul")); 					      	
    			//复制第一个到最后一个(多个的情况)	
    			$(".notice_active_two>ul>li:eq(0),.notice_active_two>ul>li:eq(1),.notice_active_two>ul>li:eq(2)").appendTo($(".notice_active_two>ul")); 		
    	});
    }
    
    //4. 触发方法
    //新闻动态
    var time = setInterval(function () {
    	t();
    }, 5000) 
    
    展开全文
  • 用jQuery写新闻标题轮播图解读

    千次阅读 2018-03-21 11:37:53
    3.滚动新闻标题的内容其实是存在于列表中,竖着排列的,只是超出大盒子的部分被隐藏了(overfloe:hidden;),为了方便看出不同的效果,此处给每一个li设置了不同的背景颜色。4.轮播图的运动是基于绝对定...

    1.先构造轮播图的外部框架,写一个固定的盒子,为了方便查看效果,我给这个盒子添加了外边框属性(border)。

    2.在index.html文件中引入jQuery文件,将写好的css样式引入。

    3.滚动的新闻标题的内容其实是存在于列表中,竖着排列的,只是超出大盒子的部分被隐藏了(overfloe:hidden;),为了方便看出不同的效果,此处给每一个li设置了不同的背景颜色。

    4.轮播图的运动是基于绝对定位之上的,如果是上下滚动,变的是top的值;如果是左右滚动,变的是left的值。

    5.此时要考虑如果滚动到最后一个li时,如何让他从第一个开始继续轮播,且不出现闪动的状态呢?此时就是需要利用人的视觉差,比如本来需要展示的是4个标题,那么你就要写5个li,第五个li的内容与第一个一致。写一个全局变量,用来存放当前的li的序号,当这个全局变量的值等于最后一个li的数值时,让其等于1,同时将top值修改为0,这样内容就会从第一个开始,,且从视觉上来看是连续的轮播。

    6.每一次的运动的top值都是之前li的高度乘以需要隐藏的数量。用定时器控制自动轮播的时间。

    <script>
            $(function () {
                var c = 0;
                var timer = setInterval(function () {
                    c++;
                    if(c == 4){
                        $(".box ul").css({"top":'0px'});
                        c = 1;
                    };
                    var t = c*-35;
                    $(".box ul").stop().animate({'top':t+'px'},1000);
                },1000);
            });
    </script>

    7.也可以加上鼠标移入,滚动暂停,移出继续执行。

    $(".box ul").stop().mouseenter(function () {
    clearInterval(timer);
    });

    8.css样式如下:

    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 400px;
        height: 35px;
        position: relative;
        margin: 20px auto;
        border: 2px solid #4ecc0e;
        overflow: hidden;
    }
    .box ul {
        width: 400px;
        position: absolute;
        top: 0;
    }
    
    .box ul li {
        list-style: none;
        width: 400px;
        height: 35px;
        line-height: 35px;
        text-align: center;
     }

    9.页面布局如下:

    <body>
    <div class="box">
        <ul>
            <li style="background-color: #ffc9e6">毛毛很可爱</li>
            <li style="background-color: #93faba">萌萌哒</li>
            <li style="background-color: #f850fa">美美哒</li>
            <li style="background-color: #35dcff">酷酷滴</li>
            <li style="background-color: #ffc9e6">我很可爱</li>
            <li style="background-color: #ffc9e6">毛毛很可爱</li>
    
        </ul>
    </div>

    10.效果图:



    展开全文
  • css3+html5——新闻列表设计

    万次阅读 2018-06-11 19:10:55
    随便写了个仿腾讯新闻列表,主要是布局和标题栏的设计(不随页面滚动滚动)、当鼠标移动到图片上的时候实现图片的放大功能:大概效果如下: 代码如下:&lt;!DOCTYPE html&gt; &lt;html lang="en...

    仿腾讯新闻列表,主要是布局和标题栏的设计(不随页面滚动而滚动)、当鼠标移动到图片上的时候实现图片的放大功能:

    大概效果如下:

        

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新闻列表</title>
        <style type="text/css">
            *{
                margin: 0;
                padding:0;
            }
            .wrap{
                width: 600px;
                margin: 0px auto;
    
            }
            .menu{
                width: 600px;
                height: 30px;
                background: cornflowerblue;
                position: sticky;
                top:0px;
            }
            .menu ul li{
                float: left;
                list-style-type: none;
                padding: 0 40px;
            }
            .content ul li img:hover{
                transform: scale(1.2);/*当鼠标移动到图片上时实现放大功能*/
            }
            .content ul li{
                height: 100px;
                overflow: hidden;
                border-bottom: 1px solid lavender;
                background: white;
                list-style-type: none;
                transition-duration: 0.5s;
                margin: 10px 10px 5px 0;
    
            }
            .content ul li:hover{
                background-color: lavender;
                transition-duration: 0.5s;
            }
            .content .left{
                overflow: hidden;/*隐藏溢出图片内容*/
                transition-duration: 0.5s;
                width: 140px;
                height:80px;
                /*background: green;*/
                float: left;
                margin-right:20px;
            }
            .content .right{
                width:400px ;
                float: left;
                /*background: pink;*/
            }
            .right_top{
                height:60px;
            }
            .right_bottom{
                margin_top:50px;
            }
            .right_bottom_left span{
                color: darkgray;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="menu">
            <ul>
                <li>首页</li>
                <li>首页</li>
                <li>首页</li>
                <li>首页</li>
                <li>首页</li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li>
                    <div class="left"><img src="../img/new1.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
    
                <li>
                    <div class="left"><img src="../img/new2.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
    
                <li>
                    <div class="left"><img src="../img/new1.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
    
                <li>
                    <div class="left"><img src="../img/new1.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
    
                <li>
                    <div class="left"><img src="../img/new1.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
    
                <li>
                    <div class="left"><img src="../img/new1.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
    
                <li>
                    <div class="left"><img src="../img/new1.png" alt=""></div>
                    <div class="right">
                        <div class="right_top">
                            <h3>世界杯最强门卫+门锋!不耍两下你真以为我是门将?</h3>
                        </div>
                        <div class="right_bottom">
                            <div class="right_bottom_left">
                                <span>诺伊尔</span>  <span>世界杯</span>  <span>德国</span> <span>|</span> <span>7小时前</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </body>
    </html>

    展开全文
  • 1级标题<!– 1:空白空间的处理 white-space:; pre pre-wrap pre-line inherit 继承! nowrap 不让文本换行 2:溢出属性(控制内容溢出时候的显示方式): overflow属性: auto 当内容超出的时候有滚动...

    1级标题<!–

    1:空白空间的处理
        white-space:;
            pre
            pre-wrap
            pre-line
            inherit   继承!
            nowrap     不让文本换行
    2:溢出属性(控制内容溢出时候的显示方式):
        overflow属性:
            auto     当内容超出的时候有滚动条,没有超出的时候没有滚动条
            scroll   添加滚动条
            hidden   溢出隐藏!
            inherit   继承!        拓展:
            overflow-x : hidden;
            overflow-y : hidden;
    3:text-overflow:ellipsis/clip
        ellipsis 省略号显示
        clip    没有省略号
        --><!--  
    控制单行文本,溢出 省略号显示:
        1:white-space:nowrap;   不换行
        2:overflow:hidden;    溢出的内容隐藏。
        3:text-overflow:ellipsis  溢出的内容省略号显示
        4:容器要有宽度!!!
    
    展开全文
  • 13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17....
  • 13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17....
  • 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
  • 无缝文字滚动

    千次阅读 2013-11-22 10:38:56
    一个常见的无缝文字滚动,结合CSS构建的区域形成即时新闻列表,与常见滚动有所不同的是,我们增加了手动控制,即:如果文字滚动错过了想要看的文章标题,您可以按向上或向下的控制按钮进行返回操作。 文章源自:...
  • CSS命名规范

    2013-04-19 14:31:00
    main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小...
  • Html+Css命名规范

    2020-08-04 14:09:27
    标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角:corner 横幅广告: banner 子菜单: subMenu 搜索: search 搜索框: searchBox 登录: login 登录条:loginbar 工具条: toolbar...
  • id、css命名规范

    2019-10-08 14:41:46
    main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小...
  • 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.4.1 段落的水平对齐方式 3.4.2 段落的垂直对齐方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置...
  • 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
  • 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
  • 页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search...tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:n...
  • 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery...
  • 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery...
  • 有人说原生js写的有兼容问题,我在网上查了查,此类型的代码有很多(高手还是很多的),但是写的太复杂,最近正好在看《锋利的jquery》,书中有这样的例子,书中的例子是新闻标题向上无缝滚动,我发现稍微一改就能向...
  • 一、position:sticky (粘滞的) 1.简介 是 position:relation;和 position:fixed ;的结合体. 表现为 当有一个元素设置了 position:sticky的时候,这个元素...一般适合用于新闻资讯类,有标题的部分可以粘滞在边缘,内...
  • 页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动...tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:ne
  • header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:...

空空如也

空空如也

1 2 3 4
收藏数 76
精华内容 30
关键字:

新闻标题滚动css