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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JS请求servlet功能示例
Jun 01 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
Javascript如何实现双指控制图片功能
Feb 25 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+ajax简单实现全选删除的方法
2016/12/06 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python机器学习实战之树回归详解
2017/12/20 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
酒店人事专员岗位职责
2015/04/07 职场文书
网吧员工管理制度
2015/08/05 职场文书
推普标语口号大全
2015/12/26 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
python实现批量移动文件
2021/04/05 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS