JS动态图片的实现方法完整示例


Posted in Javascript onJanuary 13, 2020

本文实例讲述了JS动态图片的实现方法。分享给大家供大家参考,具体如下:

<html>
    <head>
        <meta charset="UTF-8">
        <title>js-是动态实现图片显示</title>
        <script type="text/javascript">
//            设置图片的动态效果
            function photoOper(ph,photo){
//                获取图片对象
//                var ph=document.getElementById(id); //可以通过id获得,但是没必要,我们可以直接使用this直接把对象传过来
                ph.style.border="solid 1px";   //我们是重新赋值,所以我们要用=赋值符,而不是:各个是属性说明
//                在大屏块显示
                big.src=photo;     //传过来的数据就已经是一个字符串类型了,虽然我们src的值需要是字符串,但是如果再加一个""就会导致路径不明,这样其实际图片名相当于带了""
            }               //src是big的属性的是不是样式属性,可以直接调用修改,不用加style
            function photoOper2(ph){
                ph.style.border="";    //移出后边框值没
            }
        </script>
        <style type="text/css">
            #showdiv{
                width: 500px;
                height: 440px;
                border: solid 1px;
                border-radius: 15px;
            }
            #ta{
                margin: auto;
                margin-top: 10px;
                margin-left: 10x;
            }
            img{
                margin-left: 3px;
            }
        </style>
    </head>
    <body>
        <div id="showdiv">
            <table id="ta">
                <tr>
                    <td colspan="4" width="490px" height="344px"><img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" width="490px" id="big"/></td>
                </tr>
                <tr>
                    <td height="68px"><img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" height="65px" id="p1" onmousemove="photoOper(this,'http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg')" onmouseout="photoOper2(this)"/></td>
                    <td><img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" height="65px" onmousemove="photoOper(this,'http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg')" onmouseout="photoOper2(this)" /></td>
                    <td><img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" height="65px" onmousemove="photoOper(this,'http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg')" onmouseout="photoOper2(this)"/></td>
                    <td><img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" height="65px" onmousemove="photoOper(this,'http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg')" onmouseout="photoOper2(this)"/></td>
                </tr>
            </table>
        </div>
    </body>
</html>

运行效果:

JS动态图片的实现方法完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
vue实现单选和多选功能
Aug 11 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
js实现拖动缓动效果
Jan 13 #Javascript
Vue.js中的高级面试题及答案
Jan 13 #Javascript
深入理解redux之compose的具体应用
Jan 12 #Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 #Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 #Javascript
ES2020 新特性(种草)
Jan 12 #Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
laravel自定义分页效果
2017/07/23 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解python中TCP协议中的粘包问题
2019/03/22 Python
Django接收自定义http header过程详解
2019/08/23 Python
超实用的 30 段 Python 案例
2019/10/10 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python中if及if-else如何使用
2020/06/02 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
公司总经理任命书
2014/06/05 职场文书
微电影大赛策划方案
2014/06/05 职场文书
英文自荐信范文
2015/03/25 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
python井字棋游戏实现人机对战
2022/04/28 Python