图片从右至左滚动JS

前几天工作时遇到的一问题，不会写JS，请大猪来帮我写的，谢谢大猪了。
图片从右至左滚动JS代码：
1、直线滚动

var x =800
var y=300
var yp=35
var yn=0
var yin=true
var xin = true
var step = 1
var delay = 30
var obj=document.getElementById("ad")
function floatAD() {
var L=-obj.offsetWidth;
var R= document.body.clientWidth-obj.offsetWidth

obj.style.left = x + document.body.scrollLeft

x = x + step*(xin?1:-1)
if (x R){ xin = false; x = R}

var T=0
var B = document.body.clientHeight-obj.offsetHeight
obj.style.top =y+ yn+ document.body.scrollTop

if (yin){ yn=yn+1/Math.sin(1);}
else{yn=yn-1/Math.sin(1);}

if (yn >yp) { yin = false }
if (yn
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

2、波浪滚动

[X]

var x = 800
var y=300
var yp=35
var yn=0
var yin=true
var xin = true
var step = 1
var delay =20
var obj=document.getElementById("ad")
var itl
function CloseAD(){

clearInterval(itl);
obj.style.display="none";
}
function floatAD() {
var L=-obj.offsetWidth;
var R= document.body.clientWidth-obj.offsetWidth

obj.style.left = x + document.body.scrollLeft

x = x + step*(xin?1:-1)
if (x R){ xin = false; x = R}

var T=0

obj.style.top =y+ yn+ document.body.scrollTop
if (x%2==0){
if (yin){ yn=yn+1/Math.sin(1);}
else{yn=yn-1/Math.sin(1);}

if (yn >yp) { yin = false }
if (yn
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 图片从右至左滚动JS

    图片从右至左滚动JS

    前几天工作时遇到的一问题,不会写JS,请大猪来帮我写的,谢谢大猪了. 图片从右至左滚动JS代码: 1.直线滚动 var x =800 var y=300 var yp=35 var yn=0 var yin=true var xin = true var step = 1 var delay = 30 var obj=document.getElementById("ad") function floatAD() { var L=-obj.offsetWidth; var R= doc

  • js实现从右往左匀速显示图片（无缝轮播）

    本文实例为大家分享了js实现从右往左匀速显示图片的具体代码,供大家参考,具体内容如下 前言: 匀速显示图片,一般用于重复显示公司活动系列图片 背景图片: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .

  • JS实现图片的不间断连续滚动的简单实例

    js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

  • div+css布局的图片连续滚动js实现代码

    html布局代码 复制代码 代码如下: <!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> <meta http-

  • js实现从右向左缓缓浮出网页浮动层广告的方法

    本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法.分享给大家供大家参考.具体实现方法如下: <!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"&

  • JS实现浏览器状态栏文字从右向左弹出效果代码

    JS实现浏览器状态栏文字从右向左弹出效果代码

    本文实例讲述了JS实现浏览器状态栏文字从右向左弹出效果.分享给大家供大家参考,具体如下: 这里状态栏文字弹出代码,从右向左弹出,通过修改Script中的这些代码片段可改变效果: var POSITION = 100 var DELAY = 4 var MESSAGE = "这里是你想要的文字!" 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-scroll-codes/ 具体代码如下: <!DO

  • jQuery使用数组编写图片无缝向左滚动

    jQuery编程实现一组由8幅图组成的图片,进入网页初始时显示前面4张,然后自动向左滚动,直到屏幕显示的是后4张时停止滚动. 下面是jQuery代码: 复制代码 代码如下: $(document).ready(function() { var $images = $('#images img'); var imgs = $images.length; var next_img; for(var i=0;i<imgs;i++) { next_img=$images.eq(i); scroll(ne

  • Class Of Marquee Scroll通用不间断滚动JS封装类第1/2页

    制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-12-28 (Ver 1.65) 更新说明: + 加入功能 * 修正.完善     1.65.071228         * 横向.纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊设置)         * 彻底解决由于IE问题导致上下滚动页面留白的问题 (本次更新主要解决此问题,感谢天上的书生参与测试)     1.6.070131         + 禁止鼠标控制

  • 再次更新！MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

    再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6) /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-01-31 (Ver 1.6) 更新说明: + 加入功能 * 修正.完善        1.6.070131                +

  • 符合W3C Web标准的图片连续无间隙水平滚动

    这次又遇上一个这样的问题,找了老半天终于从网上找到一个不错的,看了下代码,思路很简单,但代码太多,通用性也不行,于是乎,自己又发明了两个函数,用起来感觉还真不错,与大家共享: 图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准_ //调用向左滚动 toleft("demo","demo1","demo2",30,"hehe123") //调用向右滚动 toright("demo0","

随机推荐