jQuery + CSS 实战——典型例子详细教学解析

本文为chenmeiqi原创,转载请标明出处~


1、开关switch实现

效果

如图,实现一开关效果,鼠标点击可切换状态:

思路

  • 两种状态,on和off
  • off时,背景灰色,左边圆深灰色,右边圆与背景同色以实现隐藏
  • on时,背景绿色,右边圆白色,左边圆与背景同色以实现隐藏
  • 初识时状态为off,为整个开关绑定一个click事件,用来toggleClass(交换on和off)

代码 







 

2、list鼠标交互列表(纯CSS实现)

效果

如图,鼠标放上时列表会有颜色、形状的变化

jQuery + CSS 实战——典型例子详细教学解析_第1张图片

思路

  • :hover实现鼠标悬浮
  • :first-child、:last-child选中第一个孩子和最后一个孩子

代码

版本1:



  • 1
    apple
  • 2
    orange
  • 3
    pear

版本2:(flex实现)



  • 1
    apple
  • 2
    orange
  • 3
    pear

 

3、动态交互菜单栏

效果

如图,点击主菜单栏menu item时会展开子菜单栏,并收起其它菜单栏:

jQuery + CSS 实战——典型例子详细教学解析_第2张图片

思路

  • 自定义属性parent
  • 点击添加类active并下拉,同时上滑原有active类
  • .attr获取元素id,[parent=${id}]进行判断,实现点击哪个menu item,就展开它对应的子菜单

代码





 

4、交互动态导航栏

效果

如图,点击的导航栏呈现橙色,并且下方会显示其对应的段落内容;

鼠标悬停的导航栏呈天蓝色;

没有任何操作的导航栏呈浅绿色。jQuery + CSS 实战——典型例子详细教学解析_第3张图片

思路

  • 初始时显示第一段(即设置为active),其它设置为none
  • .hover 设置颜色变化
  • event.preventDefault() 阻止缺省事件
  • .attr获取属性,展现导航栏对应的段落内容,同时隐藏其它段落。

代码 






Harry Potter is a series of seven fantasy novels written by the British author J. K. Rowling. The series, named after the titular character, chronicles the adventures of a young wizard, Harry Potter, and his friends Ronald Weasley and Hermione Granger, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's quest to overcome the Dark wizard Lord Voldemort, who aims to become immortal, conquer the wizarding world, subjugate non-magical people, and destroy all those who stand in his way, especially Harry Potter.
Since the release of the first novel, Harry Potter and the Philosopher's Stone, on 30 June 1997, the books have gained immense popularity, critical acclaim, and commercial success worldwide.[2] The series has also had some share of criticism, including concern for the increasingly dark tone. As of July 2013, the book series had sold between 400 and 450 million copies, making it the best-selling book series in history, and had been translated into 73 languages.[3][4] The last four books consecutively set records as the fastest-selling books in history, with the final instalment selling approximately 11 million copies in the United States within the first twenty-four hours of its release.
A series of many genres, including fantasy, coming of age, and the British school story, (with elements of mystery, thriller, adventure, and romance), it has many cultural meanings and references.[5] According to Rowling, the main theme is death.[6] There are also many other themes in the series, such as prejudice and corruption.[7]

 

5、换肤系统

效果

如图,通过点击“change theme”即可实现换肤。

jQuery + CSS 实战——典型例子详细教学解析_第4张图片

jQuery + CSS 实战——典型例子详细教学解析_第5张图片

思路

  • :root 设置颜色变量
  • 两种主题 .themered, .themeblue 分别设置不同的color1、color2
  •  text-align: justify 设置文字对齐
  • linear-gradient(to bottom,var(--color1) 30%,var(--color2))  设置渐变
  • event.preventDefault() 阻止缺省事件
  • toggleClass 交换两类

代码




    
    
    
    
    


    
    

change theme

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend.

Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.

Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna.

 

6、动画标题效果(纯CSS实现)

效果

如图,当鼠标悬停到左侧圆圈上时,会有动画效果;当鼠标离开时,同样有离开的动画效果。

jQuery + CSS 实战——典型例子详细教学解析_第6张图片

jQuery + CSS 实战——典型例子详细教学解析_第7张图片

思路

  • 同样设置了颜色变量,设置了三种颜色类.red、.blue、.green。注意这种方法,修改时非常方便。
  • fr 表示剩余填充
  • 圆圈position设置为relative,动画出来的横条position设置为absolute,并设置横条相对于圆圈的位置
  • transform-origin: 6rem 2rem  设置横条旋转中心; transform:rotate(-90deg)  设置横条旋转角度
  • opacity设置透明度,初始时其值设为0,即全透明
  • transition: all .6s ease-in-out   动画,渐入渐出
  • boxshadow设置阴影
  • 圆圈同样设置动画(鼠标悬停阴影变化)
  • .c .a:hover+.b   + 号 表示紧邻

代码




    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend.

Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.

Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna.

 

你可能感兴趣的:(jQuery)