网站首页中有一部分展示区域是放gif图片的,用户浏览到那部分时,gif都在播放,看得眼花缭乱,根本不知道想具体看哪个,所以现在有个需求就是:用户浏览到那个区域gif图片都是停止播放的,鼠标移上具体的某个图片,那个图片才开始播放。。现在我能想到唯一的方法是生成jpg缩略图,页面先只展示缩略图,鼠标移上换成gif,移走再换回来。但是这是下下策,现在只想无需太多改动就能实现,所以想到了用js, 但是不知道js否能实现?

2010-12-27 14:45:32

3 Answers

gif是不可操作的吧,只看程序怎么处理,有些图片查看器就不认gif格式,只能显示第一帧。

我觉得用js处理gif格式,即时生成缩略图应该可行,都在客户端进行。

2010-12-27 18:28:15

客户端生成缩略图

<script language="javascript"> /******************** *基本描述: * 图片缩略,使用js的静态类实现 * by 西楼冷月 20080817 www.chinacms.org | www.xilou.net | qq : 39949376 *参数说明: * @ im : 可以为image对象或img的id *基本功能: * Img(im).Resize(nWidth,nHeight) : 按给定的宽和高进行智能缩小 * Img(im).ResizedByWH(nWidth,nHeight) : 按给定的宽和高进行固定缩小(会出现图片变形情况) * Img(im).ResizedByWidth(nWidth) : 按给定的宽进行等比例缩小 * Img(im).ResizedByHeight(nHeight) : 按给定的高进行等比例缩小 * Img(im).ResizedByPer(nWidthPer,nHeightPer) : 宽和高按百分比缩小 *使用例子: * <img id="demo" src="demo.gif" width="191" height="143" onload="Img(this).Resize(200,500);" /> * <img id="demo" src="demo.gif" width="191" height="143" onload="Img('demo').ResizedByPer(200,500);" /> ********************/ function Img(im) { ImgCls.Obj = ( im && typeof im == 'object' ) ? im : document.getElementById(im) ; return ImgCls ; } var ImgCls = { Obj : null , //按给定的宽和高进行智能缩小 Resize : function ( nWidth , nHeight ) { var w , h , p1 , p2 ; //计算宽和高的比例 p1 = nWidth / nHeight ; p2 = ImgCls.Obj.width / ImgCls.Obj.height ; w = 0 ; h = 0 ; if( p1 < p2 ) { //按宽度来计算新图片的宽和高 w = nWidth ; h = nWidth * ( 1 / p2 ) ; } else { //按高度来计算新图片的宽和高 h = nHeight ; w = nHeight * p2 ; } ImgCls.Obj.width = w ; ImgCls.Obj.height = h ; }, //按给定的宽和高进行固定缩小(会出现图片变形情况) //http://bizhi.knowsky.com/ ResizedByWH : function ( nWidth , nHeight ) { ImgCls.Obj.width = nWidth ; ImgCls.Obj.height = nHeight ; }, //按给定的宽进行等比例缩小 ResizedByWidth : function ( nWidth ) { var p = nWidth / ImgCls.Obj.width ; ImgCls.Obj.width = nWidth ; ImgCls.Obj.height = parseInt ( ImgCls.Obj.height * p ) ; }, //按给定的高进行等比例缩小 ResizedByHeight : function ( nHeight ) { var p = nHeight / ImgCls.Obj.height ; ImgCls.Obj.height = nHeight ; ImgCls.Obj.width = parseInt ( ImgCls.Obj.width * p ) ; }, //宽和高按百分比缩小 ResizedByPer : function ( nWidthPer , nHeightPer ) { ImgCls.Obj.width = parseInt(ImgCls.Obj.width * nWidthPer / 100) ; ImgCls.Obj.height = parseInt(ImgCls.Obj.height * nHeightPer / 100) ; } } </script>

2010-12-27 19:41:57

纯JS没有办法实现

1、借助采用HTML5的canvas标签实现
JS脚本遍历所需要停止播放的标签,采用标签代替,将img指向的图片绘制到canvas上。

2、借助Flash实现
1). 制作一个可以解析gif图片的swf文件。
2). JS遍历需要停止播放的img,用swf控件代替,将图片地址传入swf中。

2010-12-27 16:23:48
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制