Javascript应用--任你摆布的图片展示效果（图片名换成你自己的）

于 2010-12-28 18:41:00 发布
阅读量117 收藏
点赞数
文章标签： javascript ViewUI
本文介绍了一种基于HTML、CSS和JavaScript实现的互动式图片缩放效果。当鼠标悬停在图片上时，图片会放大并跟随鼠标移动，同时显示图片描述。此效果通过动态调整图片的位置和大小来实现，提供了一种吸引用户的视觉体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>3</title>
  5. <styletype="text/css">
  6. html{
  7. overflow:hidden;
  8. }
  10. body{
  11. margin:0px;
  12. padding:0px;
  13. background:#000;
  14. position:absolute;
  15. width:100%;
  16. height:100%;
  17. cursor:crosshair;
  18. }
  20. #diapoContainer{
  21. position:absolute;
  22. left:10%;
  23. top:10%;
  24. width:80%;
  25. height:80%;
  26. background:#222;
  27. overflow:hidden;
  28. }
  30. .imgDC{
  31. position:absolute;
  32. cursor:pointer;
  33. border:#000solid2px;
  34. filter:alpha(opacity=90);
  35. opacity:0.9;
  36. visibility:hidden;
  37. }
  39. .spaDC{
  40. position:absolute;
  41. filter:alpha(opacity=20);
  42. opacity:0.2;
  43. background:#000;
  44. visibility:hidden;
  45. }
  47. .imgsrc{
  48. position:absolute;
  49. width:120px;
  50. height:67px;
  51. visibility:hidden;
  52. margin:4%;
  53. }
  55. #bkgcaption{
  56. position:absolute;
  57. bottom:0px;
  58. left:0px;
  59. width:100%;
  60. height:6%;
  61. background:#1a1a1a;
  62. }
  63. #caption{
  64. position:absolute;
  65. font-family:arial,helvetica,verdana,sans-serif;
  66. white-space:nowrap;
  67. color:#fff;
  68. bottom:0px;
  69. width:100%;
  70. left:-10000px;
  71. text-align:center;
  72. }
  74. </style>
  76. <scripttype="text/javascript">
  77. varxm;
  78. varym;
  80. /*====onmousemoveevent====*/
  81. document.onmousemove=function(e){
  82. if(window.event)e=window.event;
  83. xm=(e.x||e.clientX);
  84. ym=(e.y||e.clientY);
  85. }
  87. /*====windowresize====*/
  88. functionresize(){
  89. if(diapo)diapo.resize();
  90. }
  91. onresize=resize;
  93. /*====opacity====*/
  94. setOpacity=function(o,alpha){
  95. if(o.filters)o.filters.alpha.opacity=alpha*100;elseo.style.opacity=alpha;
  96. }
  99. ////////////////////////////////////////////////////////////////////////////////////////////
  100. /*=====encapsulatescript====*/
  101. diapo={
  102. O:[],
  103. DC:0,
  104. img:0,
  105. txt:0,
  106. N:0,
  107. xm:0,
  108. ym:0,
  109. nx:0,
  110. ny:0,
  111. nw:0,
  112. nh:0,
  113. rs:0,
  114. rsB:0,
  115. zo:0,
  116. tx_pos:0,
  117. tx_var:0,
  118. tx_target:0,
  120. ///////scriptparameters////////
  121. attraction:2,
  122. acceleration:.9,
  123. dampening:.1,
  124. zoomOver:2,
  125. zoomClick:6,
  126. transparency:.8,
  127. font_size:18,
  128. //////////////////////////////////
  130. /*====diaporesize====*/
  131. resize:function(){
  132. with(this){
  133. nx=DC.offsetLeft;
  134. ny=DC.offsetTop;
  135. nw=DC.offsetWidth;
  136. nh=DC.offsetHeight;
  137. txt.style.fontSize=Math.round(nh/font_size)+"px";
  138. if(Math.abs(rs-rsB)<100)for(vari=0;i<N;i++)O[i].resize();
  139. rsrsB=rs;
  140. }
  141. },
  143. /*====creatediapo====*/
  144. CDiapo:function(o){
  145. /*====initvariables====*/
  146. this.o=o;
  147. thisthis.x_pos=this.y_pos=0;
  148. thisthis.x_origin=this.y_origin=0;
  149. thisthis.x_var=this.y_var=0;
  150. thisthis.x_target=this.y_target=0;
  151. thisthis.w_pos=this.h_pos=0;
  152. thisthis.w_origin=this.h_origin=0;
  153. thisthis.w_var=this.h_var=0;
  154. thisthis.w_target=this.h_target=0;
  155. this.over=false;
  156. this.click=false;
  158. /*====createshadow====*/
  159. this.spa=document.createElement("span");
  160. this.spa.className="spaDC";
  161. diapo.DC.appendChild(this.spa);
  163. /*====createthumbnailimage====*/
  164. this.img=document.createElement("img");
  165. this.img.className="imgDC";
  166. this.img.src=o.src;
  167. thisthis.img.O=this;
  168. diapo.DC.appendChild(this.img);
  169. setOpacity(this.img,diapo.transparency);
  171. /*====mouseevents====*/
  172. this.img.onselectstart=newFunction("returnfalse;");
  173. this.img.ondrag=newFunction("returnfalse;");
  174. this.img.onmouseover=function(){
  175. diapo.tx_target=0;
  176. diapo.txt.innerHTML=this.O.o.alt;
  177. this.O.over=true;
  178. setOpacity(this,this.O.click?diapo.transparency:1);
  179. }
  180. this.img.onmouseout=function(){
  181. diapo.tx_target=-diapo.nw;
  182. this.O.over=false;
  183. setOpacity(this,diapo.transparency);
  184. }
  185. this.img.onclick=function(){
  186. if(!this.O.click){
  187. if(diapo.zo&&diapo.zo!=this)diapo.zo.onclick();
  188. this.O.click=true;
  189. this.O.x_origin=(diapo.nw-(this.O.w_origin*diapo.zoomClick))/2;
  190. this.O.y_origin=(diapo.nh-(this.O.h_origin*diapo.zoomClick))/2;
  191. diapo.zo=this;
  192. setOpacity(this,diapo.transparency);
  193. }else{
  194. this.O.click=false;
  195. this.O.over=false;
  196. this.O.resize();
  197. diapo.zo=0;
  198. }
  199. }
  201. /*====rearrangethumbnailsbasedon"imgsrc"imagesposition====*/
  202. this.resize=function(){
  203. with(this){
  204. x_origin=o.offsetLeft;
  205. y_origin=o.offsetTop;
  206. w_origin=o.offsetWidth;
  207. h_origin=o.offsetHeight;
  208. }
  209. }
  211. /*====animationfunction====*/
  212. this.position=function(){
  213. with(this){
  214. /*====settargetposition====*/
  215. w_target=w_origin;
  216. h_target=h_origin;
  217. if(over){
  218. /*====mouseover====*/
  219. w_target=w_origin*diapo.zoomOver;
  220. h_target=h_origin*diapo.zoomOver;
  221. x_target=diapo.xm-w_pos/2-(diapo.xm-(x_origin+w_pos/2))/(diapo.attraction*(click?10:1));
  222. y_target=diapo.ym-h_pos/2-(diapo.ym-(y_origin+h_pos/2))/(diapo.attraction*(click?10:1));
  223. }else{
  224. /*====mouseout====*/
  225. x_target=x_origin;
  226. y_target=y_origin;
  227. }
  228. if(click){
  229. /*====clicked====*/
  230. w_target=w_origin*diapo.zoomClick;
  231. h_target=h_origin*diapo.zoomClick;
  232. }
  234. /*====magicspringequations====*/
  235. x_pos+=x_varx_var=x_var*diapo.acceleration+(x_target-x_pos)*diapo.dampening;
  236. y_pos+=y_vary_var=y_var*diapo.acceleration+(y_target-y_pos)*diapo.dampening;
  237. w_pos+=w_varw_var=w_var*(diapo.acceleration*.5)+(w_target-w_pos)*(diapo.dampening*.5);
  238. h_pos+=h_varh_var=h_var*(diapo.acceleration*.5)+(h_target-h_pos)*(diapo.dampening*.5);
  239. diapo.rs+=(Math.abs(x_var)+Math.abs(y_var));
  241. /*====htmlanimation====*/
  242. with(img.style){
  243. left=Math.round(x_pos)+"px";
  244. top=Math.round(y_pos)+"px";
  245. width=Math.round(Math.max(0,w_pos))+"px";
  246. height=Math.round(Math.max(0,h_pos))+"px";
  247. zIndex=Math.round(w_pos);
  248. }
  249. with(spa.style){
  250. left=Math.round(x_pos+w_pos*.1)+"px";
  251. top=Math.round(y_pos+h_pos*.1)+"px";
  252. width=Math.round(Math.max(0,w_pos*1.1))+"px";
  253. height=Math.round(Math.max(0,h_pos*1.1))+"px";
  254. zIndex=Math.round(w_pos);
  255. }
  256. }
  257. }
  258. },
  260. /*====mainloop====*/
  261. run:function(){
  262. diapo.xm=xm-diapo.nx;
  263. diapo.ym=ym-diapo.ny;
  264. /*====captionanim====*/
  265. diapo.tx_pos+=diapodiapo.tx_var=diapo.tx_var*.9+(diapo.tx_target-diapo.tx_pos)*.02;
  266. diapo.txt.style.left=Math.round(diapo.tx_pos)+"px";
  267. /*====imagesanim====*/
  268. for(variindiapo.O)diapo.O[i].position();
  269. /*====loop====*/
  270. setTimeout("diapo.run();",16);
  271. },
  273. /*====loadimages====*/
  274. images_load:function(){
  275. //=====loopuntilallimagesareloaded=====
  276. varM=0;
  277. for(vari=0;i<diapo.N;i++){
  278. if(diapo.img[i].complete){
  279. diapo.img[i].style.position="relative";
  280. diapo.O[i].img.style.visibility="visible";
  281. diapo.O[i].spa.style.visibility="visible";
  282. M++;
  283. }
  284. resize();
  285. }
  286. if(M<diapo.N)setTimeout("diapo.images_load();",128);
  287. },
  289. /*====initscript====*/
  290. init:function(){
  291. diapo.DC=document.getElementById("diapoContainer");
  292. diapodiapo.img=diapo.DC.getElementsByTagName("img");
  293. diapo.txt=document.getElementById("caption");
  294. diapodiapo.N=diapo.img.length;
  295. for(i=0;i<diapo.N;i++)diapo.O.push(newdiapo.CDiapo(diapo.img[i]));
  296. diapo.resize();
  297. diapo.tx_pos=-diapo.nw;
  298. diapo.tx_target=-diapo.nw;
  299. diapo.images_load();
  300. diapo.run();
  301. }
  302. }
  304. </script>
  305. </head>
  307. <body>
  309. <divid="diapoContainer">
  311. <imgclass="imgsrc"src="conspiracy_21.jpg"alt="ReconsideryourExistence">
  312. <imgclass="imgsrc"src="conspiracy_22.jpg"alt="SomethingNeedstobeDiscovered">
  313. <imgclass="imgsrc"src="conspiracy_24.jpg"alt="TheySaidVeryLittle">
  314. <imgclass="imgsrc"src="conspiracy_26.jpg"alt="OnlyinYourMind">
  315. <imgclass="imgsrc"src="conspiracy_32.jpg"alt="ThePowerofImagination">
  316. <imgclass="imgsrc"src="conspiracy_29.jpg"alt="ObjectivityisImpossible">
  317. <imgclass="imgsrc"src="conspiracy_31.jpg"alt="CleaningUpOperation">
  318. <imgclass="imgsrc"src="conspiracy_17.jpg"alt="ArbitraryContents">
  320. <divid="bkgcaption"></div>
  321. <divid="caption"></div>
  323. </div>
  325. <scripttype="text/javascript">
  326. /*====startscript====*/
  327. functiondom_onload(){
  328. if(document.getElementById("diapoContainer"))diapo.init();elsesetTimeout("dom_onload();",128);
  329. }
  330. dom_onload();
  331. </script>
  333. </body>
  334. </html>

iteye_6481
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值