仿京东BOE官网 jQuery代码
$(function() {
$("#chanping").mouseenter(function() {
$("#column").slideDown(500, function() {
$("#column").mouseenter(function() {
$("#column").show()
})
});
});
$("#column").mouseleave(function() {
$("#column").slideUp(500);
});
$("#chuanxing").mouseenter(function() {
$("#column2").slideDown(500);
});
$("#column").mouseleave(function() {
$("#column2").slideUp(500);
});
$("#scLeft").hover(function() {
$("#yishang1").animate({
width: "355px",
height: "245px",
})
},
function() {
$("#yishang1").animate({
width: "350px",
height: "240px",
})
});
$("#scCenter").hover(function() {
$("#yishang2").animate({
width: "355px",
height: "245px",
})
},
function() {
$("#yishang2").animate({
width: "350px",
height: "240px",
})
});
$("#scRinght").hover(function() {
$("#yishang3").animate({
width: "355px",
height: "245px",
})
},
function() {
$("#yishang3").animate({
width: "350px",
height: "240px",
})
});
$("#weixin2").hover(function() {
$("#wixin1").show();
$("#winxin3").attr('src', './images/weixin-icon01.png');
},
function() {
$("#wixin1").hide();
$("#winxin3").attr('src', './images/weixin-icon02.png');
})
$("#weibo2").hover(function() {
$("#wibo1").show();
$("#wibo3").attr('src', './images/weibo-icon01.png');
},
function() {
$("#wibo1").hide();
$("#wibo3").attr('src', './images/weibo-icon02.png');
})
$("#in2").hover(function() {
$("#in1").show();
$("#in3").attr('src', './images/yl.png');
},
function() {
$("#in1").hide();
$("#in3").attr('src', './images/yl2.png');
})
$('.a_1').mouseenter(function() {
$('.a_1').animate({
backgroundPositionY: -50,
})
}),
$(".a_1").mouseleave(function() {
$('.a_1').animate({
backgroundPositionY: 0,
})
})
$('.a_2').mouseenter(function() {
$('.a_2').animate({
backgroundPositionY: -190,
})
}),
$(".a_2").mouseleave(function() {
$('.a_2').animate({
backgroundPositionY: -130,
})
})
$('.a_3').mouseenter(function() {
$('.a_3').animate({
backgroundPositionY: -310,
})
}),
$(".a_3").mouseleave(function() {
$('.a_3').animate({
backgroundPositionY: -250,
})
})
$(".xianshi").mouseenter(function() {
$('#column_in1').show()
})
$(".xianshi").mouseleave(function() {
$('#column_in1').hide()
})
$(".chuangan").mouseenter(function() {
$('#column_in2').show()
})
$(".chuangan").mouseleave(function() {
$('#column_in2').hide()
})
$(".jiankang").mouseenter(function() {
$('#column_in3').show()
})
$(".jiankang").mouseleave(function() {
$('#column_in3').hide()
})
$(".fuwu").mouseenter(function() {
$('#column_in4').show()
})
$(".fuwu").mouseleave(function() {
$('#column_in4').hide()
})
});
仿京东BOE官网 jQuery代码的更多相关文章
- 仿京东BOE官网 html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 仿京东BOE官网 JavaScript代码
let items = document.getElementsByClassName('item'); let points = document.getElementsByClassName('p ...
- 仿京东BOE官网 css代码
* { margin: 0; padding: 0; border: 0; list-style: none; } .box { width: 1518px; height: 1300px; marg ...
- 仿京东BOE官网图片链接
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- android 官网处理图片 代码
/** * 获取压缩后的图片 (官网大图片加载对应代码) * * @param res * @param resId * @param reqWidth * 所需图片压缩尺寸最小宽度 * @param ...
- 官网jquery压缩版引用地址:
3.1.1版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟
先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默 ...
- Bootstrap--模仿官网写一个页面
本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...
随机推荐
- 宿主机连接docker中的mysql
宿主机连接docker中的mysql dokcer安装mysql docker run \ --name mysql \ -v $PWD/mysql:/var/lib/mysql \ -p 330 ...
- cookie 和session的简单比较
1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session ...
- Aliyun Linux2安装Docker
安装教程 使用手册
- Python globals和locals函数_reload函数
Python globals和locals函数_reload函数: globals( ): 返回所有能够访问到的全局名字 num = 5 sum = 0 def add(num): func_sum ...
- PHP expm1() 函数
实例 返回 exp() - 1: <?phpecho(expm1(0) . "<br>");echo(expm1(1) . "<br>&qu ...
- 下载excel模板，导入数据时需要用到
页面代码: <form id="form1" enctype="multipart/form-data"> <div style=" ...
- C/C++编程笔记：C++入门知识丨多态性和虚函数
本篇要学习的内容和知识结构概览 多态性 编译时的多态性称为静态联编. 当调用重载函数时, 在编译期就确定下来调用哪个函数. 运行时的多态性称为动态联编. 在运行时才能确定调用哪个函数, 由虚函数来支持 ...
- C/C++编程笔记：C语言对齐问题【结构体、栈内存以及位域对齐】
引言 考虑下面的结构体定义: 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始地址是0,则s的地址就是1,c2的地址是3,i的地址是4. 现在,我们编写一个简单的程序: 运行后输出: 为什么会这 ...
- Linux的VMWare中Centos7的安装
Windows平台下VMWare 14安装Centos 7 一.虚拟机硬件配置 1.选择创建新的虚拟机: 2.选择自定义(高级)进行自定义配置,单击下一步: 3.选择虚拟机硬件兼容性为默认,单击下一步 ...
- 不使用spring-boot-starter-parent作为依赖parent
背景环境 在某些情况下由于某些原因,我们的项目不能使用spring-boot-starter-parent作为<parent>依赖,一定要有自己的<parent>,但同时还希望 ...