有很多的图片网站中有这样的一种效果:鼠标划过某个元素的时候,与他同级的其他元素的透明度会降低,突出显示这个元素,比如聚美优品的网站就多少用到了这个特效,效果图如下:

不多说,干货代码如下:

html部分:

css部分:

javascript部分:

太原雅辉装修公司的网站为了更好的优化,没有用js特效,并不是说js影响优化,而是网站一切操作都要满足用户需求,做好用户体验。太原雅辉装修公司的首页banner部分以后还有别的用处,就没有做轮播效果!

技术支持

<a href="http://www.0351zhuangxiu.com">太原装修网</a>

利用fadeTo改变元素的不透明度代码的更多相关文章

  1. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  2. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  3. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  4. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  5. selenium用jquery改变元素属性

    一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...

  6. 利用 Babel 玩转你的代码

    我在团队帮助开发 Node 工具时,遇到了需要对多份相似的代码进行一定的处理,但又不能改变原本仓库的代码,这个非常像我们的编译工具做的事情.在一开始的时候,参考了类似 FIS 的功能,简单参照使用代码 ...

  7. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  8. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  9. 利用Python进行异常值分析实例代码

    利用Python进行异常值分析实例代码 异常值是指样本中的个别值,也称为离群点,其数值明显偏离其余的观测值.常用检测方法3σ原则和箱型图.其中,3σ原则只适用服从正态分布的数据.在3σ原则下,异常值被 ...

随机推荐

  1. ajax基础------备忘

    1:register.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  2. 九十三:CMS系统之cms后台登录功能

    config form from wtforms import Form, StringField, IntegerFieldfrom wtforms.validators import Email, ...

  3. 根据规则去掉List 对象数组中的重复元素

    package container.main; import java.util.ArrayList; import java.util.Comparator; import java.util.Li ...

  4. oracle数据ORA-03113:通信通道的文件到达结尾的简单处理方式

    <ORA-03113:通信通道的文件结尾>错误处理: 出现的主要原因是由于归档日志空间不够了. 解决办法: --以sysdba方式登录 sqlplus / as sysdba --关闭数据 ...

  5. Ubuntu vmware补丁

    获取补丁文件 curl http://pastie.org/pastes/9934018/download -o /tmp/vmnet-3.19.patch 如果无法下载,云盘上取,网址为:http: ...

  6. Linux (Ubuntu)上面安装maven

    1 首先检查linux上是否有maven mvn -v 或者mvn -version 如果没有安装,提示如下: ubuntu@ip----:~$ mvn -v The program 'mvn' ca ...

  7. 如何查看linux系统安装时间

    第一种方法: 先查看系统盘挂到哪个分区上,然后用 dumpe2fs  查看这个磁盘分区 创建的时间,即可查出此 服务器 系统安装的时间.() # dumpe2fs /dev/sda3|grep -i ...

  8. 《JAVA语言》课问题汇总

    一.阅读相应教材,或者使用互联网搜索引擎,弄清楚反码.补码跟原码这几个概念,然后编写示例程序,对正数.负数进行各种位操作,观察输出结果,与手工计算的结果进行比对,看看Java中的数是采用上述哪种码表示 ...

  9. 【VS开发】【Live555-rtsp】RTSP服务器实例live555源代码分析

    原文地址:RTSP服务器实例live555源代码分析作者:mozheer 1. RTSP连接的建立过程 RTSPServer类用于构建一个RTSP服务器,该类同时在其内部定义了一个RTSPClient ...

  10. C#枚举扩展方法,获取枚举值的描述值以及获取一个枚举类下面所有的元素

    /// <summary> /// 枚举扩展方法 /// </summary> public static class EnumExtension { private stat ...