JavaScript图片
<ul>
<li>
<a href="images/666.jpg" title="frist img">frist</a>
</li>
<li>
<a href="images/777.jpg" title="second img">second</a>
</li>
<li>
<a href="images/888.jpg" title="three img">three</a>
</li>
<li>
<a href="images/1111.jpg" title="four img">four</a>
</li>
</ul>
<img id="placeholder" width="500" height="500" src="" title="this is all img show">
要实现点击a元素 替换下面的图片。可以用以下方法实现
function showImg(dom){
var src = dom.getAttribute("href");
var img = document.getElementById("placeholder");
img.setAttribute("src",src);
}
var A = document.getElementsByTagName("a");
for(var i =0;i< A.length;i++){
A[i].onclick = function(){
showImg(this);
return false;
}
}
那么如果我们需要 替换img里面的title属性该怎么办呢?可以通过改写showImg来实现
function showImg(dom){
var text = dom.getAttribute("title");
var src = dom.getAttribute("href");
var img = document.getElementById("placeholder");
img.setAttribute("src",src);
img.setAttribute("title",text);
}
JavaScript图片的更多相关文章
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- javascript图片切换
JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...
- javascript - 图片的幻灯片效果
javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...
- JavaScript 图片与Base64数据互相转换脚本
JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...
- 【荐】JavaScript图片放大技术(放大镜)示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 1、MyBatis框架底层初涉
1.拜年 哈哈,现在是过年了,祝大家新年好. 本来大过年的是不打算碰电脑的,(抢票除外,三疯同学现在还没抢到票,然后突然又延长假期了).现在疫情严重,被堵家里不能出去了.不能为国家做贡献,但是起码不能 ...
- 部署java的spring boot项目(代码外包提供)
部署java后台的spring boot 人脸识别系统的项目 基础环境准备: 硬件:内存4g cpu 4核 硬盘200g 虚拟机 软件:CentOS 7.6 mysql 5.7.26 jdk ...
- PyQt5操作SQLite数据库
1.操作SQLite数据库import sysfrom PyQt5.QtSql import QSqlDatabase,QSqlQueryfrom PyQt5.QtCore import * def ...
- splash-简介及入门
splash 1. splash简介 Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我 ...
- Linux下运行SuperSocket记录
Linux下运行SuperSocket程序步骤 需要将原程序的配置文件中的内容拷贝一份,改名成SuperSocket.SocketService.exe.config1.Linux中运行.Net程 ...
- 吴裕雄 python 神经网络——TensorFlow TFRecord样例程序
import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_dat ...
- js指定范围指定个数的不重复随机数
今天偶然看到的 比如要生成 1-100范围之内的10个不重复随机数,代码就可以这么写 var arr = []; for (var i = 1; i <=100; i++) { arr.push ...
- PCSearch
1.hinstance:GetModuleHandle(NULL) 2.窗口直角: 方法1:在Oncreate函数中添加以下代码,然而这种方法会导致窗口阴影无效 LONG styleValue = : ...
- css不起作用报错:Resource interpreted as Stylesheet but transferred with MIME type text/html
解决:https://blog.csdn.net/sky_cui/article/details/86703706 找了好久........
- php 高级 PHP的垃圾回收机制
PHP可以自动进行内存管理,清楚不再需要的对象.PHP使用了引用计数这种单纯的垃圾回收机制.每个对象都内含一个引用计数器,每个reference链接到对象,计数器加1,当reference离开生存空间 ...