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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
www.cxybl.com</title>
</head>
<body>
<div id="colees" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1s">
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
</div>
<div id="colee2s"></div>
</div>
<script>
var speeds=30;
var colee2s=document.getElementById("colee2s");
var colee1s=document.getElementById("colee1s");
var colees=document.getElementById("colees");
colee2s.innerHTML=colee1s.innerHTML; //克隆colee1为colee2
function Marquee1s(){
//当滚动至colee1与colee2交界时
if(colee2s.offsetTop-colees.scrollTop<=0){
colees.scrollTop-=colee1s.offsetHeight; //colee跳到最顶端
}else{
colees.scrollTop++
}
}
var MyMar1s=setInterval(Marquee1s,speeds)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colees.onmouseover=function() {clearInterval(MyMar1s)}
//鼠标移开时重设定时器
colees.onmouseout=function(){MyMar1s=setInterval(Marquee1s,speeds)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p>
<p><img src=http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/"http://*/img/201108/1.jpg"></p> 本文链接http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20130712/39059.html

时间： 2024-12-01 23:08:28

js图片滚动: js图片各种滚动效果的相关文章

js+div实现文字滚动和图片切换效果代码_javascript技巧

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

控制图片滚动,js代码在chrome里没效果在其他浏览器有效果

问题描述 控制图片滚动,js代码在chrome里没效果在其他浏览器有效果 //客户合作 图片滚动 $('.imgs-scroll').newsScroll({ className: 'imgs-scroll', scrollElements: 'li', scrollDirection: 'left' }); $.fn.extend({ newsScroll: function (opt) { if (!opt) opt = {}; opt = { className: opt.classNam

js特效无缝文本图片向上连续滚动效果

1.中国WEB第一站? ,JS无缝垂直图片滚动,效果非常不错...图片特效 >>> JS无缝垂直图片滚动,效果非常不错 JS无缝垂直图片滚动,效果非常不错 2.网页制作教程? 从右向左滚动JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续...图片特效向上无缝滚动的图片效果使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠 3.为什么要建立网站标准?什么是网站标准? 我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚

图片-js 鼠标按住内容实现滚动内容 实现滚动条滚动效果

问题描述 js 鼠标按住内容实现滚动内容 实现滚动条滚动效果 就是不用右边的滚动条,,然后里面的vvvvvvv文字鼠标按住后,拖动它可以上下滚动,达到滚动条效果.. 解决方案 mousedown后添加mousemove事件,判断鼠标y轴移动方向,设置容器scrollTop就可以滚动了..不过你要禁止选择内容,要不选中内容不太好看.. <style> .noselect{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*we

原生Js页面滚动延迟加载图片实现原理及过程_javascript技巧

原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

JS实现的相册图片左右滚动完整实例_javascript技巧

本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = s

js实现鼠标悬停图片上时滚动文字说明的方法

 这篇文章主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下     本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin

js实现鼠标悬停图片上时滚动文字说明的方法_javascript技巧

本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function showtip2(current,e,text){   if (document.all&&a

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

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

js实现文字、图片向上向左无缝滚动

文字或图片实现向上无缝滚动 <div id="colee" style="overflow:hidden;height:80px;">     <div id="colee1">            <li><a href="/">文字或图片实现向上无缝滚动</a></li>            <li><a href="/