JavaScript之图片操作2
在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下:
通过点击下面的小图,上面的大图和标题随之切换。因此,我们需要三个容器分别放标题,大图和小图。
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="img/1.jpg" alt="" width="540">
<!--小图列表-->
<ul id="fj">
<li>
<a href="img/1.jpg" title="蒲公英">
<img src="img/1.jpg" width="100" alt="蒲公英">
</a>
</li>
<li>
<a href="img/2.jpg" title="热气球">
<img src="img/2.jpg" width="100" alt="热气球">
</a>
</li>
<li>
<a href="img/3.jpg" title="别致小屋">
<img src="img/3.jpg" width="100" alt="别致小屋">
</a>
</li>
<li>
<a href="img/4.jpg" title="高山湖水">
<img src="img/4.jpg" width="100" alt="高山湖水">
</a>
</li>
<li>
<a href="img/5.jpg" title="高速公路">
<img src="img/5.jpg" width="100" alt="高速公路">
</a>
</li>
</ul>
然后获取相应的标签
var ul = document.getElementById("fj");
var aList = ul.getElementsByTagName("a");
var des = document.getElementById("des");
var big_img = document.getElementById("big_img");
最后,给每一个小图绑定点击事件,当点击到当前元素是,获取当前元素的title和和href字段,并将这两个字段值赋值给相应元素,需要注意的是,我们采用a标签的href来保存图片,但是其默认事件是进行链接跳转,所以在赋值后,需要阻止元素的默认事件。
for(var i=; i<aList.length; i++){
aList[i].onclick = function () {
big_img.src = this.href;
des.innerHTML = this.title;
return false; //阻止默认事件
}
}
到此为止,我们就实现了预期的效果了,完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
} body{
margin: 50px;
} #fj{
list-style: none;
} #fj li{
float: left;
margin-left: 10px;
} #big_img{
margin-left: 10px;
} #des{
margin: 10px;
color: orangered;
font-size: 20px;
}
</style>
</head>
<body>
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="img/1.jpg" alt="" width="540">
<!--小图列表-->
<ul id="fj">
<li>
<a href="img/1.jpg" title="蒲公英">
<img src="img/1.jpg" width="100" alt="蒲公英">
</a>
</li>
<li>
<a href="img/2.jpg" title="热气球">
<img src="img/2.jpg" width="100" alt="热气球">
</a>
</li>
<li>
<a href="img/3.jpg" title="别致小屋">
<img src="img/3.jpg" width="100" alt="别致小屋">
</a>
</li>
<li>
<a href="img/4.jpg" title="高山湖水">
<img src="img/4.jpg" width="100" alt="高山湖水">
</a>
</li>
<li>
<a href="img/5.jpg" title="高速公路">
<img src="img/5.jpg" width="100" alt="高速公路">
</a>
</li>
</ul>
<script>
window.onload = function () {
// 1. 获取需要的标签
var ul = document.getElementById("fj");
var aList = ul.getElementsByTagName("a");
var des = document.getElementById("des");
var big_img = document.getElementById("big_img"); // 2.绑定事件
for(var i=0; i<aList.length; i++){
aList[i].onclick = function () {
big_img.src = this.href;
des.innerHTML = this.title;
return false; //阻止默认事件
}
}
}
</script>
</body>
</html>
完整代码下载链接:点这里
还有一种和这个类似的效果,就是我们在网上购物常常看到的如下效果:
个人觉得实现方式和上面几乎相同,就不详细介绍了,下面贴出详细代码:
JavaScript之图片操作2的更多相关文章
- JavaScript之图片操作7
前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...
- JavaScript之图片操作5
本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...
- JavaScript之图片操作1
在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...
- JavaScript之图片操作6
上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了. 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续. 主要原理是 ...
- JavaScript之图片操作3
在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...
- JavaScript之图片操作4
本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
随机推荐
- TClientDataSet的FileName属性
读取cds文件数据. FileName一定要在设计时输入,否则程序运行时,不会自动读取cds文件. 因为FORM创建时,数据集组件也相应创建,如果是在运行时 设置FileName,那么是在数据集组件创 ...
- 驱动程序多线程 PsCreateSystemThread
内核函数PsCreateSystemThread负责创建新线程.该函数可以创建两种线程,一种是用户线程,它属于当前进程中的线程.另一种是系统线程,系统线程不属于当前用户进程,而是属于系统进程,一般PI ...
- Python3 集合(set)(十五)
集合(set)是一个无序不重复元素的序列. 它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 set和dict类似,也是一组key的集合, ...
- DevExpress v18.1新版亮点——WPF篇(二)
用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress WPF v18.1 的新功能,快来下载试用新版本!点击下载& ...
- iOS开发多线程篇—GCD简介
iOS开发多线程篇—GCD介绍 一.简单介绍 1.什么是GCD? 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 2.GCD的优势 G ...
- Linux Mint KDE上安装fcitx+sougou输入法
今天在韩总废弃的笔记本上安装了Linux Mint系统,装好之后第一件想到的事情就是安装个输入法,由于之前系统自带的输入法框架是ibus,我试用了一下发现很不人性化,所以决定换上fcitx+sougo ...
- 把腾讯云的ubuntu16.04升级到18.04
腾讯云买的服务器也没怎么弄,正好重装一下玩乐了. 1. 重装系统,在腾讯云里先停机,然后重装系统,目前最高是ubuntu16.04.为什么选择Ubuntu?因为,因为习惯吧,之前学习laravel就是 ...
- WebStrom 多项目展示及vuejs插件安装
2. Vuejs 插件安装: ① ②
- 6.1 socket 长连接、短连接
一般情况下,服务器的长连接和短连接不是服务器说了算,而是客户端说了算.因为服务器是给别人提供业务的,一旦连接建立起来之后,服务器端不会主动把连接给close掉. 客户端发送一笔业务,没有关闭连接,然后 ...
- ubuntu vsftpd
With a bit of playing around I've managed to come up with a semi solution (not perfect but good enou ...