在jquery中怎样使图片变大变小

html+jquery

代码编纂器:Dreamweaver CS5

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于讲解在jquery中如何使图片变大变小。

    6f061d950a7b02080802aa826dd9f2d3562cc88e.jpg
  2. 2

    在test.html文件中,利用img标签建立一张图片,并设置其class为myimg,本家儿要用于下面经由过程该class获得图片对象。

    1c950a7b02087bf47e27c28afdd3572c10dfcf8e.jpg
  3. 3

    在test.html文件内,利用button标签建立两个按钮,按钮名称为“使图片变大”和“使图片变小”。

    18d8bc3eb13533fa8254064da7d3fd1f40345bf6.jpg
  4. 4

    在test.html文件中,给button按钮别离绑心猿意马onclick点击事务,当按钮被点击时,别离执行up()函数和down()函数。

    21a4462309f7905216c1d25d03f3d7ca7acbd5f3.jpg
  5. 5

    在js标签中,利用width()方式和height()方式别离获得图片的宽度和高度,将它们别离保留在w变量和h变量中。

    6d81800a19d8bc3e4feb93a98d8ba61ea9d345f6.jpg
  6. 6

    在js标签中,别离建立up()函数和down()函数,在函数内,别离利用$符号,经由过程类名myimg获得img图片对象,然后利用css()方式别离对图片的width(宽度)和height(高度)进行设置,实现图片的放大和缩小,代码如下:

    0bd162d9f2d3572c692909bf8513632763d0c38e.jpg
  7. 7

    在浏览器打开test.html文件,别离点击按钮,查看实现的结果。

    b03533fa828ba61eaa0c5d4c4e34970a314e59f6.jpg 562c11dfa9ec8a1318d1c283f803918fa1ecc08e.jpg f3d3572c11dfa9ecf0e5c3746dd0f703908fc18e.jpg
  • 发表于 2019-12-08 21:04
  • 阅读 ( 703 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具