2022年一些常用的网页特效 .pdf
阴影 这个表格有shadow 阴影。 这个表格有drop shadow 阴影。 图片自动切换javascript 图片轮换 #album position:relative; width:400px; height:300px; border:10px solid #EFEFDA; overflow:hidden; #album dt margin:0; padding:0; width:400px; height:300px; overflow:hidden; #album img border:2px solid #000; #album dd 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 6 页 - - - - - - - - - position:absolute; right:0px; bottom:10px; #album a display:block; float:left; margin-right:10px; width:15px; height:15px; line-height:15px; text-align:center; text-decoration:none; color:#808080; background:transparent url(/jscss/demoimg/200910/o_button.gif) no-repeat -15px 0; #album a:hover ,#album a.hover color:#F8F8F8; background-position:0 0; 123 function imageRotater(id) var cases = , album = document.getElementById(id), images = album.getElementsByTagName(img), links = album.getElementsByTagName(a), dt = album.getElementsByTagName(dt)0, length = images.length, aIndex = 1, aBefore = length; for(var i=0;i length;i+) cases += imagesi.id + :+imagesi.getAttribute(src)+, 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 6 页 - - - - - - - - - images0.style.cssText = position:absolute;top:0;left:0;/修正图片位置错误var tip = document.createElement(dd); tip.style.cssText = position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff; album.insertBefore(tip,dt.nextSibling); if(!+v1) tip.style.color = #369; tip.style.filter = alpha(opacity=67) else tip.style.cssText += background: rgba(164, 173, 183, .65); cases = eval(+cases.replace(/,$/,)+); for(var i=0;i length) aIndex = 1; images0.src = casesprefix+aIndex; tip.innerHTML = imagesaIndex -1.getAttribute(alt); tip.style.bottom = -40px; linksaBefore-1.className = ; linksaIndex-1.className = hover; aBefore = aIndex; aIndex+; move(tip); setTimeout(arguments.callee,1500) ,1500) )() var move = function(el) var begin = parseFloat(el.style.bottom), speed = 1; el.bottom = begin; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 6 页 - - - - - - - - - (function() setTimeout(function() el.style.bottom = el.bottom + speed + px; el.bottom += speed; speed *= 1.5;/ 下一次移动的距离if(el.bottom = 0) el.style.bottom = 0px; else setTimeout(arguments.callee,23); ,25) )() window.onload = function() trydocument.execCommand(BackgroundImageCache, false, true);catch(e); imageRotater(album); 滑动，鼠标放上去停止 图片滚动 !- var speed=10; var tab=document.getElementById(demo); var tab1=document.getElementById(demo1); var tab2=document.getElementById(demo2); tab2.innerHTML=tab1.innerHTML; function Marquee() if(tab2.offsetWidth-tab.scrollLeft JS引用方法 方法一 :将你需要的CSS 文件内容复制下,在你的网页的和 之间加两个标签:, 然后在这两个标签中间粘贴就行,如果是JS,则新建 和, 在其中粘贴JS 文件的内容 . 方法二 :在你网页的 和分别用标签引用两种文件,引用 CSS 文件 : 引用 JS文件 : 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 6 页 - - - - - - - - -
