专栏首页我分享我快乐无缝滚动案例简单实现代码

无缝滚动案例简单实现代码

<!doctype html>

<html>

<meta charset="utf-8">

<head>

<title></title>

<style>

.show{width:200px;overflow: hidden;}

.box{width:400px;height:100px;position:relative;}

.box div{float:left;width:100px;height: 100px;background-color: red;}

</style>

<script src="jquery.js"></script>

</head>

<body>

<div class="show">

<div class="box">

<div style="background-color:red;">1</div>

<div style="background-color:green;">2</div>

<div style="background-color:red;">1</div>

<div style="background-color:green;">2</div>

</div>

</div>

<script>

function m(){

$(".box").animate({left:-200},2000,"linear",function(){

$(".box").css({left:0})

setTimeout(m,0)

})

}

m()

</script>

</body>

</html>

本文分享自微信公众号 - 我分享我快乐(duan_uid),作者:段惠勇

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-09-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • 网页设计师面试题与答案1

    今天有个学生发了一个公司的面试题,发给大家思考一下。 文件夹中有两个文件如下: ? 图片文件squares.png显示如下 ? 文件assignment...

    用户1730674
  • 网页设计师面试题与答案2

    请同学们认真思考后,参考如下答案,多加练习: <html> <!-- Problem 1: Using the image provided (squares...

    用户1730674
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • HTML规范 - 整体结构

    小白程序猿
  • 用CSS画小猪佩奇

    腾讯NEXT学位

扫码关注云+社区

领取腾讯云代金券