站长资源网络编程
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="http://m.paidiu.com/show/1/118220.html" title="初识SmartJS - AOP三剑客">初识SmartJS - AOP三剑客</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/118222.html" title="js 中将多个逗号替换为一个逗号的代码">js 中将多个逗号替换为一个逗号的代码</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619123.html" one-link-mark="yes" title="群星《奔赴！万人现场 第2期》[FLAC/分轨][518.87MB]"><span>群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619122.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[320K/MP3][43.91MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619121.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FLAC/分轨][140.49MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619120.html" one-link-mark="yes" title="【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]"><span>【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619119.html" one-link-mark="yes" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]"><span>贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619118.html" one-link-mark="yes" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]"><span>小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619117.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]"><span>群星《欢迎来到我身边 电影原声专辑》[320K/MP3</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619116.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]"><span>群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619115.html" one-link-mark="yes" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]"><span>雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619114.html" one-link-mark="yes" title="群星《2024好听新歌42》AI调整音效【WAV分轨】"><span>群星《2024好听新歌42》AI调整音效【WAV分轨】</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/show/1/603498.html"><ul>高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布<br><br>高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。<br>在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。<br>预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。<br>谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。</ul></a></div>
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" 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></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/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>