很酷的js图片展示特效

最新推荐文章于 2022-10-10 14:24:20 发布

转载最新推荐文章于 2022-10-10 14:24:20 发布 · 1.8k 阅读

文章标签：

#function #html #filter #div #.net #360

其他学习笔记专栏收录该内容

99 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现的动态图片展示效果，通过鼠标移动改变图片缩放位置，同时展示图片标题。特效中运用了HTML、CSS和JavaScript技术。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>非常酷的图片展示效果，sky整理收集。</title> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <meta http-equiv="imagetoolbar" content="no"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> html { overflow: hidden; } body { background: #222; width: 100%; height: 100%; cursor: crosshair; } .spanSlide { position: absolute; background: #000; font-size: 1px; overflow: hidden; } .imgSlide { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; overflow: hidden; } .txtSlide { position: absolute; top: 5%; left: 50px; width:100%; color:#FFF; font-family: arial, helvetica, verdana, sans-serif; font-weight: bold; font-size:96px; letter-spacing:12px; filter: alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <a href="http://www.zzjs.net/" mce_href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <div style="position:absolute;left:50%;top:50%"> <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div> <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div> <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div> </div> <div id="images" style="visibility:hidden" mce_style="visibility:hidden"> <img title="zzjs" src="/ad/1.gif" mce_src="ad/1.gif"> <img title="sky" src="/ad/2.gif" mce_src="ad/2.gif"> <img title="my games" src="/ad/3.gif" mce_src="ad/3.gif"> <img title="www.zzjs .net" src="/ad/4.gif" mce_src="ad/4.gif"> <img title="welcome to zzjs.net" src="/ad/5.gif" mce_src="ad/5.gif"> </div> </body> </html>

------------------

LSF(科学之爱永恒)论坛
http://www.lsf.cc
用想象力来阅读!!!