一个特帅的展示图片的js+css_javascript技巧-js教程-PHP中文网

一个特帅的展示图片的js+css_javascript技巧

php中文网

发布： 2016-05-16 19:27:21

原创

1406人浏览过

<p>
</p>
<title>CSS+JS控制图片展示</title>
<style>
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 70% 
<P>Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000; PADDING-TOP: 0px; TEXT-
<P>ALIGN: center
}
#outer {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/images/bg-outer.gif) 
<P>repeat-y center top; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 780px; PADDING-
<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>MARGIN: 20px 30px; PADDING-TOP: 0px; POSITION: relative
}
#focus {
 BORDER-RIGHT: #ccc 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 2px solid; 
<P>PADDING-LEFT: 0px; MIN-HEIGHT: 188px; BACKGROUND: url(/images/tile.gif) #eee repeat
<P>-y left top; PADDING-BOTTOM: 10px; MARGIN: 25px 0px 30px; BORDER-LEFT: #ccc 2px 
<P>solid; WIDTH: 100%; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 2px solid; POSITION: 
<P>relative; HEIGHT: 188px
}
#beni {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; 
<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>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>LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; 
<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>function insertAfter(newelement,existingelement) {
 var parentelement = existingelement.parentNode;
 if (parentelement.lastChild == existingelement) {
  return parentelement.appendChild(newelement);
 } else {
  return
 parentelement.insertBefore(newelement,existingelement.nextSibling);
 }
}
<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>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>("'+elementId+'",'+x+','+y+','+inc+')',10);
}
<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><p></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/8919">
                            <img src="https://img.php.cn/upload/webcode/000/000/020/175722660892435.jpg" alt="爱克网络企业网站建设系统 No.090730">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/8919">爱克网络企业网站建设系统 No.090730</a>
                            <p>系统特点：功能简洁实用。目前互联网上最简洁的企业网站建设系统！原创程序代码。非网络一般下载后修改的代码。更安全。速度快！界面模版分离。原创的分离思路，完全不同于其他方式，不一样的简单感受！搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们：介绍企业介绍类信息，可自由添加多个介绍栏目！资讯中心：公司或行业资讯类内容展示。可自由添加多个资讯内容！产品展示：支持类别设置，可添加产品图片</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="爱克网络企业网站建设系统 No.090730">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/8919" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="爱克网络企业网站建设系统 No.090730">
                        </a>
                    </div>
                
<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

Vue.js中利用v-for实现数据分组与卡片式布局的技巧 Vue.js 中使用 v-for 优雅地分组渲染复杂列表数据使用HTML、CSS和JavaScript构建响应式图片轮播图教程 JavaScript构建工具配置优化 JavaScript WebGL三维图形开发