仿京东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 ...
随机推荐
- PHP设计模式之----简单工厂模式
定义个抽象的类(或接口),让子类去继承(实现)它 abstract class Operation { abstract public function getValue($num1, $num2); ...
- PHP 魔术常量介绍
PHP 魔术常量 PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常 ...
- Python 字典(Dictionary) items()方法
描述 Python 字典(Dictionary) items() 函数以列表返回可遍历的(键, 值) 元组数组.高佣联盟 www.cgewang.com 语法 items()方法语法: dict.it ...
- windows：shellcode生成框架和加载
https://www.cnblogs.com/theseventhson/p/13194646.html 分享了shellcode 的基本原理,核心思路是动态获取GetProcAddress和Lo ...
- .Net Core中简单使用MongoDB
MongoDB 是由C++语言编写的,是一个基于分布式且面向文档存储的开源数据库系统. 下载地址: https://www.mongodb.com/download-center/community ...
- .Net Core下基于Emit的打造AOP
之前的基于DispatchProxy的AOP组件,实现了属性注入,但是这个依旧有很多限制 比如不支持构造器注入,继承DispatchProxy的子类必须是公开类 个人有点代码洁癖,不喜欢这种不能控制的 ...
- Tarjan算法 学习笔记
前排提示:先学习拓扑排序,再学习Tarjan有奇效. -------------------------- Tarjan算法一般用于有向图里强连通分量的缩点. 强连通分量:有向图里能够互相到达的点的集 ...
- sqlzoo刷题 SELECT from Nobel Tutorial
SELECT from Nobel Tutorial 1.Change the query shown so that it displays Nobel prizes for 1950. SELEC ...
- syslog协议及rsyslog服务全解析
背景:需求来自于一个客户想将服务器的日志转发到自己的日志服务器上,所以希望我们能提供这个转发的功能,同时还要满足syslog协议. 一.什么是syslog协议 1.介绍(略) 2.syslog标准协议 ...
- 文档写作利器：Markdown
大佬的文章,写的很好,里面推荐的Markdown编辑工具很不错,值的推荐. 文档写作利器:Markdown_网络_xcbeyond|疯狂源自梦想,技术成就辉煌-CSDN博客https://blog.c ...