一个特帅的展示图片的js+css

更新时间：2006年08月05日 00:00:00 作者：

<P><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>CSS+JS&#25511;&#21046;&#22270;&#29255;&#23637;&#31034;</TITLE><STYLE>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 70% </P>
<P>Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000; PADDING-TOP: 0px; TEXT-</P>
<P>ALIGN: center}#outer { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/images/bg-outer.gif) </P>
<P>repeat-y center top; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 780px; PADDING-</P>
<P>TOP: 0px; TEXT-ALIGN: left}#wrapper { BACKGROUND: #fff; MARGIN: 0px 4px}#content { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 400px; PADDING-BOTTOM: 20px; </P>
<P>MARGIN: 20px 30px; PADDING-TOP: 0px; POSITION: relative}#focus { BORDER-RIGHT: #ccc 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 2px solid; </P>
<P>PADDING-LEFT: 0px; MIN-HEIGHT: 188px; BACKGROUND: url(/images/tile.gif) #eee repeat</P>
<P>-y left top; PADDING-BOTTOM: 10px; MARGIN: 25px 0px 30px; BORDER-LEFT: #ccc 2px </P>
<P>solid; WIDTH: 100%; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 2px solid; POSITION: </P>
<P>relative; HEIGHT: 188px}#beni { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; </P>
<P>WIDTH: 250px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 15px}#beni LI { BORDER-TOP: #fff 1px solid; FONT-SIZE: 12px; FLOAT: left; WIDTH: 250px; TEXT-</P>
<P>INDENT: 24px; LINE-HEIGHT: 26px}#beni LI.first { BORDER-TOP: 0px}#beni LI A { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; PADDING-</P>
<P>LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; </P>
<P>BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none}#beni LI A:hover { BACKGROUND: #f9f9f9}</STYLE><SCRIPT type="text/javascript">function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') {  window.onload = func; } else {  window.onload = function() {  oldonload();  func();  } }}</P>
<P>function insertAfter(newelement,existingelement) { var parentelement = existingelement.parentNode; if (parentelement.lastChild == existingelement) {  return parentelement.appendChild(newelement); } else {  return parentelement.insertBefore(newelement,existingelement.nextSibling); }}</P>
<P>function makeSlideshow(details,coords,linkholder) { if (!document.getElementById) return false; if (!document.getElementById(linkholder)) return false; var pane = document.createElement('div'); pane.style.width = details['width']; pane.style.height = details['height']; pane.style.overflow = 'hidden'; //pane.className = 'descrizione'; pane.style.position = 'relative'; pane.style.top = '0px'; pane.style.left = '270px'; pane.setAttribute('id','descrizione'); var pic = document.createElement('img'); pic.setAttribute('id',details['id']); pic.setAttribute('src',details['image']); pic.setAttribute('alt',''); pic.style.position = 'absolute'; pane.appendChild(pic); var l_beni = document.getElementById(linkholder); l_beni.parentNode.insertBefore(pane,l_beni); var lnks = l_beni.getElementsByTagName('a'); for (var i=0;i<lnks.length;i++) {  var linktext = lnks[i].childNodes[0].nodeValue;  if (coords[linktext]) {   lnks[i].elementId = details['id'];   lnks[i].x = coords[linktext][0];   lnks[i].y = coords[linktext][1];   lnks[i].sliding = null;   lnks[i].onmouseover = function() {    slideElement(this.elementId,this.x,this.y,6);   }   lnks[i].onfocus = lnks[i].onmouseover;  } }}</P>
<P>function slideElement(elementId,x,y,inc) { if (!document.getElementById) return false; if (!document.getElementById(elementId)) return false; var element = document.getElementById(elementId); if (element.sliding) clearTimeout(element.sliding); if (!element.xpos) element.xpos = 0; if (!element.ypos) element.ypos = 0; if (element.xpos == x && element.ypos == y) return true; if (element.xpos > x) {  var dist = Math.ceil((element.xpos-x)/inc);  element.xpos = element.xpos - dist; } if (element.xpos < x) {  var dist = Math.ceil((x-element.xpos)/inc);  element.xpos = element.xpos + dist; } if (element.ypos > y) {  var dist = Math.ceil((element.ypos-y)/inc);  element.ypos = element.ypos - dist; } if (element.ypos < y) {  var dist = Math.ceil((y-element.ypos)/inc);  element.ypos = element.ypos + dist; } element.style.left = element.xpos+'px'; element.style.top = element.ypos+'px'; element.sliding = setTimeout('slideElement</P>
<P>("'+elementId+'",'+x+','+y+','+inc+')',10);}</P>
<P>/* Focus Beni */addLoadEvent(showbeni);function showbeni() { if (!document.getElementById) return false; if (!document.getElementById('beni')) return false; var panel_details = new Array(); panel_details['id'] = 'pic'; panel_details['image'] = 'http://www.mhcy.net/html/css+js_photo/images/focus.jpg'; panel_details['width'] = '420px'; panel_details['height'] = '188px'; var coords = new Array(); coords['default'] = new Array(0,0); coords['Opere e oggetti d\'arte'] = new Array(0,-188); coords['Architetture'] = new Array(0, -376); coords['Reperti archeologici'] = new Array(0,-564); coords['Stampe e matrici di incisione'] = new Array(0,-752); coords['Fotografie'] = new Array(0,-940); coords['Beni etnoantropologici'] = new Array(0,-1128); var linkholder = 'beni'; makeSlideshow(panel_details,coords,linkholder);}</SCRIPT></HEAD></P>
<P><BODY id=home><DIV id=outer><DIV id=wrapper>   <DIV id=content>  <DIV id=focus>   <UL id=beni>     <LI class=first><A href="#">Opere e oggetti d'arte</A></LI>     <LI><A href="#">Architetture</A></LI>     <LI><A href="#">Reperti archeologici</A></LI>     <LI><A href="#">Stampe e matrici di incisione</A></LI>     <LI><A href="#">Fotografie</A></LI>     <LI><A href="#">Beni etnoantropologici</A></LI>   </UL>  </DIV> </DIV></DIV></DIV></BODY></HTML></P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

一个特帅的展示图片的js+css

Javascript延迟执行实现方法(setTimeout)
延迟执行，其实就是用到了setTimeout这个函数。善于利用这个函数，可以减少很多ajax的请求，以及dom操作。
2010-12-12
BootStrap智能表单实战系列(七)验证的支持
这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面，都涉及到一个数据是否符合要求的检查，需要客服端和服务器端的校验的问题，本文介绍非常详细，具有参考价值，需要的朋友可以参考下
2016-06-06
深入学习JavaScript执行上下文
这篇文章主要介绍了深入学习JavaScript执行上下文,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下，希望对你的学习有所帮助
2022-08-08
JavaScript设计模式之观察者模式与发布订阅模式详解
这篇文章主要介绍了JavaScript设计模式之观察者模式与发布订阅模式,结合实例形式详细分析了JavaScript观察者模式与发布订阅模式相关概念、原理
2020-05-05
javascript 四十条常用技巧大全
本文给大家整理了有关js四十条常用技巧，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
探索Emberjs制作一个简单的Todo应用
使用Emberjs制作一个简单的Todo应用,需要的朋友可以参考下
2012-11-11
浅谈Webpack多页应用HMR卡住问题
这篇文章主要介绍了浅谈Webpack多页应用HMR卡住问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
微信小程序pinker组件使用实现自动相减日期
这篇文章主要介绍了微信小程序pinker组件使用实现自动相减日期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
如何在js代码中消灭for循环实例详解
for循环对大家来说都不陌生，下面这篇文章主要给大家介绍了关于如何在js代码中消灭for循环的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
2018-07-07
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
本文通过断点续传的简单例子（前端文件提交+后端PHP文件接收），本文以图片为实例给大家介绍的非常详细，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧
2016-11-11

一个特帅的展示图片的js+css

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具