横向:

<div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"

 
onmouseout="doscroll()">
<div id="demo1" style="white-space:nowrap;padding:0;">
<a href="javascript:alert('发表新贴');"><img src="图片URL" height=20 width=104
 
border=0></a>
<a href="javascript:alert('发表回复');"><img src="图片URL" height=20 width=104
 
border=0></a>
</div>
</div>
<!--滚动的javascript-->
<script>
var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
   sc=setInterval(doMarquee,20)
}
function stopscroll()
{
   clearInterval(sc)
}
doscroll()
</script>
<!--滚动的javascript结束-->
纵向:
  <div id="demo" style="height:110px; overflow:hidden ">

    <div id="demo1">
<a href="javascript:alert('发表新贴');"><img src="图片URL" height=20 width=104
 
border=0></a>
<a href="javascript:alert('发表回复');"><img src="图片URL" height=20 width=104
 
border=0></a>
</div><div id="demo2"></div>
 
<!--滚动的javascript-->
<script>
var speed=100
demo2.innerHTML=demo1.innerHTML
function Marquees(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
</script><!--滚动的javascript结束-->
</div>

JS水平移动图片的更多相关文章

  1. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  3. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  4. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  5. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

  6. Lazyr.js – 延迟加载图片(Lazy Loading)

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  7. Webview加载本地js、图片的方法

    在项目开发中经常会将比较大的js.图片.css等放到app中,而html放服务器,这样在使用时流量较少,加载也比都放服务器上快,其实方法也比较多,网上搜了很久都没结果. 一种是获取服务器返回的html ...

  8. WebApp:如何让安卓的webview缓存webapp的html、js和图片等资源

    一.开发环境     客户端:安卓+webview(vuejs)     服务器端:tomcat 8.0 二.问题     使用安卓原生+web(基于webpack+vuejs)的方式开发了一个安卓应 ...

  9. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

随机推荐

  1. sql server deadlock跟踪的四种方法

    最近写程序常会遇到deadlock victim,每次一脸懵逼.研究了下怎么跟踪,写下来记录下. 建测试数据 CREATE DATABASE testdb; GO USE testdb; CREATE ...

  2. 关于阿里云专有网络搭建FTP服务器的深坑

    之前用的FTP服务器都是,随便搭建一下就能用了, 昨天因为服务器的问题,换了个服务器,搭建FTP服务器的时候发现, 搭建的服务器居然只能使用 主动模式访问,改成被动后 无法获取目录, 百度了 各大论坛 ...

  3. win7 安装.Net framework 4.0出现 安装不成功,错误代码0x80240037 的解决方法

    1.安装说明 系统:win7 64位 安装包:dotNetFx40_Full_x86_x64.exe(.Net framework 4.0) 出现的问题:在win7 上安装dotNetFx40_Ful ...

  4. (二)github的价值意义篇

    为什么需要社会化编程? 如果您是程序员面试官,两者之间你会选择哪一位呢? 能查看以前所写代码的程序员 or 无法查看的程序员 精通最新软件的程序员 or 不精通的程序员 对语言或软件差异带来的不同文化 ...

  5. Removing bad blocks from the USB drive with fsck

    An easy way to repair a flash drive, or any drive really, is to use the fsck tool. This tool is grea ...

  6. WebService(JAX-WS、XFire、Axis三种)获取客户端ip

    WebService(JAX-WS.XFire.Axis三种)获取客户端ip JAX-WS.XFire.Axis三种webservice的获取客户端IP的简单实现过程: 1,基于JDK6 jax-ws ...

  7. 20145310 《网络对抗》 MSF基础应用

    实验要求 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路. 一个主动攻击,如ms08_067; 一个针对浏览器的攻击,如ms11_050: 一个针对客户端的攻击,如Adobe 成 ...

  8. 第几天|2018年蓝桥杯B组题解析第一题-fishers

    标题:第几天 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容. 思路:计算日期,用excel计算两个日期的差 ...

  9. 07_Flume_regex interceptor实践

    实践一:regex filter interceptor 1.目标场景 regex filter interceptor的作用: 1)将event body的内容和配置中指定的正则表达式进行匹配2)如 ...

  10. Hibernate 由实体类与配置文件的配置关系生成数据库中的表

    import org.hibernate.cfg.Configuration; import org.hibernate.tool.hbm2ddl.SchemaExport; public class ...