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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python collections模块的使用
2020/10/16 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
社区工作者演讲稿
2014/05/23 职场文书
初级党校心得体会
2014/09/11 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
python pygame入门教程
2021/06/01 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
vue ref如何获取子组件属性值
2022/03/31 Vue.js