zoukankan      html  css  js  c++  java
  • jquery幻灯片--渐变

    网站上为了设计,需要一些幻灯片效果,现在网站有很多插件可以使用。

    想要成为以为牛逼的程序员,绝对不允许只会用别人的插件而已,不然你只能是“代码”的搬运工,而不敢做出自己的创新。

    首先使用jquery做渐变效果,一般使用fadeOut/fadeIn(渐入渐出)效果。

    但是因为fadeOut/fadeIn在停止效果时,使用stop()会产生不可预估的效果。

    所以在做效果时,使用的方法是animate,通过设定透明度(opacity)来实现效果。因为图片显示在同一个位置,所以存在层叠问题。解决这个问题的方式是通过控制元素的z-index,将想要显示的图片显示。

    创建几个函数

    switch_pic      用于执行图片切换效果。
    auto_switch_pic    通过调用switch_pic函数,实现定时切换页面效果。

    click_trigger      切换图片效果触发器

    技术细节

    定时切换效果和触发切换效果会存在以下冲突

    首先当定时切换还差一秒时,你发动了触发切换,刚放上去,就又自动切换到下一个图片去了。

    解决方式,当鼠标在触发器内时,停止定时切换效果。

  • 相关阅读:
    [CF845G]Shortest Path Problem?
    [洛谷P4149][IOI2011]Race
    [洛谷P4178]Tree
    [AtCoder AGC27A]Candy Distribution Again
    [洛谷P3806]【模板】点分治1
    [洛谷P2634][国家集训队]聪聪可可
    [CF280C]Game on Tree
    [洛谷P3338][ZJOI2014]力
    [CF438D]The Child and Sequence
    [CF609E]Minimum spanning tree for each edge
  • 原文地址:https://www.cnblogs.com/xiashuo-he/p/4561701.html
Copyright © 2011-2022 走看看