正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

  • 微信公众号
  • 图片漂浮与点击放大

    jingyile·2018-11-05·122 次阅读

    今天在继续完善老师布置的班级网站作业,由于之前正好赶上万圣节,就准备做一个万圣节主题的,虽然现在万圣节已经过了几天了,不过还是把它完善一下吧。大概的效果图如下,鬼当然应该是可以飘来飘去的...

    2018.11.5 - 图片漂浮与点击放大

    首先归纳一下图片漂浮的实现,其实很简单,就是重新定位它的位置,然后让它稍微缓慢一点移动过去而已,注意要设置绝对定位才能生效

    这里用了随机数来确定它将前往的下个位置。

    代码实现:

     

    这里我设置了鼠标点击去触发该事件的发生,也可以通过设置时间让它自己循环执行。

    由于有班级相册这一栏目,预览图在点击时应该被放大,同样很简单,直接把图片长和宽乘以一个常数n放大n倍。

    当第二次点击时恢复原来大小,用一个flag来标记当前状态即可。

    那么如果有多张照片的话就需要修改代码,有很多种方法,我这里把当前触发事件的元素作为参数传递给了bigimg(id)函数,

    这样就可以判断当前点击的是哪张照片了。

    但是这样的话放大一张图片势必会影响其他图片的布局,就会很不美观

    可以通过绝对定位来设置一个用于展览图片的区域,每个图片均在此处放大,结束之后还原其之前的位置。

     

     


    正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

    
    
    查看评论

    Post a new comment

    Post a new comment
    欢迎回来 , [ 修改 ]




    加载中……