位置: 编程技术 - 正文

js实现图片无缝滚动特效(js设置图片边框)

编辑:rootadmin

推荐整理分享js实现图片无缝滚动特效(js设置图片边框),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js实现图片无缝拼接,js实现图片无缝滚动,html图片无缝滚动代码怎样写,js实现图片无缝拼接,js实现图片无缝滚动,js实现图片无缝连接,js实现图片无缝连接,js实现图片无缝滚动,内容如对您有帮助,希望把文章链接给更多的朋友!

首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。

  JS中的创建定时器的方法包括两种:setTimeout和setInterval。首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数。它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInterval是setTimeout的循环版。

  关于定时器还有一个用法:消除定时器,方法同样有两种:clearTimeout 和 clearInterval,它们分别对应不同类型的定时器。另外,它们都只接收一个参数,这个参数是定时器返回的一个值(我在chrome中调试发现这个返回值都是数字),用于指定消除那个定时器。

  定时器的知识掌握之后,就开始分析怎样使用定时器让元素动起来。其实这个很简单,就是类似电影的原理一样,让元素在很短的时间内发生连续的位移,我们看起来的话这个元素就想是在不停地运动啦。关于怎么让元素产生位移,通过JS修改元素的样式就可以实现,例如

  上面的代码中speed就是每次产生的位移。关于speed使用还挺有意思的:我们可以修改speed的正负值来修改滚动的方向。

  另外,关于元素的属性 offsetLeft 我个人认为需要注意两点:offsetLeft的值由它自己通过定位的left和自己设定的margin的和、offsetLeft它是相对于它的包含层的距离(offsetTop类似)。当然这都是我自己的理解,肯定不是很准确,这个坑记着,下次专门解决它。

js实现图片无缝滚动特效(js设置图片边框)

  让元素动起来的原理基本就是这样,下面开始分析这个无缝滚动展示图片的实现方法,我举得例子都是向左滚动的,向右的原理一样,代码中有提到:

  首先假设需要循环滚动的图片只有4张,为了满足图片滚动起来有循环的要求,就需要把图片如图(1)这样做:

  这样当第一张图片1滚动出边框时,后面的图片1则出现在图片4的后面,这样效果看起来就和循环一样~

  当图片滚动到下面的这种情况时:

  继续滚动就会导致图片后面出现空白,就不是循环滚动的效果了,其实这点也是程序的关键所在,每当图片滚动到图(2)这种情况时,就应该让图片重新回到图(1)那种状态再继续滚动,这样的话就形成了无缝循环滚动的效果。

  另外拓展一下程序写了鼠标移入图片停止滚动,移出继续滚动的效果,就是利用消除定时器的方法实现的,代码很简单就不介绍了。还有我为了样式好看一点,把图片都设置为*的尺寸使用的,大家运行代码是需要自己准备图片。

代码如下:

标签: js设置图片边框

本文链接地址:https://www.jiuchutong.com/biancheng/383743.html 转载请保留说明!

上一篇:学习JavaScript设计模式之迭代器模式(javascript学习指南)

下一篇:JavaScript优化专题之Loading and Execution加载和运行(js优化108条建议)

  • 房产税计入管理费用了,汇算清缴怎么调
  • 计提应交个人所得税分录怎么做
  • 企业合并怎么处理
  • 企业所得税纳税人
  • 京东公户的钱怎么转出来
  • 生产用天然气如何入账
  • 咨询服务费预收率怎么算
  • 员工事假扣工资怎么做账
  • 个体户每个月开10万会查吗
  • 产品成本核算时做好哪些基础工作
  • 固定资产的折旧费用计入什么科目
  • 教育费附加计费单位
  • 收到银行退回的银行汇票多余款
  • 物业签订的合同
  • 商品销售税金及附加会计分录
  • 职工教育法
  • 序列号不可用怎么办
  • 生产要素和资源的区别和联系
  • 扣收贷款本息
  • 审计资产评估收费标准
  • 对方公司已注销,我公司应付款怎样支付
  • 餐饮发票忘记作废也没冲红怎么处理?
  • 预付股权转让款如何处理
  • 支付个人利息没有取得发票
  • 上月未结账
  • 转让金融商品应交增值税计算公式
  • 电脑经常重新启动是什么原因
  • win10系统如何禁用驱动强制签名
  • 2021激活windows10
  • nvm是啥
  • daio.dll 病毒
  • vue2.0解决跨域问题
  • 收到服务费发票怎么做账务处理
  • 应交增值税专栏下的增值税项目有哪些?
  • php实现上传文件
  • mac m1 rosetta编译
  • 企业应交税费科目
  • css 单行显示
  • 小程序开发必备的东西有哪些
  • 推荐国内免费使用的电影
  • 应收账款占用资金的应计利息变动额
  • 公司变更需要哪些资料~问华杰 财务
  • 毕业设计2022年幼儿园
  • 研发的无形资产
  • 当天的电子发票怎么开
  • 怎么升级一般纳税人
  • 代扣代缴个人所得税账务处理
  • curl抓包
  • 招待费专票不可以抵扣
  • 现代服务业进项抵扣新政策
  • 工程项目买保险没有合同 情况说明怎么写
  • 购货方发生退货的会计分录
  • 转让无形资产的收入应计入什么科目
  • 固定资产资本化后续支出
  • 税控维护费减免税款
  • 加计扣除10%进项税政策文件
  • 年底应交增值税是没有余额吗
  • 固定资产报废会计
  • 汽车行业的财务会计
  • 对公账户进出账常识
  • 会计账簿的种类包括总账明细账日记账和其他辅助性账簿
  • 什么是盈余公积和资本公积的区别
  • 不同数据库之间的数据一同传递
  • centos7权限管理
  • window7主题变成xp了
  • linux dfs
  • w10系统怎么压缩
  • 怎么恢复手机桌面时间和日期
  • jquery直接执行
  • android集成chromiumview
  • unityxlua热更新方案
  • android应用结构包括哪些
  • python中的is和==的区别
  • node ffi
  • 交错了税可以退吗
  • 单位个人所得税网上申报流程
  • 增值税和消费税申报对比不符怎么处理
  • 1国家税务总局
  • 最常见的财税知识
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设