jQuery仿京东图片变亮变暗效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿京东图片变亮变暗效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery仿京东图片变亮变暗效果，属于站长常用代码" />
<title>jQuery仿京东图片变亮变暗效果</title>
<link  href=" css/lrtk.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="box">
   <div class="one">
      <div class="top">
        <div class="text">
         商品说明
        </div>
        <div class="img">
         <img src="images/small.jpg"/>
         </div>
        </div>
        
        <div class="top">
        <div class="text">
         商品说明
        </div>
        <div class="img">
         <img src="images/small1.jpg"/>
         </div>
        </div>    
   </div>
   
   
   <div class="two">
   	<div class="text">
     商品说明
    </div>
    <div class="img">
     <img src="images/big.jpg"/>
    </div>
   </div>
   
   <div class="one">
      <div class="top">
        <div class="text">
         商品说明
        </div>
        <div class="img">
         <img src="images/small3.jpg"/>
         </div>
        </div>
        
        <div class="top">
        <div class="text">
         商品说明
        </div>
        <div class="img">
         <img src="images/small4.jpg"/>
         </div>
        </div>    
   </div>
   
    <div class="two">
   	<div class="text">
     商品说明
    </div>
    <div class="img">
     <img src="images/big2.jpg"/>
    </div>
   </div>
   
      <div class="one">
      <div class="top">
        <div class="text">
         商品说明
        </div>
        <div class="img">
         <img src="images/small5.jpg"/>
         </div>
        </div>
        
        <div class="top">
        <div class="text">
         商品说明
        </div>
        <div class="img">
         <a href="#" ><img src="images/small6.jpg"/></a>
         </div>
        </div>    
   </div>
</div>
<!-- 代码 结束 -->
</body>
</html>

JS代码(animate.js):

 //�����㷨 /* Linear���޻���Ч��(�����˶�)��Quad�����η��Ļ�����Cubic�����η��Ļ���Quartic���Ĵη��Ļ�����Quintic����η��Ļ�����Sinusoidal���������ߵĻ�����Exponential��ָ�����ߵĻ�����Circular��Բ�����ߵĻ�����Elastic��ָ��˥�����������߻�����Back��������Χ�����η���������Bounce��ָ��˥���ķ���������ÿ��Ч����������������ʽ�����������ֱ��ǣ�easeIn����0��ʼ���ٵ��˶���easeOut�����ٵ�0���˶���easeInOut��ǰ��δ�0��ʼ���٣����μ��ٵ�0���˶����������ĸ������ֱ�����t--- current time����ǰʱ�䣩��0 +=60b--- beginning value����ʼֵ����100c--- change in value���仯������500-100d---duration������ʱ�䣩 5000Tween.Quad.easeInt()����Ľ�����ǵ�ǰ���˶�·�̡� �������:Code���� �������Ͳ��Եĵط�ϣ����λ������������ 50 */
 Tween ={
	Linear:function(t,b,c,d){
	return c*t/d + b;
}
,Quad:{
	easeIn:function(t,b,c,d){
	return c*(t/=d)*t + b;
}
,easeOut:function(t,b,c,d){
	return -c*(t/=d)*(t-2) + b;
}
,easeInOut:function(t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
}
,Cubic:{
	easeIn:function(t,b,c,d){
	return c*(t/=d)*t*t + b;
}
,easeOut:function(t,b,c,d){
	return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOut:function(t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}
}
,Quart:{
	easeIn:function(t,b,c,d){
	return c*(t/=d)*t*t*t + b;
}
,easeOut:function(t,b,c,d){
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOut:function(t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
	return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
}
,Quint:{
	easeIn:function(t,b,c,d){
	return c*(t/=d)*t*t*t*t + b;
}
,easeOut:function(t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOut:function(t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
	return c/2*((t-=2)*t*t*t*t + 2) + b;
}
}
,Sine:{
	easeIn:function(t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOut:function(t,b,c,d){
	return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOut:function(t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
}
,Expo:{
	easeIn:function(t,b,c,d){
	return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOut:function(t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOut:function(t,b,c,d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
}
,Circ:{
	easeIn:function(t,b,c,d){
	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOut:function(t,b,c,d){
	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOut:function(t,b,c,d){
	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
}
,Elastic:{
	easeIn:function(t,b,c,d,a,p){
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (!a || a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOut:function(t,b,c,d,a,p){
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (!a || a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
}
,easeInOut:function(t,b,c,d,a,p){
	if (t==0) return b;
	if ((t/=d/2)==2) return b+c;
	if (!p) p=d*(.3*1.5);
	if (!a || a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
}
,Back:{
	easeIn:function(t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOut:function(t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOut:function(t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
}
,Bounce:{
	easeIn:function(t,b,c,d){
	return c - Tween.Bounce.easeOut(d-t,0,c,d) + b;
}
,easeOut:function(t,b,c,d){
	if ((t/=d) < (1/2.75)){
	return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOut:function(t,b,c,d){
	if (t < d/2) return Tween.Bounce.easeIn(t*2,0,c,d) * .5 + b;
	else return Tween.Bounce.easeOut(t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
}
function animate (obj,attrObj,dur,fun,callback){
	clearInterval(obj.t);
	var fun=fun==undefined?Tween.Quad.easeIn:fun;
	var time=0;
	var start={
}
;
	var change={
}
;
	for (var i in attrObj){
	start[i]=setCss(obj,i);
	change[i]=attrObj[i]-start[i];
}
obj.t=setInterval(function(){
	if(time>=dur){
	clearInterval(obj.t);
	for (var i in attrObj){
	setCss(obj,i,attrObj[i]);
}
if(callback){
	callback.call(obj);
}
}
else{
	for (var i in attrObj){
	setCss(obj,i,fun(time,start[i],change[i],dur));
}
time+=60}
}
,60)}
function setCss (obj,attr,val){
	if(obj.nodeType!==1){
	return;
}
//��ʼ������ var attr=attr.replace(/^\s*|\s*$/g,"");
	//��ȡֵ if(arguments.length==2){
	//λ�úͳߴ� if(attr=="height"||attr=="width"||attr=="top"||attr=="left"||attr=="right"|| attr=="bottom"){
	var val=obj.currentStyle?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,null)[attr]);
	if(!val){
	var str="offset"+attr.replace(attr.charAt(0),attr.charAt(0).toUpperCase());
	val=obj[str];
}
return val;
}
if(attr=="padding"||attr=="margin"||attr=="paddingTop"||attr=="paddingLeft"||attr=="paddingRight"||attr=="paddingBottom"||attr=="marginTop"||attr=="marginLeft"||attr=="marginRight"||attr=="marginBottom"){
	var cc= parseInt(obj.currentStyle? ((obj.currentStyle[attr]==undefined||obj.currentStyle[attr]=="auto")?0:obj.currentStyle[attr]):(getComputedStyle(obj,null)[attr]==undefined?0:getComputedStyle(obj,null)[attr]));
	return cc;
}
//͸���� if(attr=="opacity"){
	return obj.currentStyle?parseFloat(obj.currentStyle[attr]||1):parseFloat(getComputedStyle(obj,null)[attr]||1);
}
//��ɫ if(attr=='color'||attr=="background"|| attr=="backgroundColor"||attr=='borderBottomColor'||attr== 'borderLeftColor'|| attr=='borderRightColor'||attr=='borderTopColor'){
	var colors=obj.currentStyle?(obj.currentStyle[attr]||"#000000"):(getComputedStyle(obj,null)[attr]||"#000000");
	//��ȡ���� return getColor(colors);
}
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}
else if(arguments.length==3){
	switch (attr){
	case "width":case "height":case "top":case "left":case "bottom":case "right":case "padding":case "margin":case "paddingLeft":case "paddingRight":obj.style[attr]=val+"px";
	break;
	case "opacity":obj.style[attr]=val;
	obj.style.filter="alpha(opacity="+val*100+")" break;
	case 'color':case "background":case "backgroundColor":case 'borderBottomColor':case 'borderLeftColor':case 'borderRightColor':case 'borderTopColor':obj.style[attr]=val;
	break;
	default:obj.style[attr]=val;
}
}
}
//��ɫ���䶯��//�����ɫfunction getColor (color){
	var str,r,g,b,arr;
	if(typeof color=="string"){
	//16 ���� if(color.charAt(0)==="#"){
	str=color.substring(1) r=parseInt(str.substr(0,2),16);
	g=parseInt(str.substr(2,2),16);
	b=parseInt(str.substr(4,2),16);
	arr=[r,g,b] return arr;
}
else{
	str=color.substring(4,color.length-1) return str.split(",")}
}
if(color instanceof Array){
	return color;
}
}

JS代码(lrtk.js):

$(function (){
	var imgs = $.makeArray($(".box img"));
	$(".box").mouseout(function (){
	for (var i=0;
	i<imgs.length;
	i++){
	// 需要使用自定义的animate函数，不能使用jquery自带的animate函数animate(imgs[i],{
	left:0,opacity:1}
,100);
}
}
);
	for (var i=0;
	i<imgs.length;
	i++){
	imgs[i].onmouseover=function (){
	for (var j=0;
	j<imgs.length;
	j++){
	animate(imgs[j],{
	left:0,opacity:0.7}
,100);
}
animate(this,{
	left:-15,opacity:1}
,100);
}
}
}
)

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
@charset "utf-8";/* CSS Document */
body,li,ul,dl,dt,dd{margin:0;padding:0;list-style:none;}
body{font-family:"����";font-size:14px;color:#000;line-height:1.5em;}
img{border:0;}
.l{float:left;display:inline;}
<!--�󸡶�������IE6�³���˫���߾࣬���Լ���display:inline;-->.r{float:right;display:inline;}
a{text-decoration:none;font-size:14px;}
.box{width:780px;height:360px;margin:0 auto;margin-top:50px;}
.box .one{width:20%;height:100%;float:left;}
.box .one .top{width:100%;height:50%;overflow:hidden;position:relative;}
.box .one .top .text{position:absolute;z-index:1;left:0;top:0;}
.box .one .top .img{position:absolute;width:100%;height:100%;background-color:black;}
.box .one .top .img img{position:absolute;left:0;top:0;}
.box .two{width:20%;height:100%;float:left;position:relative;overflow:hidden;}
.box .two .text{position:absolute;z-index:1;left:0 top:0;}
.box .two .img{position:absolute;width:100%;height:100%;left:0;top:0;background-color:black;}
.box .two .img img{position:absolute;}

附件:下载该文件资源,减少时间成本(增值服务)