`
webcode
  • 浏览: 5943691 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Javascript的代码优化--点击文字显示图片

 
阅读更多

1、先来展示效果：


点击GIRL出现相对应的图片。

重点：这样做的原因：

如果把图片放到网页里，就过于庞大，用户要下载的数据量就相当可观了，没有人去愿意等待下载一个页面吧？

所以要创建javascript图片库。

2、HTML代码

<body>
        <h1>LIST</h1>
        <ul>
            <li><a href="img2.jpg" onclick="lister(this); return false;" name="girl" title="Beautiful Girl">GIRL</a></li>
            ...
        </ul>
</body>

3、javascript代码：

<script type="text/javascript">
    function lister(picName){
        var source = picName.getAttribute("href");
        var imger = document.getElementById("imger");
        imger.setAttribute("src",source);
        }
</script>



分享到：
| CSS圆角 无聊的时候画了个丑东西 哈哈
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript实现前端成语点击验证优化

    1.点击时，加上序号显示点击的顺序 2.当验证成功时，不能再点击文字。 主要优化的代码如下 JS部分: //事件委托 var verifyArr = []; var str = null; var timer = null; var a = 0; var idiomBox = document....

    jQuery权威指南-源代码

    5.1　显示与隐藏/125 5.1.1　show()与hide()方法/125 5.1.2　动画效果的show()与hide()方法/126 5.1.3　toggle()方法/128 5.2　滑动/131 5.2.1　slideDown()与slideUp方法/131 5.2.2　slideToggle()方法/134 5.3　...

    lambda-view：自2017年以来用于读取JavaScript代码的新工具

    lambda-view：自2017年以来用于读取JavaScript代码的新工具 lambda-view提供了一种更好的读取JavaScript源代码的方法。 有什么不同？ lambda-view不同于崇高的文字/原子或您以前见过的其他编辑器： 它不是文本编辑...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...

    ExtAspNet_v2.3.2_dll

    -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...

    百度地图点聚合仿地图找房demo优化版本JavaScript

    修改源代码优化聚合点过于庞大，页面‘passive’警告高达数十万造成页面卡顿bug，增加扩展标注点文字，增加当前定位等一系列。可支持移动端h5.

    深度学习(asp)网址导航系统 3.1.2(最新更新完美版)

    ·网站界面模板代码结构优化 ·更换前台分类树 ajax实现 ver2.6.10 ·后台管理增加根据网址搜索网站(感谢感恩的心) ·后台管理模块升级 ·优化网页，避免了现在某些服务商空间屏蔽嵌套页 ·文件归类优化 ·增加转向...

    amis前端低代码框架-其他

    静态展示超出等Form 远端校验显示报错时，可以再次提交Nav 的 mapTree 需要 depthFirstCheckboxes 分组样式优化DateTime-Range下拉增加 popoverClassName 属性，可以自定义弹框的 className； 父级有缩放比时弹框...

    java源码包---java 源码 大量 实例

    util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以...

    超实用的jQuery代码段

    7.24 按顺序淡入图片显示 7.25 检测图片的URL是否有效 7.26 强制显示图片的方法 7.27 实现可拖动显示的图片 第8章 jQuery实现AJAX 8.1 动态加载外部文件 8.2 动态加载外部网页 8.3 加载网页文件内容并传递服务器端...

    JAVA上百实例源码以及开源项目源代码

    util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以...

    JavaScript 炫彩的文字

    炫彩文字，在网页上用一下，会吸引别人的注意力，和CSS不相干，纯粹JavaScript实现的东西，代码不算少，高手在优化一下。

    Js制作点击输入框时默认文字消失的效果

    这个效果听起来复杂，其实做起来却很简单，只要一小段javascript代码即可解决。下?面介绍一下几种效果的代码： 1.点击输入框选中内容的Html代码： &lt;form id="form1" name="form1" method="post" action=""&gt; ...

    MolyX BOARD 2.5.0 RC 简体中文标准版

    加强后台MySQL数据库管理 - 调整ARCHIVE CSS代码 - 修正所有已知BUG，包括BUG所反映的所有问题 - 修正邮件系统发送UTF-8文字兼容性问题 - 更多的代码优化 &lt;br&gt;中国论坛网推荐" src=...

    HTML5 CANVAS游戏开发实战（PDF和源代码）

    4.2.1　图片显示举例 / 84 4.2.2　lbitmapdata对象 / 86 4.2.3　lbitmap对象 / 87 4.3　层的概念 / 88 4.4　使用lgraphics对象绘图 / 90 4.4.1　绘制矩形 / 90 4.4.2　绘制圆 / 91 4.4.3　绘制任意多边形 / 92 4.4.4...

    Monokai-Sublime-Text-Octopress:Octopress的Monokai Sublime文本样式突出显示

    运行OctopressPHP和JavaScript编码器的Sublime文本样式突出显示 基于bdryanovski原来的补丁。 bdryanovski创建了针对日晒语法突出显示的补丁，octopress将其用作基于pygments的语法突出显示工具的前端。 该补丁...

    Java源码包100个设计实例.zip

    Java波浪文字制作方法及源代码.rar Java火影忍者游戏源代码.rar JAVA版Swing星际争霸游戏源代码.rar Java生成密钥的实例 Java电子相册源码.rar Java目录监视器源程序.zip JAVA短信网关平台(值得一看).rar Java绘制...

Magicbox
Global site tag (gtag.js) - Google Analytics