JavaScript特效集锦资源-CSDN文库

共316个文件

js：165个

gif：44个

css：40个

需积分: 9 2 浏览量 2011-04-09 19:39:33 上传评论 1 收藏 535KB RAR 举报

JavaScript特效在网页设计中起着至关重要的作用，它赋予了静态网页动态的视觉表现，提升了用户体验。本资源包“JavaScript特效集锦”汇集了一系列精彩的JavaScript实现的特效，旨在帮助开发者和设计师更好地理解和应用这些技术。我们关注的是“图片矩阵中单个图片放大效果”。这个特效通常用于图片墙或者产品展示，当用户鼠标悬停在某张图片上时，该图片会放大以突出显示。这种效果可以通过监听鼠标事件，结合CSS3变换来实现，也可以利用JavaScript动态修改元素的大小和位置来达到放大效果。同时，Ajax技术可以用来异步加载大图，避免页面刷新，提高用户体验。 “JavaScript图片滚动”是一种常见的网页元素展示方式，例如新闻滚动、轮播图等。JavaScript可以实现自动或手动的图片切换，配合定时器可以设置滚动速度和方向，同时还可以添加淡入淡出、左右滑动等过渡效果，使得图片滚动更加平滑自然。再者，“由左向右的图片渐变过渡”是另一种视觉上的过渡效果。通过JavaScript可以控制图片的透明度或宽度，按照一定的动画时间线进行渐变变化，从而实现图片从左侧逐渐出现到右侧的效果。这种方式常用于网站背景或横幅广告的切换，能给用户带来流畅且吸引人的视觉体验。 “图片旋转构成3D圆环的展示特效”是一种较为高级的JavaScript动画，它通常涉及到CSS3的3D转换和JavaScript的数学计算。通过JavaScript，我们可以创建一个动态的3D空间，将多张图片排列成圆环状，并实现旋转、缩放等交互效果。这种特效通常用于产品展示或创意设计，能显著提升网站的视觉冲击力。这个JavaScript特效集锦涵盖了网页开发中的多种常见和创新特效，包括图片的放大、滚动、渐变过渡以及3D旋转等。学习和掌握这些技术，对于提升网页的互动性和吸引力有着极大的帮助。开发者可以通过研究源代码，理解其背后的逻辑和实现方式，从而提升自己的JavaScript技能，并运用到实际项目中去。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript特效集锦（316个子文件）

style.css 44KB

css.css 38KB

main.css 5KB

code_detail.css 4KB

logo.gif 4KB

logo9.gif 4KB

ser_button.gif 2KB

loading.gif 2KB

loading.gif 685B

td_icon.gif 327B

rss.gif 224B

tg_icon.gif 217B

[酷]图片矩阵中单个图片放大效果--Ajax中国.htm 31KB

超酷超绚精美图片展示效果代码特效网页特效 js特效脚本特效代码.htm 20KB

JavaScript 生成弹性透明的图片放大代码_源码爱好者.htm 18KB

JavaScript真正的鼠标放上动画加载大图的代码_源码爱好者.htm 18KB

JavaScript图片特效_源码爱好者.htm 18KB

JavaScript封装的平滑图片滚动，绝不用jQuery_源码爱好者.htm 17KB

四屏焦点图片轮换效果代码特效网页特效 js特效脚本特效代码.htm 17KB

带缩略图的图片轮换代码特效网页特效 js特效脚本特效代码.htm 16KB

清爽简洁的图片交替导航效果_源码爱好者.htm 16KB

从两侧向中间拼合的JavaScript图片切换效果_源码爱好者.htm 16KB

NBA网站大幅JS焦点图切换_源码爱好者.htm 16KB

QQ网支持火狐的图片切换效果_源码爱好者.htm 16KB

前后轮翻的JS图片幻灯切换_源码爱好者.htm 15KB

经典相册效果特效特效网页特效 js特效脚本特效代码.htm 15KB

图片围成环形滚动，有空间感_源码爱好者.htm 14KB

漂亮的网页相册特效特效网页特效 js特效脚本特效代码.htm 14KB

共 316 条

<!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> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #diapoContainer { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; background: #222; overflow: hidden; } .imgDC { position: absolute; cursor: pointer; border: #000 solid 2px; filter: alpha(opacity=90); opacity: 0.9; visibility: hidden; } .spaDC { position: absolute; filter: alpha(opacity=20); opacity: 0.2; background: #000; visibility: hidden; } .imgsrc { position: absolute; width: 120px; height: 67px; visibility: hidden; margin: 4%; } #bkgcaption { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 6%; background:#1a1a1a; } #caption { position: absolute; font-family: arial, helvetica, verdana, sans-serif; white-space: nowrap; color: #fff; bottom: 0px; width: 100%; left: -10000px; text-align: center; } </style> <script type="text/javascript"> var xm; var ym; /* ==== onmousemove event ==== */ document.onmousemove = function(e){ if(window.event) e=window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); } /* ==== window resize ==== */ function resize() { if(diapo)diapo.resize(); } onresize = resize; /* ==== opacity ==== */ setOpacity = function(o, alpha){ if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha; } //////////////////////////////////////////////////////////////////////////////////////////// /* ===== encapsulate script ==== */ diapo = { O : [], DC : 0, img : 0, txt : 0, N : 0, xm : 0, ym : 0, nx : 0, ny : 0, nw : 0, nh : 0, rs : 0, rsB : 0, zo : 0, tx_pos : 0, tx_var : 0, tx_target : 0, /////// script parameters //////// attraction : 2, acceleration : .9, dampening : .1, zoomOver : 2, zoomClick : 6, transparency : .8, font_size: 18, ////////////////////////////////// /* ==== diapo resize ==== */ resize : function(){ with(this){ nx = DC.offsetLeft; ny = DC.offsetTop; nw = DC.offsetWidth; nh = DC.offsetHeight; txt.style.fontSize = Math.round(nh / font_size) + "px"; if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize(); rsB = rs; } }, /* ==== create diapo ==== */ CDiapo : function(o){ /* ==== init variables ==== */ this.o = o; this.x_pos = this.y_pos = 0; this.x_origin = this.y_origin = 0; this.x_var = this.y_var = 0; this.x_target = this.y_target = 0; this.w_pos = this.h_pos = 0; this.w_origin = this.h_origin = 0; this.w_var = this.h_var = 0; this.w_target = this.h_target = 0; this.over = false; this.click = false; /* ==== create shadow ==== */ this.spa = document.createElement("span"); this.spa.className = "spaDC"; diapo.DC.appendChild(this.spa); /* ==== create thumbnail image ==== */ this.img = document.createElement("img"); this.img.className = "imgDC"; this.img.src = o.src; this.img.O = this; diapo.DC.appendChild(this.img); setOpacity(this.img, diapo.transparency); /* ==== mouse events ==== */ this.img.onselectstart = new Function("return false;"); this.img.ondrag = new Function("return false;"); this.img.onmouseover = function(){ diapo.tx_target=0; diapo.txt.innerHTML=this.O.o.alt; this.O.over=true; setOpacity(this,this.O.click?diapo.transparency:1); } this.img.onmouseout = function(){ diapo.tx_target=-diapo.nw; this.O.over=false; setOpacity(this,diapo.transparency); } this.img.onclick = function() { if(!this.O.click){ if(diapo.zo && diapo.zo != this) diapo.zo.onclick(); this.O.click = true; this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2; this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2; diapo.zo = this; setOpacity(this,diapo.transparency); } else { this.O.click = false; this.O.over = false; this.O.resize(); diapo.zo = 0; } } /* ==== rearrange thumbnails based on "imgsrc" images position ==== */ this.resize = function (){ with (this) { x_origin = o.offsetLeft; y_origin = o.offsetTop; w_origin = o.offsetWidth; h_origin = o.offsetHeight; } } /* ==== animation function ==== */ this.position = function (){ with (this) { /* ==== set target position ==== */ w_target = w_origin; h_target = h_origin; if(over){ /* ==== mouse over ==== */ w_target = w_origin * diapo.zoomOver; h_target = h_origin * diapo.zoomOver; x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1)); y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1)); } else { /* ==== mouse out ==== */ x_target = x_origin; y_target = y_origin; } if(click){ /* ==== clicked ==== */ w_target = w_origin * diapo.zoomClick; h_target = h_origin * diapo.zoomClick; } /* ==== magic spring equations ==== */ x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening; y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening; w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5); h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5); diapo.rs += (Math.abs(x_var) + Math.abs(y_var)); /* ==== html animation ==== */ with(img.style){ left = Math.round(x_pos) + "px"; top = Math.round(y_pos) + "px"; width = Math.round(Math.max(0, w_pos)) + "px"; height = Math.round(Math.max(0, h_pos)) + "px"; zIndex = Math.round(w_pos); } with(spa.style){ left = Math.round(x_pos + w_pos * .1) + "px"; top = Math.round(y_pos + h_pos * .1) + "px"; width = Math.round(Math.max(0, w_pos * 1.1)) + "px"; height = Math.round(Math.max(0, h_pos * 1.1)) + "px"; zIndex = Math.round(w_pos); } } } }, /* ==== main loop ==== */ run : function(){ diapo.xm = xm - diapo.nx; diapo.ym = ym - diapo.ny; /* ==== caption anim ==== */ diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02; diapo.txt.style.left = Math.round(diapo.tx_pos) + "px"; /* ==== images anim ==== */ for(var i in diapo.O) diapo.O[i].position(); /* ==== loop ==== */ setTimeout("diapo.run();", 16); }, /* ==== load images ==== */ images_load : function(){ // ===== loop until all images are loaded ===== var M = 0; for(var i=0; i<diapo.N; i++) { if(diapo.img[i].complete) { diapo.img[i].style.position = "relative"; diapo.O[i].img.style.visibility = "visible"; diapo.O[i].spa.style.visibility = "visible"; M++; } resize(); } if(M<diapo.N) setTimeout("diapo.images_load();", 128); }, /* ==== init script ==== */ init : function() { diapo.DC = document.getElementById("diapoContainer"); diapo.img = diapo.DC.getElementsByTagName("img"); diapo.txt = document.getElementById("caption"); diapo.N = diapo.img.length; for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i])); diapo.resize(); diapo.tx_pos = -diapo.nw; diapo.tx_target = -diapo.nw; diapo.images_load(); diapo.run(); } } </script> </head> <body> <div id="diapoContainer"> <img class=

评论收藏

内容反馈