`
qishuai
  • 浏览: 39342 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

jQuery仿淘宝商城天猫鼠标移动过去,透明度降低

阅读更多

淘宝商城现在不叫淘宝商城了,天猫,感觉怪怪的,还是依然改不了口啊。

不知道哪天会改成天狗。YY了下。

虽说改名字了,但是里面淘宝商城还是那样,整个页面让我比较感兴趣的是,从引人耳目的flash图片切换到下面,大篇幅的使用鼠标移动到图片上透明度降低周围图片恢复,从而图片鼠标移至的图片。

作为前端开发其实实现这个效果很容易,主要在css样式中加个opacity: 0.70;XImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=70);filter:alpha(opacity=70);

然后javascript,我用的是jquery那更简单了hover就可以了,大体思路是鼠标移动过去增加一个样式,移除的话样式清除。http://www.jqueryba.com/22.html

闲话不多说了,不早了,该睡觉了。

在线效果DEMO

分享到:
评论

相关推荐

    jQuery版仿淘宝商城天猫首页.rar

    《jQuery版仿淘宝商城天猫首页》是一个基于jQuery技术实现的前端项目,旨在为开发者提供一个简单易用的模板,用于创建类似淘宝商城天猫首页的网页布局和交互效果。这个项目的特点在于,它只需要引入jQuery库就能运行...

    Jquery实现仿淘宝天猫左侧分类导航插件

    在"仿淘宝天猫左侧分类导航插件"中,主要涉及到以下几个jQuery知识点: 1. **DOM操作**:在`demo.html`中,我们需要构建一个包含分类的HTML结构。jQuery提供了方便的API来操作DOM元素,如`$(selector)`用于选择元素...

    基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址:.zip

    基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址:.zip基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址:.zip基于HTML+CSS+JS+JQuery+BootStrap仿天猫官网预览地址:.zip基于HTML+CSS+JS+JQuery+BootStrap...

    jQuery版仿淘宝商城天猫首页多格焦点图效果.zip

    《jQuery版仿淘宝商城天猫首页多格焦点图效果解析》 在网页设计中,动态的、引人注目的视觉元素可以极大地提升用户体验,焦点图或幻灯片展示就是其中一种常用的技术。本教程将深入探讨如何利用jQuery实现一个仿淘宝...

    jquery仿淘宝商城商品详情页图片展示特效.zip

    jquery仿淘宝商城商品详情页图片展示特效, jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 ...

    jquery仿天猫列表

    【jQuery仿天猫列表】是一个基于jQuery技术实现的电商网站菜单导航页面模板,旨在为开发者提供一个便捷、高效的方式来创建类似天猫的用户体验。这个项目主要涵盖了前端网页设计、交互效果以及响应式布局等多个方面,...

    jquery仿淘宝商城幻灯片

    【jQuery仿淘宝商城幻灯片】是一种常见的网页动态效果,用于展示商品或信息,增加网站的视觉吸引力。在淘宝商城的首页,我们经常可以看到这样的功能,它通过滑动图片的方式,展示多张商品图片,同时在鼠标悬停时提供...

    分享仿淘宝天猫商品分类导航Jquery插件

    本篇文章将详细讲解基于jQuery的仿淘宝天猫商品分类导航插件,这是一种高效、灵活的解决方案,能够帮助开发者快速构建具有类似电商巨头淘宝天猫的商品分类导航功能。 首先,"分享仿淘宝天猫商品分类导航Jquery插件...

    jquery仿淘宝商城选择商品尺寸与大小颜色功能.zip

    本示例"jquery仿淘宝商城选择商品尺寸与大小颜色功能"是一个实现此类功能的实践案例,它利用jQuery库来创建一个类似淘宝的商品选择系统,允许用户动态地选择商品的尺寸、颜色,并实时更新商品的价格。 首先,`index...

    jQuery仿淘宝天猫商品数量加减js代码.zip

    《jQuery仿淘宝天猫商品数量加减js代码解析与实践》 在网页开发中,用户交互体验是提升网站质量的关键因素之一。特别是在电商网站上,商品数量的增减功能是购物车模块的重要组成部分,它需要简洁易用且反应迅速。本...

    jQuery仿淘宝天猫商品数量加减js代码

    本示例是关于“jQuery仿淘宝天猫商品数量加减js代码”,它允许用户在购物车中增加或减少商品数量,并且支持小数点后一位的精度,适用于那些需要售卖重量或体积等可量化但非整数的商品。 首先,jQuery是一个轻量级的...

    HTML5 jQuery仿天猫商城加入购物车动画效果.rar

    HTML5 jQuery仿天猫商城加入购物车动画效果,在空白处点击鼠标实现放入购物车效果,模拟出了商品从鼠标单击的地方一路小跑到购物车中的效果,经常逛淘宝的朋友,对这种加入购物车的效果都会很熟悉,本代码仿真的效果...

    jQuery磁性透明图层跟随鼠标移动图片特效

    【jQuery磁性透明图层跟随鼠标移动图片特效】是一种网页交互设计技术,它利用JavaScript库jQuery来实现一种动态效果:当用户在网页上移动鼠标时,一个透明的图层会像具有磁性一样紧随鼠标指针,为用户提供了一种独特...

    jQuery仿淘宝商城购物车结算界面代码

    【jQuery仿淘宝商城购物车结算界面代码】是一个用于构建电子商务网站购物车功能的代码实现,主要特点是具有良好的交互效果和动态计算功能。该代码模仿了淘宝商城的购物车页面,提供用户友好的商品管理与结算体验。...

    jQuery仿天猫完美加入购物车

    在本文中,我们将深入探讨如何使用jQuery来实现一个与天猫类似的购物车功能。这个功能不仅在视觉效果上具有吸引力,而且在用户体验上也相当出色。首先,我们需要理解购物车功能的基本概念,它允许用户选择商品并将其...

    jQuery磁性透明图层跟随鼠标移动图片特效.zip

    《jQuery磁性透明图层跟随鼠标移动图片特效详解》 在网页设计中,动态效果能够提升用户体验,使得网站更加生动有趣。"jQuery磁性透明图层跟随鼠标移动图片特效"是一个巧妙的应用,它通过JavaScript库jQuery实现了一...

    jquery仿天猫左侧导航菜单分类列表

    "jquery仿天猫左侧导航菜单分类列表"就是一个很好的实例,它利用jQuery库来实现类似天猫网站左侧的导航菜单效果。这个项目可以帮助开发者理解如何用JavaScript和jQuery构建动态、响应式的导航结构。 首先,jQuery是...

    jQuery仿天猫固定右侧快捷导航特效代码

    **jQuery仿天猫固定右侧快捷导航特效代码** 在网页设计中,提供一个固定的侧边栏导航是常见的做法,尤其在电商网站中,它能方便用户快速访问各个商品分类或功能区域。"jQuery仿天猫固定右侧快捷导航特效代码"就是...

    jQuery 仿天猫商城导航菜单特效

    在本文中,我们将深入探讨如何使用jQuery来创建一个仿天猫商城的导航菜单特效。这个特效不仅可以提升网站的用户体验,还能使网页的导航更加直观、吸引人。jQuery是一种强大的JavaScript库,它简化了DOM操作、事件...

    jQuery磁性透明图层跟随鼠标移动图片特效.rar

    jQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动图片特效.rarjQuery磁性透明图层跟随鼠标移动...

Global site tag (gtag.js) - Google Analytics