【免费】121-横向弹性相册JS广告代码简介页面资源-CSDN文库

共9个文件

jpg：7个

htm：2个

需积分: 0 46 浏览量更新于2009-01-04 收藏 618KB RAR 举报

【横向弹性相册JS广告代码】是一种常见的网页交互设计技术，用于在网页上展示图片集，通常用在产品展示、照片墙或者广告宣传等场景。这种相册的特点是能够自适应不同的屏幕尺寸，保证在手机、平板或电脑上都能有良好的视觉效果。它通过JavaScript编程语言实现动态效果，如滑动切换、缩放、平移等，同时结合CSS3来增强视觉体验，提供流畅的动画过渡。在"121-横向弹性相册JS广告代码简介页面"中，我们可以预见到以下几个关键知识点： 1. **响应式设计**：相册代码会基于浏览器窗口大小自动调整布局，确保无论设备如何旋转或缩放，图片都能保持合适的比例和清晰度。这通常通过媒体查询（Media Queries）和百分比布局来实现。 2. **JavaScript基础**：JavaScript是实现相册功能的核心，负责处理用户交互，如点击、滑动等，以及图片的加载、显示和隐藏。常见的库如jQuery可以简化DOM操作，提高代码效率。 3. **CSS3动画**：为了实现平滑的过渡效果，CSS3的动画属性（如`transition`和`animation`）会被广泛使用。这些属性可以控制元素在特定时间内的变化，如淡入淡出、滑动等。 4. **事件监听**：JavaScript中的事件监听器允许程序在特定事件发生时执行代码，例如当用户触摸屏幕或鼠标滑动时触发相册的切换。 5. **图片懒加载**：为了优化性能和用户体验，可能会采用懒加载技术，即只在图片进入视口时才开始加载，这可以显著减少页面初始加载时间。 6. **数据结构与数组**：在JS代码中，图片信息通常存储在数组中，便于遍历和处理，如图片URL、描述等。 7. **AJAX**：如果相册需要动态加载更多图片，可能涉及到AJAX异步请求，从服务器获取额外的数据，实现无刷新加载。 8. **触摸事件支持**：对于移动设备，代码需要考虑触摸事件（如`touchstart`、`touchmove`和`touchend`），确保在触屏设备上的操作同样流畅。 9. **性能优化**：良好的代码结构和优化技术（如使用requestAnimationFrame进行动画渲染）有助于提升页面性能，减少资源消耗。 10. **可访问性**：考虑到不同用户的需求，相册代码需要遵循Web内容可访问性指南（WCAG），确保键盘导航和屏幕阅读器的兼容性。在“js-0121”文件中，我们可以找到实现这些功能的具体源代码，通过阅读和学习，可以深入理解横向弹性相册的实现原理和优化技巧。这将对网页开发人员在创建互动性强、用户体验良好的相册组件时提供宝贵的指导。

收起资源包目录

js-0121.rar （9个子文件）

js-0121

readme.htm 2KB

images

spellcraft.jpg 142KB

pyre.jpg 136KB

majesty.jpg 54KB

newborn.jpg 72KB

gazebo2k3.jpg 81KB

singularity.jpg 37KB

whitemagic.jpg 92KB

index.htm 7KB

资源推荐

资源预览

资源评论

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Copyright" content="模板无忧 http://www.Mb5u.com/" /> <meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" /> <meta content="模板无忧" name="keywords" /> <title>模板无忧</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #box { position: absolute; background: #111; border: gray solid 1px; visibility: hidden; } #screen { position: absolute; left: 0px; width: 100%; top: 10%; height: 80%; background: #000; border: gray solid 1px; } #box img { position: absolute; border: gray solid 1px; cursor: pointer; } #box span { position: absolute; color: #ccc; font-family: verdana; font-size: 12px; width: 200px; } #box a { text-decoration: none; color:#ff8000; } #box a:hover { text-decoration: none; background:#ff8000; color:#ffffff; } #box a:visited { text-decoration: none; color:#ff8000; } #box a:visited:hover { text-decoration: none; background:#ff8000; color:#ffffff; } #lnk { visibility: hidden; } </style> <script type="text/javascript"> document.onselectstart = new Function("return false"); O = new Array(); box = 0; img = 0; txt = 0; tit = 0; W = 0; H = 0; nI = 0; sel = 0; si = 0; ZOOM = 0; rImg = 0; ////////////////// speed = .06; // animation speed delay = .5; // 1 = no delay ////////////////// function dText(){ txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right"; txt.innerHTML = O[sel].tx; tit.innerHTML = O[sel].ti; } function CObj(n, s, x, tx, ti){ this.n = n; this.dim = s; this.tx = tx; this.ti = ti; this.is = img[n]; this.vz = 0; this.sx = 0; this.x0 = x; this.x1 = 0; this.zo = 0; this.over = function() { with(this){ if(n!=sel){ O[sel].dim = 100; O[n].dim = ZOOM * 100; sel = n; l = 0; for(k=0; k<nI; k++){ O[k].x0 = l; l += O[k].dim; } txt.innerHTML = tit.innerHTML = ""; setTimeout("dText()", 32); } } } this.anim = function () { with(this){ vz = speed*(vz+(x1-sx)*delay); x1 -= vz; sx = (n==0)?0:O[n-1].x0+O[n-1].dim; zo -= (zo-dim)*speed; l = (x1*si)+6*(n+1); w = zo*si; is.style.left = Math.round(l)+'px'; is.style.top = Math.round((H-w*rImg)*.5)+'px'; is.style.width = Math.round(w)+'px'; is.style.height = Math.round(w*rImg)+'px'; if(sel == n){ if(sel<nI*.5) { tit.style.left = txt.style.left = Math.round(l+w+6)+'px'; } else { tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px'; } txt.style.top = Math.round(-(w*rImg)*.25)+'px'; tit.style.top = Math.round((w*rImg)*.33)+'px'; } } } } function run(){ for(j in O)O[j].anim(); setTimeout("run()", 16); } function doResize(){ tit.style.width = Math.round(nx*.25)+'px'; txt.style.width = Math.round(nx*.25)+'px'; tit.style.fontSize = (nx/30)+'px'; txt.style.fontSize = (nx/70)+'px'; with(box.style){ width = Math.round(W)+'px'; height = Math.round(H)+'px'; left = Math.round(nx/2-W/2)+'px'; top = Math.round(ny/2-H/2)+'px'; } } function resize(){ nx = scr.offsetWidth; ny = scr.offsetHeight; W = nx*90/100; si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100)); H = (100*si*rImg)+14; doResize(); } onresize = resize; onload = function(){ scr = document.getElementById("screen"); box = document.getElementById("box"); tit = document.getElementById("tit"); txt = document.getElementById("txt"); img = box.getElementsByTagName("img"); Lnk = document.getElementById("lnk").getElementsByTagName("a"); nI = img.length; ZOOM = nI; rImg = img[0].height/img[0].width; resize(); s = ZOOM * 100; x = 0; tit.innerHTML = img[0].title; txt.innerHTML = img[0].alt; for(i=0; i<nI; i++) { var t = img[i].alt; if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>'; O[i] = new CObj(i, s, x, t, img[i].title); img[i].alt = ""; img[i].title = ""; img[i].onmousedown = new Function("return false;"); img[i].onmouseover = new Function('O['+i+'].over();'); if(Lnk[i].href!=""){ /* ==== hyperlink ==== */ img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");'); } x += s; s = 100; } box.style.visibility = "visible"; run(); } </script> </head> <body> <div id="screen"> <div id="box""> <img src="images/newborn.jpg" title="explain" alt="They explained a little about what they were doing."> <img src="images/majesty.jpg" title="strain" alt="I hoped I wouldn′t crack under the strain."> <img src="images/whitemagic.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position."> <img src="images/gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane."> <img src="images/pyre.jpg" title="inhumane" alt="But they couldn′t hide the very worst of their inhumane undertakings from the people."> <img src="images/singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice."> <img src="images/spellcraft.jpg" title="never again" alt="Never more. Never again."> <span id="txt"></span> <span id="tit"></span> <span id="lnk"> <a href="http://www.Mb5u.com">www.Mb5u.com</a> <a></a> <a></a> <a></a> <a></a> <a></a> <a></a> </span> </div> </div>  <span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading...</span> <span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span> <script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div align="center"><span style="color:#FFFFFF">来源：design-studio.cn　更多访问模板无忧 www.Mb5u.com</span></div> </body> </html>