效果图片展示(javascript)资源-CSDN下载

共1个文件

htm：1个

需积分: 4 20 浏览量 2009-01-08 09:27:40 上传评论收藏 3KB RAR 举报

标题中的“效果图片展示(javascript)”指的是使用JavaScript技术实现的一种动态、交互式的图片展示功能。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它能够增强网页的交互性和动态性，使得用户在浏览网页时可以与网页内容进行实时交互。描述中提到的“很好的一个图片展示功能”，可能是指一种图片轮播、幻灯片或缩放效果，通过JavaScript库或者自定义的脚本来实现。"http://etg/showpic.aspx?productid=-1&style=婚纱摄影&fitimgid=32"是该功能的演示地址，这里的参数可能用于指定展示的图片类别（如“婚纱摄影”）和特定图片ID（如“32”），访问这个链接可以直观地了解这个图片展示功能的具体效果和操作方式。标签“图片展示”意味着这个功能的核心是展示图片，可能是通过滑动、淡入淡出、缩放等视觉效果来呈现。“效果.javascript”则进一步强调了这些效果是通过JavaScript实现的，这通常涉及到DOM操作、事件监听、定时器等功能，以及可能的CSS3动画配合。压缩包中的“RevealTrans.htm”文件很可能包含了实现这种图片展示效果的HTML代码。"RevealTrans"可能是某种过渡或揭示效果的名称，这可能是一个自定义的JavaScript函数或者使用了某个流行的JavaScript库（如jQuery、Bootstrap或Swiper）的一部分。打开这个文件，我们可以看到HTML结构、CSS样式和嵌入的JavaScript代码，这些代码共同创建了描述中的图片展示功能。在实际应用中，这样的图片展示功能可能包含以下关键知识点： 1. JavaScript基础：变量、条件语句、循环、函数等。 2. DOM操作：获取元素、改变元素属性、添加或删除类等。 3. 事件处理：点击、滚动、加载等事件的监听和响应。 4. 动画效果：利用JavaScript控制时间轴，实现平滑的过渡效果。 5. 图片懒加载：提高页面加载速度，只在图片进入视口时加载。 6. 兼容性处理：确保在不同浏览器上都能正常工作，可能需要使用polyfill或者条件语句。 7. URL参数解析：用于动态获取和处理URL中的参数，如产品ID和图片风格。 8. 可能会涉及到CSS3的动画和过渡效果，如transform和transition。通过研究这个“RevealTrans.htm”文件，开发者不仅可以学习到如何创建图片展示功能，还可以深入理解JavaScript和Web开发中的许多实用技巧。

资源推荐

资源详情

资源评论

收起资源包目录

RevealTrans.rar （1个子文件）

RevealTrans.htm 6KB

<!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>图片切换效果</title> </head> <body> <style type="text/css"> #idPicShow{ width:280px; height:200px; border:1px solid #eee; position:relative; } #idPicText{ background:#eee; line-height:25px; text-align:center; font-weight:bold; width:282px; white-space:nowrap; overflow:hidden; font-size:12px; } #idPicText a{ text-decoration:none; color:#333; display:block; } #idPicList img{ cursor:pointer; width:65px; height:50px; filter:alpha(opacity=50); -moz-opacity: .5; opacity: .5; border:0; margin:10px; } #idPicList img.on{ filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #idNum{ position:absolute; right:5px; bottom:5px;} #idNum li{ float: left; list-style:none; color: #fff; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; margin: 1px; border: 1px solid #707070; background-color: #060a0b; } #idNum li.on{ line-height: 18px; width: 18px; height: 18px; font-size: 14px; border: 0; background-color: #ce0609; font-weight: bold; } </style> <script type="text/javascript"> var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var Each = function(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; //ie only var RevealTrans = Class.create(); RevealTrans.prototype = { initialize: function(container, options) { this._img = document.createElement("img"); this._a = document.createElement("a"); this._timer = null;//计时器 this.Index = 0;//显示索引 this._onIndex = -1;//当前索引 this.SetOptions(options); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.Duration = Math.abs(this.options.Duration); this.Transition = parseInt(this.options.Transition); this.List = this.options.List; this.onShow = this.options.onShow; //初始化显示区域 this._img.src = "javascript:void(0);";//第一次变换时不显示红x图 this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0; this._img.onmouseover = Bind(this, this.Stop); this._img.onmouseout = Bind(this, this.Start); isIE && (this._img.style.filter = "revealTrans()"); this._a.target = "_blank"; $(container).appendChild(this._a).appendChild(this._img); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Auto: true,//是否自动切换 Pause: 1000,//停顿时间(微妙) Duration: 1,//变换持续时间(秒) Transition: 23,//变换效果(23为随机) List: [],//数据集合,如果这里不设置可以用Add方法添加 onShow: function(){}//变换时执行 }; Extend(this.options, options || {}); }, Start: function() { clearTimeout(this._timer); //如果没有数据就返回 if(!this.List.length) return; //修正Index if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; } //如果当前索引不是显示索引就设置显示 if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); } //如果要自动切换 if(this.Auto){ this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause); } }, //显示 Show: function(list) { if(isIE){ //设置变换参数 with(this._img.filters.revealTrans){ Transition = this.Transition; Duration = this.Duration; apply(); play(); } } //设置图片属性 this._img.src = list.img; this._img.alt = list.text; //设置链接 !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href"); //附加函数 this.onShow(); }, //添加变换对象 Add: function(sIimg, sText, sUrl) { this.List.push({ img: sIimg, text: sText, url: sUrl }); }, //停止 Stop: function() { clearTimeout(this._timer); } }; </script> <div id="idPicShow"> <ul id="idNum"> </ul> </div> <div id="idPicText"></div> <div id="idPicList"></div> <script> var rvt = new RevealTrans("idPicShow"); //添加变换对象 rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html'); rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html'); rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html'); var oList = $("idPicList"), oText = $("idPicText"), arrImg = []; var oNum = $("idNum"), arrNum = []; //设置图片列表 Each(rvt.List, function(list, i){ //图片式 var img = document.createElement("img"); img.src = list["img"]; img.alt = list["text"]; arrImg[i] = img; oList.appendChild(img); //按钮式 var li = document.createElement("li"); li.innerHTML = i + 1; arrNum[i] = li; oNum.appendChild(li); //事件设置 img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); }; img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); }; }); //设置图片列表样式文本显示区域 rvt.onShow = function(){ var i = this.Index, list = this.List[i]; //图片式 Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on"; //按钮式 Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on"; //文本区域 oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text; } //文本显示区域 oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); }; oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); }; rvt.Start(); </script> </body> </html>

评论收藏

内容反馈