这篇文章主要帮助大家轻松实现 JavaScript 图片切换,内容很精简,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
网页看到非常常见的一个图片切换效果:在淘宝、JD 等购物时,介绍产品的图片会有多张,一般是显示一张,底下有一排小图片,鼠标放到小图片上大图片会切换. 参考 vivo X5M 移动 4G 手机 . 下面记录一下实现的过程.
1. getElementById()
该方法是操作 dom 非常常用的一个方法,比如有一 p 标签,id 设为 pid,通过 getElementById("pid") 就可以对该元素进行操作.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- demo
- </title>
- <script type="text/javascript">
- function changeText() {
- document.getElementById("pid").innerHTML = "It works!";
- }
- </script>
- </head>
- <body>
- <p id="pid" onmouseover="changeText()">
- Hello word!
- </p>
- </body>
- </html>
上面代码中在 body 中写了一个 p 标签,id 为 pid,当鼠标放到 p 标签上方的时候触发 onmouseover 事件,执行 changeText() 方法,将 p 标签内的文档改变.
2. setAttribute() 和 getAttribute()
getAttribute() 方法用于获取某一属性的值,setAttribute() 方法用于给某一属性赋值。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- demo
- </title>
- <script type="text/javascript">
- function changeUrl() {
- var baiduurl = document.getElementById("aid");
- baiduurl.getAttribute("href");
- baiduurl.setAttribute("href", "http://www.taobao.com");
- baiduurl.innerHTML = "淘宝";
- }
- </script>
- </head>
- <body>
- <a href="http://www.baidu.com" id="aid" onmouseover="changeUrl()">
- 百度首页
- </a>
- </body>
- </html>
上面代码中,body 中有一个 a 标签,通过 getElementById() 获取 a 标签,baiduurl.getAttribute("href") 的值为默认的 href 属性, 通过 baiduurl.setAttribute("href","http://www.taobao.com") 设置以后,该属性值改变. 完整代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>on</title>
- <style type="text/CSS" media="screen">
- *{
- padding: 0;
- }
- body{
- font-family: 微软雅黑;
- }
- #imgbox{
- width: 320px;
- height: 490px;
- padding: 10px;
- box-shadow: 5px;
- border: 1px solid #ccc;
- border-radius: 10px;
- }
- #phoneimg{
- padding: 10px;
- border-color: 1px solid #cccccc;
- }
- </style>
- </head>
- <body>
- <div id="imgbox">
- <img src="images/phone1.jpg" height="400" width="320" alt="phone" id="phoneimg">
- <p id="decimg">phone image1</p>
- </div>
- <table>
- <tbody>
- <tr>
- <td width="50px">
- <img src="images/phone2.jpg" height="100" width="80" title="phone image2" alt="" onmouseover="changeImg(this)" ></td>
- <td width="50px">
- <img src="images/phone3.jpg" height="100" width="80" title="phone image3" alt=""onmouseover="changeImg(this)" ></td>
- <td width="50px">
- <img src="images/phone4.jpg" height="100" width="80" title="phone image4" alt=""onmouseover="changeImg(this)" ></td>
- <td width="50px">
- <img src="images/phone5.jpg" height="100" width="80" title="phone image5" alt=""onmouseover="changeImg(this)" ></td>
- </tr>
- </tbody>
- </table>
- <script type="text/javascript">
- function changeImg(whichpic){
- var imgattr=whichpic.getAttribute("src");
- var phoneimg=document.getElementById("phoneimg");
- phoneimg.setAttribute("src",imgattr);
- var dectext=whichpic.getAttribute("title");
- document.getElementById("decimg").innerHTML=dectext;
- }
- </script>
- </body>
- </html>
下一步学习一下怎么实现局部放大,大家有什么好的方法吗?可以一起探讨。
来源: http://www.phperz.com/article/17/0406/267602.html