精华内容
下载资源
问答
  • jQuery设置背景图片

    2020-03-18 09:46:49
    $(this).css("background-image","url(on.jpg)"); 注意点: 首先是background-image,中间是带-的,不是原生js那样backgroundImage 其次是需要给路径加上url(路径);
    $(this).css("background-image","url(on.jpg)");
    

    注意点:
    首先是background-image,中间是带-的,不是原生js那样backgroundImage
    其次是需要给路径加上url(路径);

    展开全文
  • jquery.backgroundMove.js是一款根据鼠标位置移动背景图片jquery插件。该jquery插件么一根据鼠标的当前位置来移动元素的背景图片,兼容ie8浏览器。
  •  在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果: 这是正常的,背景图片占满全屏 当页面内容变长出现了...

      背景

      在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果:

    这是正常的,背景图片占满全屏

    当页面内容变长出现了滚动条时,背景图片显示出现了问题

      问题解决  

      下面附上我解决这个问题的代码:

      js代码:

    /* 
     * 根据类名获取元素
     */
    document.getElementsByClassName = function(oParent,sClass){
        var aResult = [];
        var aNode = oParent.getElementsByTagName("*");
        for(var i=0; i<aNode.length; i++){
            if($(aNode[i]).hasClass(sClass)){
                aResult.push(aNode[i]);
            }
        }
        return aResult;
    }
    
    /* 
     * 设置背景图片占满整个页面
     * 参数:body,如果不填,默认给body元素设置背景,body可以是一个id名或者类名,或者是一个元素对象
     */
    function setBackground(body){
        var bodyObject = body;
        if(typeof(body) == "string")
        {
            bodyObject = document.getElementById(body);
            if(bodyObject == null || bodyObject == undefined)
            {
                bodyObject = document.getElementsByClassName(document.getElementsByTagName("html")[0], body)[0];
            }
            
            if(bodyObject == null || bodyObject == undefined)
            {
                bodyObject = document.getElementsByTagName("body")[0];
            }
        }
        else if(typeof(body) == "undefined"){
            bodyObject = document.getElementsByTagName("body")[0];
        }
        
        $(function(){
            var bodyHeight = $(window).height();
            var bodyWidth = $(window).width();
            if($(bodyObject).height()>=bodyHeight){ //当页面高度大于等于窗口高度时,使高度自适应
                $(bodyObject).css("height", "100%");
                // 使用一个延时,防时执行下面的代码时上面一条代码没来得及改变高度,给内容高度改变留一些时间
                setTimeout(function(){
                    if($(bodyObject).height() < bodyHeight){//这里是原来高度大于等于窗口高度,自适应后高度又小于窗口高度
                        $(bodyObject).height(bodyHeight);
                    }
                    },100);
            }
            else{ // 当页面内容没有窗口高时,使高度为窗口高度
                $(bodyObject).height(bodyHeight);
            }
    
            $(bodyObject).width(bodyWidth);
        });
    }

      css代码:

    .paged-aritcle
    {
        background: url("../image/article.jpg") no-repeat;
        background-size: 100% 100%;
        overflow-x: hidden;
    }

      jsp代码:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/javaqun/css/articlelist.css" type="text/css" />
    <link rel="stylesheet" href="/javaqun/css/common.css" type="text/css" />
    <script type="text/javascript" src="/javaqun/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/javaqun/js/common.js"></script>
    <script type="text/javascript" src="/javaqun/js/initPage.js"></script>
    <script type="text/javascript" src="/javaqun/js/article.js"></script>
    <link rel="shortcut icon" href="/javaqun/favicon.ico" type="image/x-icon" />
    <title></title>
    </head>
    <!-- 设置body的类名 -->
    <body class="paged-aritcle">
        <div id="return">
            <a href="/javaqun/admin/article/getArticleList.action">文章列表</a>
        </div>
        <div class="container">
            <div class="title" id="pageName">${title }</div>
            <div class="pageArticle" id="pageArticle"></div>
            <div style="width: 100%;text-align: center;"><div id="columnPage"></div></div>
        </div>
    </body>
    <script type="text/javascript">
    $(function(){
        initColumnPage(${singleNum}, "showPageSingleArticle");
        showPageSingleArticle(1, 10);
    });
    setBackground();//这里第一次设置了背景图片
    </script>
    </html>

      上面用到了一个分页插件,当分页高度改变时,会重新设置高度

    function initColumnPage(totalCount, pageFunction)
    {
        pageUtil.initPage('columnPage',{
            totalCount:totalCount,//总条数,一般从回调函数中获取。如果没有数据则默认为1页
            curPage:1,//初始化时的默认选中页,默认第一页。如果所填范围溢出或者非数字或者数字字符串,则默认第一页
            showCount:5,//分页栏显示的数量
            pageSizeList:[5,10,20],//自定义分页数,默认[5,10,15,20,50]
            defaultPageSize:10,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中,则也为第一个
            isJump:true,//是否包含跳转功能,默认false
            isPageNum:true,//是否显示分页下拉选择,默认false
            isPN:true,//是否显示上一页和下一页,默认true
            isFL:false,//是否显示首页和末页,默认true
            jump:function(curPage,pageSize){//跳转功能回调,传递回来2个参数,当前页和每页大小。如果没有设置分页下拉,则第二个参数永远为0。这里的this被指定为一个空对象,如果回调中需用到this请自行使用bind方法
                eval(pageFunction + "(" + curPage + ", " + pageSize + ")");
                setBackground(); //当高度改变时,重新设置页面高度
            },
        });
    }

      修改后效果

      总结

      自己实际开发中的经验,水平有限,难免初级有错,仅供参考。

     

    转载于:https://www.cnblogs.com/liunianfeiyu/p/9246685.html

    展开全文
  • jQuery定位背景

    2020-08-04 00:55:52
    Jquery Tutorial on how to Position Backgrounds 关于如何定位背景jQuery教程 Today I will tell you about another one useful tool of JQuery – backgroundPosition plugin. It allow to reach different ...

    Jquery Tutorial on how to Position Backgrounds

    关于如何定位背景的jQuery教程

    Today I will tell you about another one useful tool of JQuery – backgroundPosition plugin. It allow to reach different design ideas with color/background changing.

    今天,我将向您介绍JQuery的另一个有用工具-backgroundPosition插件。 通过改变颜色/背景,可以达到不同的设计思路。

    As example, we want to create animated user friendly buttons or website navigation menu.

    例如,我们要创建动画的用户友好按钮或网站导航菜单。

    Someone can ask, why we need script if we can use hover effect + CSS styles. Here you will able to compare possibilities and see advantages of JQuery.

    有人会问,如果可以使用悬停效果+ CSS样式,为什么需要脚本。 在这里,您将能够比较可能性并看到JQuery的优势。

    Here are Some very attractive samples:

    以下是一些非常吸引人的示例:

    现场演示

    [sociallocker]

    [社交储物柜]

    打包下载

    [/sociallocker]

    [/ sociallocker]

    How to do this? Not so difficult:

    这该怎么做? 没那么困难:

    步骤1. HTML (Step 1. HTML)

    Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

    这是所有5个样本的来源。 如您所见-我们有简单的无序列表,它们都非常相同,只是具有不同的'id'属性。

    
    <ul id="ex1">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex2">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex3">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex4">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex5">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    
    
    <ul id="ex1">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex2">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex3">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex4">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    <ul id="ex5">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2</a></li>
        <li><a href="#">Button 3</a></li>
        <li><a href="#">Button 4</a></li>
        <li><a href="#">Button 5</a></li>
    </ul>
    
    

    步骤2. CSS (Step 2. CSS)

    
    <style type="text/css">
    	h2 {padding-top:20px;clear:both;}
    	ul {list-style:none;margin:0;padding:0;}
    	li {float:left;width:100px;margin:0;padding:0;text-align:center;}
    	li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
    	li a:hover, li a:focus, li a:active {background-position:-150px 0;}
    	li a {background:url(bg2.jpg) repeat 0 0;}
    	#ex1 a {background:url(bg.jpg) repeat -20px 35px;}
    	#ex2 a {background:url(bg2.jpg) repeat 0 0;}
    	#ex3 a {background:url(bg3.jpg) repeat 0 0;}
    	#ex4 a {background:url(bg4.jpg) repeat 0 0;}
    	#ex5 a {background:url(bg4.jpg) repeat 0 0;}
    </style>
    
    
    <style type="text/css">
    	h2 {padding-top:20px;clear:both;}
    	ul {list-style:none;margin:0;padding:0;}
    	li {float:left;width:100px;margin:0;padding:0;text-align:center;}
    	li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
    	li a:hover, li a:focus, li a:active {background-position:-150px 0;}
    	li a {background:url(bg2.jpg) repeat 0 0;}
    	#ex1 a {background:url(bg.jpg) repeat -20px 35px;}
    	#ex2 a {background:url(bg2.jpg) repeat 0 0;}
    	#ex3 a {background:url(bg3.jpg) repeat 0 0;}
    	#ex4 a {background:url(bg4.jpg) repeat 0 0;}
    	#ex5 a {background:url(bg4.jpg) repeat 0 0;}
    </style>
    
    

    步骤3. jQuery (Step 3. JQuery)

    
    <script type="text/javascript">
    $(function(){
    	$('#ex1 a')
    		.css( {backgroundPosition: "-20px 35px"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
    				$(this).css({backgroundPosition: "-20px 35px"})
    			}})
    		})
    	$('#ex2 a')
    		.css( {backgroundPosition: "0 0"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
    				$(this).css({backgroundPosition: "0 0"})
    			}})
    		})
    	$('#ex3 a')
    		.css( {backgroundPosition: "0 0"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
    		})
    	$('#ex4 a')
    		.css( {backgroundPosition: "0 0"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
    		})
    	$('#ex5 a')
    		.css( {backgroundPosition: "0 0"} )
    		.click(function(){
    			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
    		})
    });
    </script>
    
    
    <script type="text/javascript">
    $(function(){
    	$('#ex1 a')
    		.css( {backgroundPosition: "-20px 35px"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
    				$(this).css({backgroundPosition: "-20px 35px"})
    			}})
    		})
    	$('#ex2 a')
    		.css( {backgroundPosition: "0 0"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
    				$(this).css({backgroundPosition: "0 0"})
    			}})
    		})
    	$('#ex3 a')
    		.css( {backgroundPosition: "0 0"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
    		})
    	$('#ex4 a')
    		.css( {backgroundPosition: "0 0"} )
    		.mouseover(function(){
    			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
    		})
    	$('#ex5 a')
    		.css( {backgroundPosition: "0 0"} )
    		.click(function(){
    			$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200})
    		})
    		.mouseout(function(){
    			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
    		})
    });
    </script>
    
    

    步骤4.图片 (Step 4. Images)

    Also we need few images for these demos:

    同样,这些演示需要一些图像:

    bg
    包
    bg2
    bg2
    bg3
    bg3
    bg4
    bg4

    翻译自: https://www.script-tutorials.com/positioning-background-with-jquery/

    展开全文
  • jquery图片背景tab标签

    2020-06-10 00:20:24
    找了好久终于才找到这种用图片做tab标签切换背景的效果,其实现原理是将两种效果做到一个图片上,鼠标移动到tab标签上时背景位置做下调整,原理很简单,懒人之家推荐下载
  • &#13; $("#").css("backgroundImage").replace('url(','').replace(')','');&#13; &#13; &#13; &#13; &#13; &#13; &#13; &#13; &...

    $("#").css("backgroundImage").replace('url(','').replace(')','');

    展开全文
  • CSS 背景位置 background-position属性

    万次阅读 多人点赞 2018-02-17 20:52:35
    背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景定位技术,能够精确控制背景在对象中的位置。默认情况下,背景图像都是从元素 padding 区域的左上角开始出现的,但设计师往往希望背景能够出现在...
  • left:0px; top:0px; width:100%; height:100%;opacity:0.8"> <img src="https://pic.netbian.com/uploads/allimg/200627/004758-15931900782589.jpg" width="100%" height="100%"/> div> body> ... opacity:设置透明度
  • Java数组倒置 简单 Java图片加水印,支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印...
  • jquery设置滚动条样式

    2019-03-24 16:00:45
    ... content here ...... ...中引入nanoscroller.css文件。...scriptpath: “” // 为boxmode图片自定义路径 ("" => same script path) preventmultitouchscrolling: true // 防止多触点事件引发滚动 });
  • 使用jQuery的两种方法实现背景切换 背景点击切换 首先给每个div设置背景,再给每个div绑定点击事件,使得body的背景可以切换。 注意:jQuery和js点击事件的绑定有一些差异, js绑定如下: document....
  • 鼠标移走后图片恢复到原来位置。 但是最近好多懒人疑问想找这样的效果一直找不到,所以,实用的才是最好的 简单,常用的效果,节省你的时间 使用方法: 1、将css样式引入到你的网页中 2、将...
  • 为什么80%的码农都做不了架构师?>>> ...
  • 将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的,这样才能达到最佳效果。当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此...
  • jquery 实现更改图片路径

    万次阅读 多人点赞 2017-02-08 15:49:39
    如何用JS实现 原来是这个图片(01.png)点击之后变成(02.png) 点击另一个(03.png)之后变成(04.PNG) 请教大神们如何实现。。。本人JS小白 请各位帮忙简单写一下 img src="01.png" onclick=...
  • jQuery实现的3D多背景层鼠标互动视觉差特效源码是一段实现了固定背景的多层图片鼠标互动视觉差效果插件,顶层图片会根据鼠标的滚动而变换位置,大概是鼠标上、3D图下;鼠标左、3D图右的反方向互动效果,本段代码适应...
  • 动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现。现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局。 ...
  • jquery鼠标悬停的时候图片改变

    千次阅读 2019-09-10 16:38:25
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> $("#remove").hover(function() { $(this).css("background-image", "url(images/delete1-1.png)"); }, function() { $(this)....
  • jQuery实现图片跟着鼠标移动的效果

    千次阅读 2018-07-03 19:36:52
    //获取图片所在的位置,使用css设置相对位置( "position": "absolute") //鼠标相对于文档的左边缘的位置("left": e.pageX ) //鼠标相对于文档的左边缘的位置( "top": e.pageY ) $("#mouseXY").css({ ...
  • 实现的原理并非是由jquery实现灰色背景色,仔细看看源代码图片即可发现,图片是由两张不同的图片,也就是鼠标移动前后的两个图片链接在一起,jquery所要实现的就是在鼠标移动到图片上后前后显示的图片位置不同,这样...
  • ”推拉门”动效也可以称作”手风琴”效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换。 实现方法一:改变...
  • 这个博客记录了完成背景图片轮播的博客,喜欢折腾的同学可以看看,这方面对CSS3的要求略微有点高。Hexo的NexT主题非常简约,个性化调整也非常方便。在这里就给大家介绍Hexo的背景图片轮播的制作方法。
  • CSS3 背景起始位置 background-origin属性

    千次阅读 2018-02-18 22:28:52
    背景起始位置默认情况下,CSS 背景...这时,就可以通过 background-origin属性来设置背景图像的起始显示位置,可选值有 border-box | padding-box | content-box,默认值为 padding-box。border-box 表示背景图像从...
  • 然后我的后台并没有模板,,并且我的js,jquery水平是小学水平,所以这个也困扰了我将近一下午。在此总结一下,分享给大家。分享使我快乐!!! 1. 一、请看代码,容我分析一下 1、首先,menu代表我的菜单列表...
  • JQuery键盘控制图片

    2018-10-09 22:43:32
    JQuery键盘控制图片 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--使用JQuery键盘事件来实现漂浮的...
  • 这里要注意用大图用做背景图片引发的问题:  用隐藏的前景图片预加载,load事件判断时机,ie,chrome正常,ff请求了两次图片,图片未缓存;  换一种方式,不预载大图。改成直接在大图位置用覆盖层做“loading”后,...
  • 2021年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    此外对于图片的处理可以使用压缩函数或resize函数,处理图片的同时破坏其包含的HTML代码; 3. 使用随机数改写文件名和文件路径,使得用户不能轻易访问自己上传的文件; 4. 单独设置文件服务器的域名; 前端跨越问题 ...
  • 关于js 图片上传插件 在网络上有很多,但是感觉对自己并不是很实用,于是自己就基于jquery 简单的封装了一款,之前网上找的总是一堆跨域问题,让我很蛋疼,下面是自己写的代码和截图,提供参考,需要的可以拿去。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,056
精华内容 5,622
关键字:

jquery设置背景图片位置