逐行新闻滚动效果

最新推荐文章于 2022-09-27 11:11:52 发布
最新推荐文章于 2022-09-27 11:11:52 发布
阅读量56 收藏
点赞数
文章标签： javascript xhtml shell ViewUI
原文链接：http://www.cnblogs.com/umgsai/p/3908178.html
版权 
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>非常不错的逐行新闻滚动效果</title> 
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312"> 
  6. <!--把下面代码加到<head>与</head>之间--> 
  7. <style type="text/css"> 
  8. a{ 
  9.  display:block; 
  10.  font-size:12px; 
  11.  line-height:18px; 
  12.  text-decoration:none; 
  13.  color:#333; 
  14.  font-family:Arial; 
  15. } 
  16. .shell{ 
  17.  background:url(http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081209192557.gif) no-repeat 4px 5px; 
  18.  border:1px solid #aaa; 
  19.  width:400px; 
  20.  padding:3px 2px 2px 20px; 
  21. } 
  22. #div1{ 
  23.  height:18px; 
  24.  overflow:hidden; 
  25. } 
  26. </style> 
  27. </head> 
  28. <body> 
  29. <!--把下面代码加到<body>与</body>之间--> 
  30. <div class="shell"> 
  31.   <div id="div1"> 
  32.     <a href="javascript:">请教高手帮我看下这段代码：FLASH显示不了</a> 
  33.     <a href="javascript:">请教在UTF-8编辑下的符号显示问题</a> 
  34.     <a href="javascript:">jquery做的一个滑动效果，不知如何增加延迟，现在太灵敏了</a> 
  35.     <a href="javascript:">技术研究：QQ2009版按钮渐显渐隐的由来</a> 
  36.     <a href="javascript:">Javascript读取Json数据并分页显示，支持键盘和滚轮翻页</a> 
  37.     <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a> 
  38.     <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件</a> 
  39.   </div>  
  40. </div> 
  41. <script language="javascript"> 
  42. var box=document.getElementById("div1"),can=true; 
  43. box.innerHTML+=box.innerHTML; 
  44. box.onmouseover=function(){can=false}; 
  45. box.onmouseout=function(){can=true}; 
  46. new function (){ 
  47.  var stop=box.scrollTop%18==0&&!can; 
  48.  if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++; 
  49.  setTimeout(arguments.callee,box.scrollTop%18?10:1500); 
  50. }; 
  51. </script> 
  52. </body> 
  53. </html> 
 
 
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/umgsai/p/3908178.html

                

        

        




    




    

      

        

            

              
                
                  G19931112
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
单条新闻滚动效果

				
			

			

				

					diandian82的专栏
				

				

					03-28
					
					1472
					
				

			

		

		

			
				
Jquery 代码部分：var n = 0;        function ShowNews() {            var $firstNode = $(#ulNews>li);                if (n == 0) {                    $firstNode.eq($firstNode.length - 1).fadeOut(

			
		

	



                

              
                



	

		

			

				
					
js实现新闻列表连续的滚动效果

				
			

			

				

					08-26
				

			

		

		

			
				
通过js实现的新闻列表的滚动效果 效果为连续滚动

			
		

	



                


  
              

                


	

		

			

				
					
新闻滚动效果

				
			

			

				

					dengweihuan4949的博客
				

				

					03-24
					
					156
					
				

			

		

		

			
				
今天给大家分享一个新闻滚动的效果 具体代码如下
task1
HTML结构

 1 <div class="box">
 2         <div class="count1">
 3             <p>1号标题</p>
 4             <p>2号标题</p>
 5   ...

			
		

	





	

		

			

				
					
jQuery文字逐行向上滚动代码.zip

				
			

			

				

					07-05
				

			

		

		

			
				
jQuery文字逐行向上滚动代码是一种常见的网页动态效果，它能够使文本内容以逐行上升的方式展示，常用于新闻更新、公告栏或者滚动广告等场景，为网页增添动态视觉效果，吸引用户注意力。在这个"jQuery文字逐行向上...

			
		

	



		

			
		



	

		

			

				
					
JS实用的带停顿的逐行文本循环滚动效果实例

				
			

			

				

					11-28
				

			

		

		

			
				
总结来说，这个实例通过JavaScript实现了一个带停顿的逐行文本循环滚动效果，利用了DOM操作、定时器和条件判断，提供了用户交互功能，如鼠标悬停暂停和离开后继续滚动。通过调整不同的参数，可以定制滚动速度、停顿...

			
		

	





	

		

			

				
					
jQuery文字逐行向上滚动特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
然后，编写jQuery代码来实现滚动效果。首先选择要滚动的文字元素，例如`$("#scrollingText")`，接着定义一个动画函数，使用`.animate()`方法。在这个函数中，你可以设置CSS的`top`属性，让它随着时间逐渐减小，模拟...

			
		

	





	

		

			

				
					
逐行向上滚动 js 代码

				
			

			

				

					08-30
				

			

		

		

			
				
这个功能常用于创建动态的文本展示效果，比如新闻滚动条或者公告栏。以下将详细介绍如何实现这一功能。  首先，我们需要一个HTML结构来存放滚动的文本，例如：  ```html   第一行文本  第二行文本  <!-- 更多行 --> ...

			
		

	





	

		

			

				
					
新闻滚动效果JQuery实现

				
			

			

				

					weixin_30915275的博客
				

				

					04-19
					
					96
					
				

			

		

		

			
				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<...

			
		

	





	

		

			

				
					
上下不间断轮播的新闻滚动效果代码

				
			

			

				

					09-22
				

			

		

		

			
				
2种方式实现：上下不间断轮播的新闻滚动效果代码。
<br/>1.原生js实现方式;
<br/>2.jquery实现方式;

			
		

	





	

		

			

				
					
jQuery实现列表自动滚动循环滚动展示新闻

				
			

			

				

					10-25
				

			

		

		

			
				
jQuery实现列表自动滚动循环滚动展示新闻，鼠标悬停时停止滚动并提示，离开后，继续滚动，实现的代码如下，需要的朋友可以看看

			
		

	





	

		

			

				
					
一个文字消息滚动效果

				
			

			

				

					工作札记
				

				

					09-05
					
					1407
					
				

			

		

		

			
				
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;js实现消息滚动效果&lt;/title&gt;
&lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&am

			
		

	





	

		

			

				
					
jquery之（新闻单条滚动）

				
			

			

				

					node的专栏
				

				

					10-10
					
					1526
					
				

			

		

		

			
				
新闻滚动


    function scroll_news(){
        var firstNode = $('#message_list li'); 
        firstNode.eq(0).fadeOut('slow',function(){
         $(this).clone().appendTo($(this).parent()).show('sl

			
		

	





	

		

			

				
					
新闻单条无缝间歇向上滚动（第一次分享）

				
			

			

				

					weixin_34362875的博客
				

				

					12-20
					
					305
					
				

			

		

		

			
				
写此文背景： 在通过goole/百度搜索之后，实现此效果的示例确实很多，但是拿到自己项目中，就是太适用（可能滚着滚着滚偏了），因此琢磨了好久，写了该组件，肯定也有各种问题，所以分享出来让大家路过的顺便提一嘴，我好改之...
/**
 * desc: 单条向上无缝滚动
 */
import Vue from "vue";

Vue.directive('newscroll', {

    bind...

			
		

	





	

		

			

				
					
vue2 /vue3，vue3-seamless-scroll实现新闻滚动效果，无缝跑马灯，鼠标悬停暂停，离开继续滚动效果

				
			

			

				

					hui_54520的博客
				

				

					09-27
					
					9124
					
				

			

		

		

			
				
vue 通过vueSeamlessScroll实现新闻滚动效果，无缝跑马灯，鼠标悬停暂停，离开继续滚动效果

			
		

	





	

		

			

				
					
React 原生实现新闻播报上下滚动效果

				
			

			

				

					weixin_33682719的博客
				

				

					06-05
					
					6973
					
				

			

		

		

			
				
使用react实现新闻滚动播放效果，消息向上滚动

CSS核心样式

.cosultation-wrap {
  // line-height: .17rem;
  background-color: white;
  border-top: 1px solid #e5e5e5;
  a {
    height: .32rem;
    display: flex;
    align-item...

			
		

	





	

		

			

				
					
Vue实战篇三十二：实现新闻的无限加载

				
			

			

				

					我的博客
				

				

					07-20
					
					1360
					
				

			

		

		

			
				
1、在新闻列表中引入无限滚动加载功能，并关联自动加载方法。3、向接口获取数据成功后，重新渲染新闻列表。2、在底部放入加载条，显示。

			
		

	





	

		

			

				
					
php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能

				
			

			

				

					weixin_39657444的博客
				

				

					04-14
					
					176
					
				

			

		

		

			
				
这次给大家带来jQuery实现滚动图片淡入淡出功能，jQuery实现滚动图片淡入淡出的注意事项有哪些，下面就是实战案例，一起来看一下。下面是上下滚动源码向上滚动代码带上下翻按钮滚动特效body{ color:#333; font-size:13px;}h3,ul,li{margin:0;padding:0; list-style:none;}.scrollbox{ width: 340px; ma...

			
		

	





	

		

			

				
					
css文字逐行出来的效果

					
最新发布

				
			

			

				

					06-08
				

			

		

		

			
				
要实现CSS文字逐行出现的效果，可以借助CSS的animation和@keyframes属性，以下是一个简单的例子：

```html
<p class="typewriter">Hello World!</p>
```

```css
.typewriter{
  overflow: hidden; /* 隐藏文字内容 */
  border-right: .15em solid orange; /* 光标闪烁 */
  white-space: nowrap; /* 不换行 */
  font-size: 30px; /* 字体大小 */
  letter-spacing: .15em; /* 字母间距 */
  animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite; /* 逐字出现和光标闪烁 */
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}
```

在上面的代码中，我们定义了一个名为"typewriter"的类，通过设置overflow:hidden属性，将文字内容隐藏起来。接着，我们使用border-right属性模拟光标闪烁的效果，并设置white-space属性为nowrap，保证文字不会换行。我们还设置了字体大小和字母间距等样式。

最关键的部分是定义逐行出现的动画效果。我们通过animation属性将两个关键帧动画"typing"和"blink-caret"应用到.typewriter类上。其中，"typing"动画通过控制宽度从0到100%的变化来实现逐行出现的效果。"blink-caret"动画则控制光标的颜色在透明和橙色之间切换，模拟光标闪烁的效果。

通过这种方式，文字就会在页面加载后逐行出现，并伴随着光标闪烁的效果。您可以通过修改动画效果的属性值来实现不同的效果。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值