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 function、指针及内置对象
Feb 19 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JS hashMap实例详解
May 26 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
Vue路由守卫之路由独享守卫
Sep 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascript 闭包详解
2015/07/02 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
日语专业个人求职信范文
2014/02/02 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
消防安全责任书
2014/04/14 职场文书
岗位说明书范文
2014/05/07 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
个人职业及收入证明
2014/10/13 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书