全国咨询热线:18720358503

微信小店小程序_原生JS完成图片翻书效果

类别:企业动态 发布时间:2021-01-12 浏览人次:

原生JS实现图片翻书效果       本文给大家分享一段js代码实现图片翻书效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title JS实现图片翻书效果-懒人图库 /title META http-equiv=imagetoolbar content=no STYLE type=text/css #center { LEFT: 50%; POSITION: absolute; TOP: 50% #DHTMLBOOK { BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px #TXTBOX { FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center .page { OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100% .right { BORDER-RIGHT: #000000 1px solid; LEFT: 50% .turn { BACKGROUND: #000000 .img { WIDTH: 200%; POSITION: absolute; HEIGHT: 100% /STYLE SCRIPT type=text/javascript !-- document.onselectstart = function () { return false; } var nI = 0; var kI = 0; var run = false; function setOpacity(obj,o) { if (o 0) o=0; else if (o 100) o = 100; if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100; function TPR__(p) { P1.style.left = 50-(2.5*p)+"%"; P1.style.width = (2.5*p)+"%"; setOpacity(P1i, .5*p*p); if (p == 20) run = false; function TPR_(p) { debugger P2.style.width = 50-(2.5*p)+"%"; setOpacity(P2i, 100-.5*(p*p)); if (p == 20) { P2i.src = IMGSRC[kI].src; setOpacity(P2i, 100); P2.style.width = "50%"; for(var i=1; i i++) setTimeout("TPR__("+i+")", i*32); function TPR() { if (!run) { run = true; P01i.src = IMGSRC[kI].src; P1.style.width = 0; kI++; if (kI =nI) kI = 0; titLe(kI); P02i.src = IMGSRC[kI].src; P1i.src = IMGSRC[kI].src; for (var i=1; i i++) setTimeout("TPR_("+i+")", i*32); } else setTimeout("TPR()", 100); function TPL__(p) { P2.style.width = (2.5*p)+"%"; setOpacity(P2i, .5*p*p); if (p == 20) run = false; function TPL_(p) { P1.style.left = (2.5*p)+"%"; P1.style.width = 40+(10-2.5*p)+"%"; setOpacity(P1i, 100-.5*(p*p)); if (p == 20) { P1i.src = IMGSRC[kI].src; setOpacity(P1i, 100); P1.style.left = 0; P1.style.width = "50%"; for(var i=1; i i++) setTimeout("TPL__("+i+")", i*32); function TPL() { if (!run) { run = true; P02i.src = IMGSRC[kI].src; P2.style.width = 0; kI--; if (kI 0) kI = nI-1; titLe(kI); P01i.src = IMGSRC[kI].src; P2i.src = IMGSRC[kI].src; for(var i=1; i i++) setTimeout("TPL_("+i+")", i*32); } else setTimeout("TPL()", 100); function titLe(p) { document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt; onload = function() { debugger IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img"); DB = document.getElementById("DHTMLBOOK"); P01 = DB.getElementsByTagName("span")[0]; P01i = P01.getElementsByTagName("img")[0]; P02 = DB.getElementsByTagName("span")[1]; P02i = P02.getElementsByTagName("img")[0]; P1 = DB.getElementsByTagName("span")[2]; P1i = P1.getElementsByTagName("img")[0]; P2 = DB.getElementsByTagName("span")[3]; P2i = P2.getElementsByTagName("img")[0]; nI = IMGSRC.length; P1i.src = IMGSRC[kI].src; P2i.src = IMGSRC[kI].src; titLe(kI); DB.style.visibility = "visible"; //-- /SCRIPT META content="MSHTML 6.00.6000.16809" name=GENERATOR /HEAD BODY DIV id=center DIV id=DHTMLBOOK SPAN "return false;" ondblclick=TPL(); PL(); IMG "page right" onmousedown="return false;" ondblclick=TPR(); PR(); IMG "page turn" onMouseDown="return false;" ondblclick=TPL(); PL(); IMG "page turn right" onmousedown="return false;" ondblclick=TPR(); PR(); IMG "In the early morning he departed." src="down/js/images/.jpg" IMG alt="Believing she had dreamed of the roar of his bike," src="down/js/images/.jpg" IMG alt="she woke up to the sunshine in her eyelids." src="down/js/images/.jpg" /DIV /BODY /HTML

以上所述是小编给大家介绍的原生JS实现图片翻书效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


下一篇:没有了

推荐阅读

微信小店小程序_原生JS完成图片翻书效果

原生态JS完成照片翻开书实际效果 文中给大伙儿共享一段js编码完成照片翻开书实际效果,编码简易易懂,十分非常好,具备参照效仿使用价值,必须的朋友参照一下吧meta http-eq...

2021-01-12
小程序免费制作平台_100行代码了解和分析vue2.0响

100行编码了解和剖析vue2.0响应式构架 根据100行编码协助大伙儿了解和剖析vue2.0响应式构架的有关材料,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下我以前详细...

2021-01-12
如何缩短网站被搜索引擎收录的时间

怎样减少网站被检索模块百度收录的時间:google新网站的百度收录速率是较为快的,一般新网站发布以后,您只必须在好多个权重值高的网站里公布2~3篇推广软文,沒有出现意外的状况...

2021-01-12
互联网时代,你会被淘汰吗?

企业动态性制造行业新闻资讯建网站有关九度角度强烈推荐信息内容 互连网时期,你能淘汰吗? 重要词:自主创新 意识 专业技能 学习培训 消費方式 情商智商 项目投资 互连网 每个人...

2021-01-12
美司法部调查华为,美司法部调查华为,指控比中

重要词:美司法部门部调研华为公司,美司法部门部调研华为公司,控告比zte中兴更比较严重!华为公司:空穴来风 现有 2797 人访问 4月2五日,美国华尔街日报引证知情人人员的信息报导称...

2021-01-12
网站运营者必看之网络营销三部曲

互联网营销推广这一词自问世具有现如今,早已被普遍的运用及其被众多的中小型公司所接纳和认同。发展趋势到如今,实际来讲现有四年上下的時间了(按2012年宣布刚开...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信