<div id="con"> 
  <ul> 
    <li> <a href="#" class="face"><img src="/UploadFiles/2021-04-02/1">

CSS


我们用CSS来美化页面布局，以下是数据滚动区的CSS代码，当然大家可以修改css定制不同的外观效果。




ul,li{ list-style-type:none;} 
#con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative; 
border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;} 
#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} 
#con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; } 
#con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;} 
#con ul li h4{height:22px; line-height:22px; margin-left:60px} 
#con ul li p{ margin-left:60px;line-height:22px; } 



jQuery


原理：我们定义一个滚动函数scrtime()，当鼠标滑向滚动区域时，停止滚动（即清除scrtime），当鼠标离开时继续滚动，滚动scrtime()的过程中，让最后的li元素定时插入第一个li元素的上方，采用animate方法来改变li的高度和透明效果，实现动画加载效果，然后定时每隔3秒钟执行一次滚动。




$(function(){ 
  var scrtime; 
  $("#con").hover(function(){ 
     clearInterval(scrtime);//停止滚动 
  },function(){ 
    scrtime = setInterval(function(){ 
        var ul = $("#con ul"); 
        var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度 
        ul.animate({marginTop : liHeight+40 +"px"},1000,function(){ 
          ul.find("li:last").prependTo(ul) 
          ul.find("li:first").hide(); 
          ul.css({marginTop:0}); 
          ul.find("li:first").fadeIn(1000); 
        });     
    },3000); 
   }).trigger("mouseleave"); 
}); 



以上代码实现了一个内容持续向下滚动的效果，每隔3秒内容将从上部淡入，完成内容滚动效果。


补充


关于图片自动圆角处理，我们可以使用jquery.corner.js这个插件，使用灵活，兼容各浏览器，这个插件下载包里已经为您准备好了。当然你也可以使用css3来控制圆角。
以上所述就是本文的全部内容了，希望大家能够喜欢。