DOM学习之图片库切换效果
- addloadevent(prepareplaceholder())
- addloadevent(prepareGallery())
- //页面加载完时执行函数
- function addloadevent(func) { //参数放入你界面加载完要执行的函数
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = func;
- } else {
- oldonload();
- func();
- }
- }
- // 向后插入元素方法
- function insertAfter(ent,hou) { //第一个参数你要出入的节点,第二参数你要插入谁的后面
- var parer = hou.parentNode; //获取他的父级判断所选的元素是否是最后一个
- if (parer.lastChild == hou) {
- parer.appendChild(ent); //如果是最后一个直接执行appendChild插入到后面
- } else {
- parer.insertBefore(ent, hou.nextSibling); //如果不是则插入到父级的同级的前面
- }
- }
- //插入img 和 p节点设置属性
- function prepareplaceholder() {
- if (!document.createElement) return false;
- if (!document.createTextNode) return false;
- if (!document.getElementById) return false;
- if (!document.getElementById("imagegallery")) return false;
- //创建一个img标签设置属性
- var placeholder = document.createElement("img");
- placeholder.setAttribute("id", "placeholder");
- placeholder.setAttribute("src", "img/200u0l000000d8n8xB0E3_R_550_412.jpg");
- placeholder.setAttribute("alt", "第一张图片");
- //创建一个p标签给他设置属性
- var description = document.createElement("p");
- description.setAttribute("id", "description");
- var desctext = document.createTextNode("第一张图片");
- description.appendChild(desctext);
- // 将创建好的标签插入HTML文档中
- var gallery = document.getElementById("imagegallery");
- insertAfter(placeholder, gallery);
- insertAfter(description, placeholder);
- }
- //给a标签绑定点击事件
- function prepareGallery() {
- if (!document.getElementsByTagName) return false;
- if (!document.getElementById) return false;
- if (!document.getElementById("imagegallery")) return false;
- var galley = document.getElementById("imagegallery");
- var links = galley.getElementsByTagName("a");
- for (var i = 0; i < links.length; i++) {
- links[i].onclick = function() {
- return showPic(this);
- }
- links[i].onkeypress = links[i].onclick;
- }
- }
- //点击后执行的函数
- function showPic(whichpic) {
- if (!document.getElementById("placeholder")) return true;
- var source = whichpic.getAttribute("href");
- var placeholder = document.getElementById("placeholder");
- placeholder.setAttribute("src",source);
- if (!document.getElementById("placeholder")) return false;
- if (whichpic.getAttribute("title")) {
- var text = whichpic.getAttribute("title");
- } else {
- text = "";
- }
- var description = document.getElementById("description");
- //判断P标签中的节点类型 3为文本类型#text 设置文本
- if (description.firstChild.nodeType == 3) {
- description.firstChild.nodeValue = text;
- }
- return false;
- }
HTML代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>图片库效果</title>
- <link rel="stylesheet" type="text/css" href="css/style.css">
- </head>
- <body>
- <h1>点击图片效果</h1>
- <ul id="imagegallery">
- <li>
- <a href="img/200u0l000000d8n8xB0E3_R_550_412.jpg" title="第一张图">
- <img src="img/200u0l000000d8n8xB0E3_R_550_412.jpg" alt="fffd">
- </a>
- </li>
- <li>
- <a href="img/20080o000000f95k889B2_R_550_412.jpg" title="第二张图">
- <img src="img/20080o000000f95k889B2_R_550_412.jpg" alt="bbf">
- </a>
- </li>
- <li>
- <a href="img/200h0d0000006tsrr8195_R_550_412.jpg" title="第三张图">
- <img src="img/200h0d0000006tsrr8195_R_550_412.jpg" alt="fff ">
- </a>
- </li>
- <li>
- <a href="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" title="第四张图">
- <img src="img/4b9185dbdb71431ab128af73baf22ce1_R_550_412.jpg" alt="fff ">
- </a>
- </li>
- </ul>
- <script type="text/javascript" src="js/script.js"></script>
- </body>
- </html>
CSS代码
- h1{
- width: 290px;
- margin: 0 auto;
- height: 60px;
- line-height: 60px;
- text-align: center;
- color: #13af13;
- }
- #imagegallery{
- width: 290px;
- height: 50px;
- margin: 0 auto;
- padding: 5px 0 0 0;
- background-color: #e2e2e2;
- }
- #imagegallery li{
- float: left;
- width: 60px;
- list-style: none;
- margin-left: 10px;
- }
- #imagegallery img ,#imagegallery a{
- text-decoration: none;
- font-style: normal;
- display: block;
- width: 100%;
- }
- #placeholder{
- display: block;
- border: 4px solid #13af13;
- width: 282px;
- margin: 0 auto;
- }
- p{
- text-align: center;
- }
DOM学习之图片库切换效果的更多相关文章
- iOS 视图控制器转场动画/页面切换效果/跳转动画 学习
一 学习 在 UINavigationController 中 push 和 pop 的转场效果 (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimation: ...
- 【转】 Pro Android学习笔记(四二):Fragment(7):切换效果
目录(?)[-] 利用setTransition 利用setCustomAnimations 通过ObjectAnimator自定义动态效果 程序代码的编写 利用fragment transactio ...
- weui 多网页切换效果分析
weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...
- 极富创意的3D文件夹切换效果
今天分享的是一个极富创意的文件夹切换效果.这个案例使用CSS 3动画实现了一个3D的平行六面体旋转效果.点击顶部的3个按钮可以旋转并切换.另外,每个六面体本身是一个文件夹,点击后可以展开查看里面的详情 ...
- 巧用ViewPager 打造不一样的广告轮播切换效果
一.概述 如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item ...
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行
这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...
- Android 自定义 ViewPager 打造千变万化的图片切换效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主 ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
随机推荐
- getAttribute for IE7
getAttribute 大部分介绍都说仅仅有一个.包含w3cschool. 事实上这种方法在iE7下有两个參数. msdn 上查到的. 简单翻一下 0 是默认情况,不区分大写和小写! 1 区分大写和 ...
- Cocos2d-X开发中国象棋《三》開始场景的实现
在前面两节(第一节.第二节)中介绍了中国象棋的功能和project文件.在这篇博客中将介绍中国象棋的開始场景的实现 在写代码前先理清一下实现開始场景的思路: 1.打开游戏后进入開始场景,场景上显示一个 ...
- ORACLE-017:SQL优化-is not null和nvl
今天在优化一段sql,原脚本大致例如以下: select a.字段n from tab_a a where a.字段2 is not null; a.字段2添加了索引的,可是查询速度很慢. 于是做了例 ...
- 在Twitter信息流中大规模应用深度学习——推文的相关度计算使用了深度学习
我们如何对信息流进行排序? 在引入排序算法之前,信息流的组成非常简单:收集所有由你的关注对象在你最后一次登录Twitter之后发送的推文,再将它们按照时间倒序显示出来.这个看起来很简单,但要为数以亿计 ...
- SpringMVC使用POST方法传递数据,却出现Request method 'GET' not supported?
转自:https://segmentfault.com/q/1010000011245770 问题:没有使用get获取当前页面解决方案: @RequestMapping(value = " ...
- 截取字符(substr)检索字符位置(instr)
1.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串注释: string 元字符串start_position 开始位置(从0开始)length 可 ...
- MySQL-基础操作之增删改查
1.增 (1)创建数据库dks create database dks; (2)创建名为t1的表,并指定引擎和字符集: ) not null,ages int) engine=innodb defau ...
- Unity5.3.6升级到Unity5.4.4 NGUI出现Ignoring menu item NGUI because it is in no submenu!问题解决方案
目录Assets/Plugins/NGUI/Scripts/Editor/NGUIMenu.cs文件中找到下图(左)所示,改成(右)图所示
- 5.29 @Value{name}无效时怎么办Could not resolve placeholder ‘name22’ in value “${name22}” 错误解决
springboot Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder ‘name22’ in ...
- C# 怎么把类文件如(XXX.cs)转为dll文件
打开VS2012或2017 ,新建项目,选择 类库(.NET Framework),创建好一个项目 在建好的项目中添加需要转的类文件 然后将项目重新生成后,在项目的Debug下就可以找到对应的dll ...