• 首页
  • ASPCMS
  • DEDECMS
  • DuxCms
  • 工具下载
  • SEO知识
  • WEB前端开发
  • 当前位置:首页 > 工具下载 >
  • 工具下载
  • jquery仿百度图片放大效果

  • 已有 人阅读此文  -  2016.07.22  -  工具下载  -  萤火星

 今天看到一个特效仿百度的,鼠标经过图片变大的特效。感觉挺好的。拿出来看下,顺便学习下jquery。
 先看下html部分:因为太多了我就截一部分,需要全部的去懒人图库找下就可以了。
  jquery仿百度图片放大效果
然后看下css部分:
jquery仿百度图片放大效果
之所以把css也贴出来,是因为有些是用jquery 改变css实现的效果。还有一些css 需要注意的地方。

jquery代码部分:
jquery仿百度图片放大效果
好了。我们分析下.好了我们主要看下jquery.从12行开始:鼠标经过li触发函数。然后增加class=on这个属性。然后我们看下css文件17行:这里没有限制大小。所以就会显示出原来的大小。我们继续14行:定义图片的宽度如果小于190,css的left值为0,如果大于190则是负的宽度的四分之一。这句我实在没看出有什么用来,我删掉之后一样可以。然后下面是个回调函数,就是函数处理完之后调用的函数。回调函数会专门写一篇文章介绍下。回调函数的作用就是调用jquery动画的函数把li的高度设置为120,也就是原来的大小。也就是说鼠标移开还原为原来的大小。并删掉class=on。


如果本篇文章帮到了你,那么,请点击右侧的百度分享,让我们一起帮助更多的朋友!
  • 上一篇:WEB前端调试工具
  • 下一篇:没有了
前端交流群
热门文章
  • 1jquery仿百度图片放大效果
  • 2硕思闪客精灵汉化版
  • 3WEB前端调试工具
  • 4Adobe Dreamweaver CS3简体中文免激活绿色
  • 5wamp5_1.7.4PHP+mysql运行环境
推荐阅读
ASPCMS | DEDECMS | DuxCms | 工具下载 | SEO知识 | WEB前端开发 | 百度地图
萤火星的经验分享!友情赞助!
鲁ICP备15006695号-1