`

文本轮滑效果

阅读更多

最近看到一个文本轮播效果,这里记录下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数据轮滑效果</title>
    <script type = "text/javascript" src="./jquery.min.js"></script>
    <style type="text/css">
        div,div
        {
            margin:0;
            padding:0
        }
        #scrollDiv
        {
            width:300px;
            height:25px;
            line-height:25px;
            border:#ccc 1px solid;
            overflow:hidden
        }
        #scrollDiv div
        {
            height:25px;
            padding-left:10px;
        }
    </style>
</head>
<body>
<div id="scrollDiv">
    <div>
        <div><a href='http://www.miiceic.org.cn/'>石家庄</a></div>
        <div><a href='http://www.ciitn.com/'>衡水</a></div>
        <div><a href="http://www.amboedu.com/">邯郸</a></div>
    </div>
</div>
<script>
    function AutoScroll(obj){
        $(obj).find("div:first").animate({
            marginTop:"-25px"
        },500,function(){
            $(this).css({marginTop:"0px"}).find("div:first").appendTo(this);
        });
    }
    $(document).ready(function(){
        setInterval('AutoScroll("#scrollDiv")',1000)
    });
</script>
</body>
</html>

 

 

分享到:
评论

相关推荐

    js图片轮滑效果

    JavaScript图片轮滑效果是一种常见的网页动态展示技术,用于在网页上展示一组图片并自动或手动进行切换,以创建出类似幻灯片的效果。这种效果在网站的首页、产品展示、相册等场景中广泛使用,可以提升用户体验,吸引...

    全屏图片轮播内容动感轮滑效果

    9. **SEO优化**:对于搜索引擎友好,每个轮播图片应包含适当的alt文本,以便搜索引擎理解图片内容。 10. **性能优化**:优化图片大小,使用适当的文件格式(如WebP或JPEG XR),以降低加载时间。同时,考虑使用预...

    图片轮滑类似淘宝广告

    【标题】:“图片轮滑类似淘宝广告” 在Android应用开发中,图片轮播是一种常见的功能,常用于展示广告、商品图或任何需要连续滚动的视觉元素。标题“图片轮滑类似淘宝广告”所指的是,开发者已经创建了一个类似于...

    轮滑素材

    【标题】:“轮滑素材”指的是与轮滑运动相关的图像、设计元素或图形资源,这些素材通常被用于创建与轮滑主题相关的网页广告、宣传海报、社交媒体内容等。轮滑,作为一种受欢迎的休闲运动和竞技项目,其素材往往包含...

    html+css轮滑式卡片

    例如,使用Flexbox实现轮滑效果: ```css .carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .card { flex: 0 0 auto; width: 300px; /* 调整为适应的宽度 */ margin-right: ...

    英语演讲轮滑PPT课件.pptx

    【轮滑历史】轮滑运动的起源可以追溯到18世纪的荷兰,由一位无名的荷兰人发明。...同时,利用多媒体技术进行教学,可以有效提升学习效果和参与度。在享受轮滑带来的乐趣时,安全始终是首要考虑的因素。

    轮滑技术晋级宝典-doc文件

    许多轮滑爱好者,苦于没有老师指导,经过很长一段时间的练习却没有多大进步。想学习一些看上去很简单、很漂亮的动作,却总是不得要领。而不断的挫折感甚至使得一些人黯然退出。 所以,为了使更多的人都更快地掌握...

    轮滑教练简历模板表格.doc

    "轮滑教练简历模板表格.doc" 本资源是关于轮滑教练的简历模板表格,旨在帮助轮滑教练和相关专业人士编写自己的简历。下面是对该资源的详细解释和知识点总结: 个人信息 在该简历模板中,个人信息部分包括姓名、...

    学校轮滑社团网页模板

    滑板、轮滑鞋、安全装备等图形可以作为设计元素,同时,动态效果如滑行动画能提升用户的互动体验。 5. **交互设计**:良好的交互设计可以提升用户满意度。例如,按钮反馈、悬停效果、滚动动画等都是提高用户体验的...

    非常炫的javascript图片效果

    在本主题中,我们将探讨“非常炫的JavaScript图片效果”,这是一个关于利用JavaScript实现的各种吸引人的图片展示特效的集合。 首先,让我们了解JavaScript在处理图片上的基本应用。JavaScript可以用来改变图片源...

    轮滑场管理系统设计与实现

    该系统是基于ASP.NET的信息管理系统,采用面向对象的设计方法,以.NET, ...系统主要用于轮滑场的信息管理,主要任务是用计算机对会员的购买消费等信息进行记载,对管理员管理的一些记载,并对这些信息进行日常管理。

    精品(2021-2022年)资料轮滑俱乐部STP分析.doc

    在这个关于轮滑俱乐部的STP分析中,我们可以深入理解重庆轮滑市场的潜力和特征。 1. 市场细分: - 地理要素:重庆作为西南交通枢纽,人口密集,经济发展迅速,吸引了大量外来人口,尤其年轻人,这为轮滑俱乐部提供...

    基于STM32的智能轮滑系统的硬件设计.pdf

    智能轮滑系统是一种利用现代数字技术来提升轮滑运动体验和安全性的技术系统。该系统使用STM32微控制器作为主控单元,集成GPS模块实现精确定位,通过GSM/GPRS模块进行无线数据传输,并通过自建服务器处理收集到的数据...

    网页设计,内还有常用图标文件,有轮滑,显示与隐藏,标签,输入框等基本效果的代码

    HTML的`&lt;input&gt;`标签有许多类型,如文本(`type="text"`)、密码(`type="password"`)、电子邮件(`type="email"`)等,每种类型都有其特定的用途和行为。JavaScript可以添加验证规则,确保用户输入的数据符合预期...

    轮滑比赛策划书.doc

    轮滑比赛策划书的核心是组织一场...通过以上知识点,我们可以看出,这次轮滑比赛策划书不仅关注比赛的组织和运行,还重视活动的宣传效果以及对参与者和观众的吸引力,旨在通过比赛推动轮滑运动在校园内的普及和发展。

    自定义城市选择轮滑

    1. **HTML5 & CSS3**:用于构建轮滑效果的界面,通过CSS3的transform和transition属性实现平滑的滚动动画效果。HTML5的data属性可以用来存储每个城市的相关数据。 2. **JavaScript**:编写交互逻辑,处理用户的点击...

    轮滑鞋开店策划.pptx

    【轮滑鞋开店策划】 这份策划案主要针对的是在柳州市柳石路广西商业学校附近开设一家名为“无语伦比滑轮店”的店铺,旨在为消费者提供单排轮滑和双排轮滑的销售及出租服务,同时倡导低碳出行的生活理念。策划案的...

    行业文档-设计装置-娱乐健身轮滑鞋.zip

    这些装备的设计也需要考虑舒适度和安全性,例如,护具的内衬应具有吸震效果。 2. 刹车系统:轮滑鞋的刹车片通常位于后轮,通过脚尖触碰来实现制动。先进的刹车系统可能会有更灵活的控制方式,如手刹或脚跟刹。 三...

    轮滑鞋保养常识

    ### 轮滑鞋保养常识知识点详析 #### 一、基本保养原则 - **避免恶劣环境**:切勿在草地、泥地上滑行,以免碎石磨损轮子,沙子进入轴承造成损坏。 - **防潮防锈**:下雨天避免外出滑行,以防水分导致轴承生锈。 - *...

    创新思维与方法之轮滑鞋的改进论文.doc

    这篇论文主要探讨了创新思维在改进轮滑鞋设计中的应用,提出了三个具体创新点:两用轮滑鞋、带动力轮滑鞋和冰刀轮滑鞋。这些创新旨在提升轮滑鞋的实用性和便利性,同时也关注了初学者的学习体验和安全性。 1. 两用...

Global site tag (gtag.js) - Google Analytics