在网页上制作图片的时候都会用到特效,当鼠标经过图片时,可以使图片变大,其实在一些网上购物平台上,我们可以看到,当鼠标放在商品上时,商品的图片可能会变大,或者变成商品的其他角度的图片,这其实就是中的特效了,那么网页制作-如何在制作鼠标经过时图片放大效果大家了解吗?下面就跟着爱站技术频道小编的步伐来了解一下吧!

如何制作鼠标经过时图片放大效果

打开dw,先修改一下页面属性,将页面修改为灰色的,适合图片展示

​打开布局属性,我们添加一个apdiv​,用来盛放我们的图片

​将该apdiv设置宽度和高度分别为800和299​,将溢出设置成hidden,这样图片放大以后不会影响整体布局

​接着再添加一个apdiv,设置宽度和高度,位置放在第一个apdiv的中间,如图所示

​接着在插入一个1行5列的表格,用来放置五张照片​,表格宽度设置成100%

​插入五张图片,如图所示,这样就形成了一个基本的图片展示栏​,接着要做图片经过的时候的放大效果。

​选择一个图片,在属性栏,给其添加一个id,比如im1,

​接着给图片添加行为,如图所示,点击添加按钮,打开一个列表,选择【改变属性】​

​打开改变属性的对话框,选择元素类型为img,ID为刚才设置的im1,属性选择【输入】,填写width,这是图片的宽度属性,新的值设置为300

​将触发行为修改为onmouseover,也就是鼠标放到图片上面的时候,就会将图片的宽度改为300​

​接着再添加一个行为,属性设置如图所示,目的是让鼠标放在上面的时候,高度改为150​

​还有两个行为要添加,这里就不讲了,按照上面的方法,目的是当鼠标离开图片的时候,让图片恢复到原来的大小,如图所示:​

​好了,给所有的图片添加这四个行为,这样当鼠标放到上面的时候就看到下面的第一幅图,当鼠标离开的时候就看到下面第二幅图​

以上就是网页制作-如何在制作鼠标经过时图片放大效果,更多内容请继续关注爱站技术频道其它相关文章!

html给图片加个放大效果鼠标经过,网页制作-如何在制作鼠标经过时图片放大效果...相关推荐

  1. c语言给bmp图片加滤镜,关于BMP位图透明通道的详解制作教程, 教你输出透明的BMP位图...

    我是sjmhiex啊月谢谢大家的支持  百度贴吧:sjmhiex吧 QQ群:243153684 BMP支持透明比较常见的方法有两种: 一种是32位图,直接就可以是透明的,还可以是半透明效果,一般都是用 ...

  2. 本地html图片载入很慢,打开网页时图片加载很慢怎么办?网页图片打开慢的解决方法...

    打开网页里的图片很慢怎么办,电脑打开带图片的网页速度很慢的原因有网速的原因也有电脑配置和软件设置的因素. 电脑打开带图片的网页速度很慢是什么原因 清理影响网页打开速度的因素 cookies,开始-控制 ...

  3. 图片加载框架之UIL

    1. 功能介绍 1.1 Android Universal Image Loader Android Universal Image Loader 是一个强大的.可高度定制的图片缓存,本文简称为UIL ...

  4. Picasso图片加载框架的使用

    Picasso图片加载框架的使用 Android 中有几个比较有名的图片加载框架,Universal ImageLoader.Picasso.Glide和Fresco.它们各有优点,以前一直用的是Im ...

  5. Fresco图片加载工具

    原文链接:http://www.fresco-cn.org/ 关于 Fresco Fresco 是一个强大的图片加载组件. Fresco 中设计有一个叫做 image pipeline 的模块.它负责 ...

  6. Android平滑图片加载和缓存库Glide使用详解

    在图片加载库烂大街的今天,选择一个适合自己使用的图片加载库已经成为了每一个Android开发者的必经之路.现在市面上知名的图片加载库有UIL,Picasso,Volley ImageLoader,Fr ...

  7. 图片加载框架之Fresco

    Fresco图片框架简介及使用 Fresco是FaceBook退出了一个Android开源图片管理框架,它提供了图片下载.渐进式加载.内存管理等功能,很大程度上把程序员从繁琐的图片管理工作中解放了出来 ...

  8. Android 强大的图片加载缓存— Glide

    在图片加载库烂大街的今天,选择一个适合自己使用的图片加载库已经成为了每一个Android开发者的必经之路.现在市面上知名的图片加载库有UIL,Picasso,Volley ImageLoader,Fr ...

  9. 从UIL库谈Android图片加载中需要注意的事情

    Android Universal Image Loader 算是Android中最流行的图片加载库了,作者Sergey的确牛逼,能将整个Android图片加载的点点滴滴考虑的如此全面.网上研究这个开 ...

  10. 图片加水印的简单方法

    图片加水印的简单方法~许多小伙伴都习惯在需要对外发布的图片上添加水印,添加水印后就不必担心图片被盗用或被用于其它不良目的,给我们造成不好的影响.然而,许多用户不知道如何为图片添加水印,也不知道应该选择 ...

最新文章

  1. 彩图完美解释:麦克斯韦方程组
  2. 数据库生存曲线_WGCNA、生存分析、ROC共同筛选biomarker
  3. 【Spring注解系列02】@CompentScan与@CompentScans
  4. 百度地图上进行空间插值---反距离加权法
  5. git 在 A 项目中引用 B 项目
  6. WCF学习笔记之序列化
  7. 一台服务器的黑道生涯之八 谁信任谁
  8. ListView缓存机制踩过的坑
  9. 天地图专题六:复杂操作,天地图上标注点的连线以及模拟点击事件
  10. 【回顾】推荐系统工程师技能树
  11. es java bulk 导入数据一直超时_亿级别记录的mongodb批量导入ElasticSearch的java代码完整实现...
  12. MySQL最好的写的_mysql中写sql的好习惯
  13. 优秀技能经验及对java学习展望
  14. 特殊字符 U+200X/
  15. 微信小程序登陆方式,详细代码步骤如下。
  16. 防爆和本安的概念理解
  17. 方维直播源码无BUG修复最新版!
  18. 计算机网络为何使用分组交换,而不是电路交换
  19. multimodal prompting
  20. 中国56个民族脚本数据

热门文章

  1. 新手教程,网站建设第一步:织梦之家Dede程序的下载和安装
  2. 重构实践——利用配置文件实现设计的高度抽象
  3. Python3 - 补充知识点之HTML 、JavaScript、CSS (第五天)
  4. 2021-07-26 SEO优化_关键词密度设置算法
  5. 移动视频录传-公网对讲APP-MCP常见操作说明
  6. conv2d() received an invalid combination of arguments问题解决
  7. 定时网页截图php,浏览器实现网页定时自动截图
  8. 脸上为什么长痘及处理方式
  9. 【手游】手游行业专业相关知识储备
  10. 当物流行业遇见MongoDB