javascript 实现图片切换，考虑平稳退化与行为结构分离

最近在学习JavaScript DOM编程艺术，跟着学习把里面的一个demo 敲了，demo 是小玩意，但是在编程习惯上给了我很大的启发。

考虑“平稳退化”：如果浏览器不支持或者禁用js之后，依旧保证网页的可用性。

将javascript 分离，js负责用户行为，借鉴css样式与内容分离思路，将js与结构和内容分离开来，增强网页的健壮性。

下面直接show code:思路是点击a标签存放图片与事件，img显示图片,通过点击a标签，触发时间，js将img图片切换成点击的a标签的图片。

HTML+css

</style>

<body>
<ul id="liId">
<li>
<a href="img/01.jpg" title="天堂未必在前方，但地狱一定在身后" >努力</a>
</li>
<li>
<a href="img/02.jpg" title="逝者如斯夫，不舍昼夜">时间</a>
</li>
<li>
<a href="img/03.jpg" title="学如逆水行舟，不进则退" >学习</a>
</li>
<li>
<a href="img/04.jpg" title="珍惜眼前，活在当下" >珍惜</a>
</li>
<li>
<a href="img/05.jpg" title="拿出你的激情" >热爱</a>
</li>
<li><img src="img/06.jpg" id="place" alt="显示图片" style="width: 600px;height: 600px;border: 1px solid gray;" /></li>
<li><p id="des">this is a demo about img change</p></li>
</ul>
<script type="text/javascript" src="js/test.js"></script>
</body>

JS:

window.οnlοad=function(){//页面加载完后执行
check();
}
function check(){
if(!document.getElementById||!document.getElementsByName) return false;//判断浏览器是否支持DOM
if(!document.getElementById("liId"))return false;//判断id值是否存在
var gallry=document.getElementById("liId");
var links=gallry.getElementsByTagName("a");

for (var i=0;i<links.length;i++) {
links[i].οnclick=function(){ //js行为与html结构分离
return showPic(this)?false:true;
}
}
}

function showPic(wichPic){
if(!document.getElementById("place"))return false;
var source=wichPic.getAttribute("href");//获取href
var place=document.getElementById("place");//获取图片id
place.setAttribute("src",source);//替换

if(document.getElementById("des")){
var text=wichPic.getAttribute("title")?wichPic.getAttribute("title"):" ";
var descrip=document.getElementById("des");

descrip.firstChild.nodeValue=text;
return true;
}
}

展示地址：http://runjs.cn/detail/gdmj7rkc

转载于:https://www.cnblogs.com/wxhhts/p/9155091.html

javascript 实现图片切换，考虑平稳退化与行为结构分离相关推荐

怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
JavaScript之图片切换（类似淘宝商品图切换）
JavaScript之图片切换下边给出几种方法进行图片切换: 方法一(小白专用款!简单易懂) 下边附上代码: <!DOCTYPE html> <html lang="en ...
ASP.NET javascript实现图片切换
①Default.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
html实现简单图片切换,JavaScript实现简单的图片切换
JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义 ...
【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
HTML和JavaScript代码分离、平稳退化（1）
使用的编辑器是Hbuilder,浏览器是Chrome. HTML和JavaScript代码分离,会使得修改网页功能和代码的阅读与维护会轻松的许多,不用在DOM中阅读大量的JavaScript代码. 文 ...
javascript 性能 · 平稳退化、渐进增强
浅尝 javascript 平稳退化和渐进增强何为平稳退化?何为渐进增强? 下面举例说明: 例如,有的早期的纯文本浏览器中不支持在html里包含图片,相应是使用alt属性的替代文本. 而现在的浏览器 ...
javascript DOM 编程艺术札记2 平稳退化
定义指的是即便浏览器不支持javascript,页面的基础展示功能也不会受到影响的做法. 不能平稳退化的实例 javascript:这种伪协议,它可以通过链接调用javascript函数.比如< ...
JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

javascript 实现图片切换，考虑平稳退化与行为结构分离

javascript 实现图片切换，考虑平稳退化与行为结构分离相关推荐

最新文章

热门文章