seo博客分享:网站设计之横向相册效果代码

网站建设 seo教程 1056℃ 0评论
《seo博客分享:网站设计之横向相册效果代码》由【张国维seo】于2018年02月10日整理发布!

相信很多网站设计的时候都会运用到横向相册效果一样的幻灯片,这样可以美化网站,让访客印象(feelings)深刻(如图),那么网站设计如何加上这样的相册效果呢?其实很简单,只要把代码(code)复制到要放到的图层即可。

网站设计之横向相册效果代码

代码(code)如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ” transitional.dtd”> <html xmlns=””> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <TITLE(标题)>无标题文档</TITLE(标题)> </head> <body> <title></title> <style> body {background:#000;margin:0;font:12px Verdana;text-align:center;} #tbody {width:650px;margin:20px auto;text-align:left;} #mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px} #mainphoto {cursor:pointer;display:block;} #goleft {float:left;clear:left;margin:6px 5px 0 3px;} #goright {float:right;clear:right;margin:6px 3px 0 5px;} #photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;} #showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222} .txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;} </style> <body> <br id=”tbody”> <br id=”mainbody”> <img src=”1524244292-1.jpg” width=”640″ height=”400″ id=”mainphoto” rel=”1524244292-1.jpg” name=”” /> </br> <img src=”left.jpg” width=”11″ height=”56″ id=”goleft” /> //需要更换图片地址 <img src=”right.jpg” width=”11″ height=”56″ id=”goright” /> //需要更换图片地址 <br id=”photos”> <br id=”showArea”> <!– SRC: 缩略图地址 REL: 大图地址 NAME: 网址 –> <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”1524244292-1.jpg” name=”” /> <img src=”b292d0d05ebaa2fa572c8491.jpg” width=”80″ height=”50″ rel=”b292d0d05ebaa2fa572c8491.jpg” name=”” /> //需要更换图片地址 <img src=”942ef5261aebfd3f918f9dd2.jpg” width=”80″ height=”50″ rel=”942ef5261aebfd3f918f9dd2.jpg” name=”” /> //需要更换图片地址 <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”1524244292-1.jpg” name=”” /> //需要更换图片地址 <img src=”b292d0d05ebaa2fa572c8491.jpg” width=”80″ height=”50″ rel=”b292d0d05ebaa2fa572c8491.jpg” name=”” /> //需要更换图片地址 <img src=”334fbeadd6d1bfc1faed500d.jpg” width=”80″ height=”50″ rel=”334fbeadd6d1bfc1faed500d.jpg” name=”” /> //需要更换图片地址 <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”1524244292-1.jpg” name=”” /> //需要更换图片地址 <img src=”b292d0d05ebaa2fa572c8491.jpg” width=”80″ height=”50″ rel=”b292d0d05ebaa2fa572c8491.jpg” name=”” /> //需要更换图片地址 <img src=”d772613c17a6a5d43d6d9792.jpg” width=”80″ height=”50″ rel=”d772613c17a6a5d43d6d9792.jpg” name=”” /> //需要更换图片地址 <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”/1524244292-1.jpg” name=”” /> //需要更换图片地址 <img src=”b292d0d05ebaa2fa572c8491.jpg” width=”80″ height=”50″ rel=”b292d0d05ebaa2fa572c8491.jpg” name=”” /> //需要更换图片地址 <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”1524244292-1.jpg” name=”” /> //需要更换图片地址 <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”1524244292-1.jpg” name=”” /> //需要更换图片地址 <img src=”b292d0d05ebaa2fa572c8491.jpg” width=”80″ height=”50″ rel=”b292d0d05ebaa2fa572c8491.jpg” name=”” /> //需要更换图片地址 <img src=”1524244292-1.jpg” width=”80″ height=”50″ rel=”1524244292-1.jpg” name=”” /> //需要更换图片地址 </br> </br> </br> </body> </html> <script language=”javascript” type=”text/javascript”> var browse = window.navigator.appName.toLowerCase(); var MyMar; var speed = 1; //速度,越大越慢 var spec = 1; //每次滚动的间距, 越大滚动越快 var minOpa = 50; //滤镜最小值 var maxOpa = 100; //滤镜最大值 var spa = 2; //缩略图区域补充数值(numerical value) var w = 0; spec = (browse.indexOf(“microsoft”) > -1) ? spec : ((browse.indexOf(“opera”) > -1) ? spec*10 : spec*20); function $(e) {return document.getElementById(e);} function goleft() {$(‘photos’).scrollLeft -= spec;} function goright() {$(‘photos’).scrollLeft += spec;} function setOpacity(e, n) { if (browse.indexOf(“microsoft”) > -1) e.style.filter = ‘alpha(opacity=’ + n + ‘)’; else e.style.opacity = n/100; } $(‘goleft’).style.cursor = ‘pointer’; $(‘goright’).style.cursor = ‘pointer’; $(‘mainphoto’).onmouSEO(搜索引擎优化)ver = function() {setOpacity(this, maxOpa);} $(‘mainphoto’).onmouSEO(搜索引擎优化)UT(出局) = function() {setOpacity(this, minOpa);} $(‘mainphoto’).onclick = function() {location = this.getAttribute(‘name’);} $(‘goleft’).onmouseover = function() {this.src = ‘left2.jpg’; MyMar=setInterval(goleft, speed);} $(‘goleft’).onmouseOUT(出局) = function() {this.src = ‘left.jpg’; clearInterval(MyMar);} $(‘goright’).onmouseover = function() {this.src = ‘right2.jpg’; MyMar=setInterval(goright,speed);} $(‘goright’).onmouseOUT(出局) = function() {this.src = ‘right.jpg’; clearInterval(MyMar);} window.onload = function() { setOpacity($(‘mainphoto’), minOpa); var rHtml = ”; var p = $(‘showArea’).getElementsByTagName(‘img’); for (var i=0; i<p.length; i++) { w += parseInt(p[i].getAttribute(‘width’)) + spa; setOpacity(p[i], minOpa); p[i].onclick = function() {location = this.getAttribute(‘name’);} p[i].onmouseover = function() { setOpacity(this, maxOpa); $(‘mainphoto’).src = this.getAttribute(‘rel’); $(‘mainphoto’).setAttribute(‘name’, this.getAttribute(‘name’)); setOpacity($(‘mainphoto’), maxOpa); } p[i].onmouseOUT(出局) = function() { setOpacity(this, minOpa); setOpacity($(‘mainphoto’), minOpa); } rHtml += ‘<img src=”‘ + p[i].getAttribute(‘rel’) + ‘” width=”0″ height=”0″ alt=”” />’; } $(‘showArea’).style.width = parseInt(w) + ‘px’; var rLoad = document.createElement(“br”); $(‘photos’).appendChild(rLoad); rLoad.style.width = “1px”; rLoad.style.height = “1px”; rLoad.style.overflow = “hidden”; rLoad.innerHTML = rHtml; } </script> </body> </html>

提示:您可以先修改部分代码(code)再运行

素材图片:网站设计的好看,访问量自然会增多,利用相册的效果可以提高网站设计的视觉效果,更受到客户的亲睐。



转载请注明:张国维seo » seo博客分享:网站设计之横向相册效果代码

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情