站长资源网络编程
javascript实例分享---具有立体效果的图片特效
简介此实例是我一遍学习一边写出来的，希望能够帮到大家，一起学习。效果如图所示：html代码如下所示：复制代码 代码如下: 图片浏览工</div>
<div class="news_infos"><div id="MyContent"><P>此实例是我一遍学习一边写出来的，希望能够帮到大家，一起学习。效果如图所示：</P>
<P><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/201468111900869.png?201458111927');"><img src="/UploadFiles/2021-04-02/201468111900869.png?201458111927" alt="javascript实例分享---具有立体效果的图片特效" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></P>
<P>html代码如下所示：</P>
<P><U>复制代码</U> 代码如下:<BR><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><BR> <head><BR> <title>图片浏览工具制作</title><BR> <script type="text/javascript" src="/UploadFiles/2021-04-02/main.js"> <link rel="stylesheet" type="text/css" href = "style/css.css"><BR> </head><BR> <body><BR> <div id="pic_browser"><BR> <img class="prev" src="/UploadFiles/2021-04-02/prev.png">
<P> <img id="img1" onclick=""/><BR> <div class="mask3" onclick="javascript:jzk.ui.moveImg(3);"></div><!-- 增加三级遮罩 --></P>
<P> <img id="img2" onclick=""/><BR> <div class="mask2" onclick="javascript:jzk.ui.moveImg(2);"></div><!-- 增加二级遮罩 --></P>
<P> <img id="img3" onclick=""/><BR> <div class="mask1" onclick="javascript:jzk.ui.moveImg(1);"></div><!-- 增加一级遮罩 --></P>
<P> <img id="img4" onclick=""/></P>
<P> <img id="img5" onclick=""/><BR> <div class="mask5" onclick="javascript:jzk.ui.moveImg(-1);"></div><!-- 和mask1一样效果 --></P>
<P> <img id="img6" onclick=""/><BR> <div class="mask6" onclick="javascript:jzk.ui.moveImg(-2);"></div><!-- 和mask2一样效果 --></P>
<P> <img id="img7" onclick=""/><BR> <div class="mask7" onclick="javascript:jzk.ui.moveImg(-3);"></div><!-- 和mask3一样效果 --></P>
<P> <img class="next" src="/UploadFiles/2021-04-02/next.png"> </div><BR> </body><BR></html><BR></P>
<P>css代码如下：</P>
<P> 此处的mask1、2、3.....是覆盖几张照片的一个div，用opacity属性来定义透明度，可以实现一种朦胧感，让外观更加美丽。</P>
<P><U>复制代码</U> 代码如下:<BR>body {width: 1340px;height: 500px;background: url(../images/body_bg.gif) no-repeat;}<BR>#pic_browser {width: 860px;height: 192px; position: relative;margin:130px 106px;}<BR>#pic_browser img{position: absolute;border: none;}</P>
<P>.prev {top:76px;left: 0px; }<BR>#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4;}<BR>#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}<BR>#img3, .mask1 {width: 226px;height: 150px;left: 175px;top: 21px;z-index: 6;}<BR>#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}<BR>#img5, .mask5 {width: 226px;height: 150px;right: 175px;top: 21px;z-index: 6;}<BR>#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index: 5;}<BR>#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index: 4;}<BR>.next {top:76px;right: 0px;}</P>
<P>.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff;position: absolute;}<BR>.mask1, .mask5 {opacity: 0.3;}<BR>.mask2, .mask6 {opacity: 0.5;}<BR>.mask3, .mask7 {opacity: 0.7;}<BR></P>
<P>js代码如下：</P>
<P><U>复制代码</U> 代码如下:<BR>window.onload = function()<BR>{<BR> jzk.app.initImg();<BR>}</P>
<P>var imgArray = new Array();<BR>imgArray[0] = 'images/1.jpg';<BR>imgArray[1] = 'images/2.jpg';<BR>imgArray[2] = 'images/3.jpg';<BR>imgArray[3] = 'images/4.jpg';<BR>imgArray[4] = 'images/5.jpg';<BR>imgArray[5] = 'images/6.jpg';<BR>imgArray[6] = 'images/7.jpg';<BR>var base=0;</P>
<P>var jzk = {}; /*定义命名空间*/</P>
<P>jzk.tools = {};/*分层第一层*/</P>
<P>jzk.ui = {};/*分层第二层*/<BR>jzk.ui.moveImg = function(offset)<BR>{<BR> base= (base-offset);<BR> for(var i = base;i< base +7;i++)/*定义i为数组下标的变量*/<BR> {<BR> var img = document.getElementById('img'+(i-base+1));/*保证img变量为img1、img2、img3...直到img7这7个img元素*/<BR> if(i<0) /*数组下标i<0,说明offset>0，*/<BR> {<BR> img.src =imgArray[imgArray.length+i];<BR> }<BR> else if(i>imgArray.length-1)<BR> {<BR> img.src =imgArray[i-imgArray.length]; <BR> }<BR> else<BR> {<BR> img.src = imgArray[i];<BR> }<BR> }<BR>}</P>
<P>jzk.app = {}; /*分层第三层*/<BR>jzk.app.initImg = function()/*初始化显示图片,也就是调用函数moveImg过程：参数为7，base等于-7，i等于-7，-6，-5，-4，-3,-2,-1这7个值，对应的元素为img1，img2，...img7，所以有：img1=imgArray[-7+7],img2=imgArray[-6+7]....*/<BR>{<BR> jzk.ui.moveImg(7);/*初始参数应该设为：能显示的张数(此处为7)；*/<BR>}<BR>三个文件，属js代码比较难理解，上面我也给出了详细的注释，如果还有谁看了不懂的，可以在下面评论中讨论。<BR></P></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/118220.html" title="初识SmartJS - AOP三剑客">初识SmartJS - AOP三剑客</a></p>
<p>下一篇：<a href="/3g/1/118222.html" title="js 中将多个逗号替换为一个逗号的代码">js 中将多个逗号替换为一个逗号的代码</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>