焦点图片效果

鼠标移到一个元素上,其他元素变黑,显得此元素很亮,鼠标移出,都变成明亮效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery效果</title>
<style type="text/css">
    #box{
        width:800px;
        height: 148px;
        background:black;
    }
    #box img{
        float: left;
    }
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $(‘#box img‘).mouseover(function(){//鼠标移入事件
        $(this).fadeTo(0,1);//0时间透明度为1
        $(this).siblings(‘img‘).fadeTo(0,0.7);//让移入元素的兄弟元素透明度变为0.7,背景颜色为黑色,所以看起来会变暗
    })
    $(‘#box img‘).mouseout(function(){//鼠标移出
        $(this).fadeTo(0,1);//让所有的透明度为1
    })
})

</script>
</head>
<body>
 <div id="box">
     <img src="img2/1.jpg" >
     <img src="img2/2.jpg" >
     <img src="img2/3.jpg" >
     <img src="img2/4.jpg" >
 </div>
</body>
</html>
时间: 2024-08-08 22:07:43

焦点图片效果的相关文章

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

10款响应式 jQuery实现图片效果插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

Flash焦点图片切换代码

焦点flash代码,这次给大家奉献的是Flash焦点图片切换代码,这个效果比较好,大家可以选择合适的自己使用.同时推荐Flash图片切换特效,Flash图片切换效果,Flash图片幻灯片代码,四屏图片切换代码,不间断图片左右滚动代码大家可以看看,个人感觉效果更好. Flash焦点图片切换代码主要功能: 1.可以读取xml设置播放列表 2,可以不使用xml将图片地址直接写网页中直接 3,可以读取swf的动画格式 4,自动适应图片大小health.hljmlyfcyy.com 5,循环播放,自定义自

如何使用myFocus插件制作焦点图效果

焦点图分有:flash焦点图  js焦点图  css焦点图  jQ焦点图(其中jQ焦点图以代码量少,实现功能成为首选): myFocus是一款专注于焦点图制作的js插件: 使用步骤:点击下载——Demo显示打包下载——点击 下载的链接——下载 注:在引用myFocus插件时只需要把下载后myFocus的整个js文件复制到自己的站点的js里即可: js部分: <script type="js/myfocus-2.0.1.min.js" type="text/javascr

jquery点击缩略图切换视频播放的视频切换焦点图效果

一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器,每个缩图对应一个视频片段,视频电影站推荐使用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v

ImageButton单击切换图片效果

转载请标明: http://blog.csdn.net/u012637501 我们平时在使用手机app时,常常会发现当我们按下某个按钮时相应按钮会发生变化,当我们松手时又恢复了原来的样子.或是,当你连续单击同一个按钮,会实现不同的功能.刚开始的时候感觉很神奇,那么现在我们来揭开她的面纱,经过下面的学习我相信你也可以轻轻松松将其拿下! 一.单击效果 首先看下将要实现的效果: Android为实现图片按钮按下的效果有两种方式可以实现:一是增加代码,二配置XML. 1.方式一:增加代码实现 (1)ma

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi