JS当页换图片(分析href所给的信息)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
showPic.js文件
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
JQuery的图片切换效果要漂亮很多:
http://www.cnblogs.com/lhb25/p/50-jquery-plugins-f.html
http://tympanus.net/Development/ImageTransitions/
JS当页换图片(分析href所给的信息)的更多相关文章
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...
- java+js实现完整的图片展示本地目录demo
java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...
- 【js】【图片瀑布流】js瀑布流显示图片20180315
js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...
- JS实现随机背景图片与图片大小变换的效果
经常在网上见一些网站访问一次背景图片改变一次,而且图片的大小不停变换,于是想着自己研究一下. 背景图片可以通过JS的随机数来改变图片的src来实现随机图片,图片的大小变换可以用JS的setInterv ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- js插件---强大的图片裁剪Cropper
js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
- Django加入JS,CSS,图片等外部文件的方法
Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...
随机推荐
- excel weekday
weekday(日期值)=星期几 星期天是1 星期六是7
- rownum浅析
对于 Oracle 的 rownum 问题,非常多资料都说不支持>.>=.=.between...and,仅仅能用以上符号(<.<=.!=),并不是说用>, >=, ...
- CCNA2.0笔记_HSRP
什么是HSRP协议? HSRP也叫热备份路由协议,即第一跳冗余协议,第一跳实际就是网关.从而实现网关的冗余和自动切换.该协议确保了当网络边缘设备或接入链路出现故障时,用户通信能迅速并透明地恢复,并以此 ...
- iOS 给tableView设置contentInset不生效?
给tableView设置contentInset的时候如果tableView中内容比较多,超过一个屏幕,设置的contentInset是生效的,但是呢,如果页面内容比较少,我们会发现设置content ...
- Master Sudoku:Get The Skill
自己做的小游戏 google play store: https://play.google.com/store/apps/details?id=com.ffipp.sodoku app store: ...
- CDH 安装配置指南(Tarball方式)
采用CDH Tarbal方式安装Hadoop集群. 1. 环境组件版本 组件名称 组件版本 用途 jdk 1.8 jdk-8u191-linux-x64 oracle jdk mysql mysql- ...
- linux怎么发邮件
邮箱配置: tail /etc/mail.rc #要写在一行 set from=gb17735517416@163.com smtp=smtp.163.com smtp-auth-user=gb ...
- Check the difficulty of problems - poj 2151 (概率+DP)
有 T(1<T<=1000) 支队伍和 M(0<M<=30) 个题目,已知每支队伍 i 解决每道题目 j 的的概率 p[i][j],现在问:每支队伍至少解决一道题,且解题最多的 ...
- spring boot +mybatis分页查询
这是spring boot集合mybatis的分页查询. pom依赖: <!-- 分页插件 --> <dependency> <groupId>com.github ...
- js控制button
按钮变灰不可用方法:document.getElementById("crop").setAttribute("disabled", true); 按钮可用方法 ...