jq实现背景图片动态切换

在很多需求中都用到了利用jquery实现背景图片的动画效果，接下来我们将实现点击ul中的li实现背景图片的动态切换。
思路和实现步骤：
1、先建立静态页面。其中box盒子用来动态生成ul,li,a和img;box_bg和box_sta盒子主要用来实现背景图片的切换

<body><div class="box"></div><div class="box_bg"></div><div class="box_sta"></div>
</body>

2、设置他们的样式

 * {margin: 0;padding: 0;box-sizing: border-box;list-style: none;}body {position: relative;}.box {width: 800px;height: 500px;margin-left: 100px;overflow: hidden;}ul {width: 640px;display: flex;justify-content: center;align-content: center;flex-wrap: wrap;margin-top: 291px;margin-left: 78px;}ul>li {width: 120px;height: 45px;background-color: #fff;margin-right: 10px;margin-bottom: 10px;border: 1px solid #ccc;}li:nth-child(5n) {margin-right: 0;}li:nth-child(n+16) {margin-bottom: 0;}li a {display: block;text-align: center;}ul li a img {width: 100%;height: 100%;}.box_bg {margin: 0 auto;position: absolute;left: 100px;top: 0;width: 800px;height: 500px;display: none;background-image: url('./img-yysy/14R.jpg');/* 规定背景图像的尺寸 *//* cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 */background-size: cover;z-index: -100;}.box_sta {margin: 0 auto;position: absolute;left: 100px;top: 0;width: 800px;height: 500px;background-image: url('./img-yysy/15R.jpg');background-size: cover;z-index: -200;}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}.clearfix {*zoom: 1;}

3、编写对应的js样式

$(function () {// 定义数组保存背景图片let arrImg = ['./img-yysy/1R.jpg', './img-yysy/2R.jpg', './img-yysy/3R.jpg', './img-yysy/4R.jpg', './img-yysy/5R.jpg', './img-yysy/6R.jpg', './img-yysy/7R.jpg', './img-yysy/8R.jpg', './img-yysy/9R.jpg', './img-yysy/10R.jpg', './img-yysy/11R.jpg', './img-yysy/12R.jpg', './img-yysy/13R.jpg', './img-yysy/14R.jpg', './img-yysy/15R.jpg', './img-yysy/16R.jpg', './img-yysy/17R.jpg', './img-yysy/18R.jpg', './img-yysy/19R.jpg', './img-yysy/20R.jpg'];// 定义数组保存li的图片let arr = ['./img-yysy/1.png', './img-yysy/2.png', './img-yysy/3.png', './img-yysy/4.png', './img-yysy/5.png', './img-yysy/6.png', './img-yysy/7.png', './img-yysy/8.png', './img-yysy/9.png', './img-yysy/10.png', './img-yysy/11.png', './img-yysy/12.png', './img-yysy/13.png', './img-yysy/14.png', './img-yysy/15.png', './img-yysy/16.png', './img-yysy/17.jpg', './img-yysy/18.png', './img-yysy/19.png', './img-yysy/20.png']// 将ul添加到box父盒子里面$('.box').append('<ul></ul>');// 在ul中创建20个lifor (let i = 0; i <= 19; i++) {$('.box').children('ul').append('<li></li>');}// 给ul清除浮动$('.box').children('ul').prop('class', 'clearfix');// 给每个li添加a标签$('.box>ul>li').append('<a href="#"></a>');// 在每个a里面添加img标签$('.box>ul>li>a').append('<img>');// 给每个li和img添加属性for (let j = 0; j <= 19; j++) {// 每个li$('.box li').eq(j).attr('bgImage', arrImg[j]);// 每个img$('.box a img').eq(j).prop('src', arr[j]);}// 鼠标移入每个li时$('.box li').mouseenter(function () {// 获取li里面自定义的图片路径bgImage = $(this).attr('bgImage');// console.log(bgImage);// 给box_bg变换背景图片$(this).parent().parent().siblings().eq(0).css('background-image', `url('${bgImage}')`);// 将box_bg的透明度设置为0$(this).parent().parent().siblings().eq(0).css('opacity', '0');// 显示box_bg$(this).parent().parent().siblings().eq(0).css('display', 'block');// 给box_bg设置自定义属性并添加相同的图片路径$(this).parent().parent().siblings().eq(0).attr('currentBg', `url('${bgImage}')`);// 给box_bg添加动画效果$(this).parent().parent().siblings().eq(0).stop().animate({// 0.5s后透明度改变opacity: 1}, 500, function () {// 默认背景.box_sta的背景图放入currentBg属性中$(this).siblings().eq(1).css('background-image', $(this).attr('currentBg'));// 将box_bg的透明度设为0$(this).css('opacity', '0');// 隐藏$(this).css('display', 'none');})})})

总结：要实现背景图片的动态切换，其中思路是最重要的；一开始我只写了一个盒子，里面的ul和li写死，最后用数组的形式fadeIn和fadeOut改变box的背景图片，最后发现动画效果没有达成，只是图片之间的跳转。所以转变思路后用了当前的方法，当然还有借鉴一些同学的。
其中我认为比较重要的js步骤有：

  // 给每个li和img添加属性for (let j = 0; j <= 19; j++) {// 每个li$('.box li').eq(j).attr('bgImage', arrImg[j]);// 每个img$('.box a img').eq(j).prop('src', arr[j]);}

将大图的路径先存放在每个li中；鼠标移入li是给box_bg设置相应的样式和获取存放在li中的背景图，以及最后给box_sta设置相应的路径

 // 默认背景.box_sta的背景图放入currentBg属性中$(this).siblings().eq(1).css('background-image', $(this).attr('currentBg'));

jq实现背景图片动态切换相关推荐

uni-app 背景图片动态设置
uni-app 背景图片动态设置 <view :style="{backgroundImage:`url(${background})`}"></view> ...
html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用.下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展. 第一:背景图片 ...
简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
html5 背景图片自动换,网站背景图片自动切换特效css代码
背景图片自动切换特效-sbkko.com body { background: #000; background-attachment: fixed; word-wrap: break-word; - ...
pyqt5实现按钮添加背景图片以及背景图片的切换
简介对与控件QPushButton中的可以使用setStyleSheet设置它背景图片.具体设置背景图片的方法有两种 self.button.setStyleSheet("QPushBut ...
jquery+css实现背景图片的切换
1.html页面代码如下: 常使用在点击页面的div时出现 2.css代码如下: 第一个div的class为d2,d3,当d3位于后面时默认覆盖掉d2中d3存在的属性 3.jquery代码如下: 说明 ...
jquery 实现背景图片循环切换，显示隐藏div
jquery实现图片背景循环切换,显示隐藏一个div. <script type="text/javascript"> $(function(){ $("#t ...
radio切换控制div显示_JavaScript连载31图片动态切换以及关闭图片案例
一.图标切换 31.1 点击那两个按钮可以做到轮番显示图片二.关闭图片案例 31.2 点击右上角的叉,图片会消失. 三.源码: D31_iconSwitch.html D31_2_CloseImag ...
java窗体添加背景图片_Java项目实战之实战之天天酷跑（四）：游戏主界面
接上文,本文将实现游戏主界面,功能如下: 移动的背景图片.动态的玩家.玩家的移动功能.五种障碍物持续出现.玩家和障碍物的碰撞.暂停.继续功能. 首先,看一下整体效果: 动图实在太大,几秒钟的 Gif ...

jq实现背景图片动态切换

jq实现背景图片动态切换相关推荐

最新文章

热门文章