js设置局部隐藏(变大与图片的移动)

首页常识js设置局部隐藏更新时间:2022-12-20 13:37:55
  • 显示与隐藏(简单模式)

以Div标签为例,其它标签以此类推进行设置即可

div的显示与隐藏是由CSS中的display属性决定,值为block显示;值为none隐藏

html代码

控制div显示/隐藏:为两个按钮注册单击事件,单击隐藏时div隐藏,单击显示时显示,简单

js代码

  • Div变大与缩小

设置div的width与height的属性

首先获取div自身的宽度与高度,然后增加一个变大或者缩小的变量,使其变大或缩小

js代码

通过dv1.style获取的宽度和高度是字符串还会有px,所以无法与增速变量相加,因此使用parseInt()方法将获取的值转化为数字类型;后面必须加 px否则在谷歌,火狐等浏览器中无法使用,在IE中加与不加均可用

宽度与高度没做判断限制,还可以加上定时器使其自动变大或缩小

  • img图片跟着鼠标走

首先设置div的position属性值为absolute,其次获取鼠标当前位置,最后设置图片的top与left值为鼠标的当前位置

js代码

设置好后的图片就会跟着鼠标在浏览器可视区域内进行移动

,
推荐内容
热门内容