jQuery动态背景图片效果实现方法_jquery

本文实例讲述了jQuery动态背景图片效果实现方法。分享给大家供大家参考。具体如下:

这里把背景图片按照1.jpg - 20.jpg放到目录里,jQuery会随机调用这些图片作为背景

$(document).ready(function(){
  bgImageTotal=20;
  randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1;
  imgPath=('/my/image/path/'+randomNumber+'.jpg');
  $('h1').css('background-image', ('url("'+imgPath+'")'));
});

希望本文所述对大家的jquery程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 背景图片
动态
jquery实现动态菜单栏、jquery实现动态画圆、jquery 实现动态绘图、jquery实现分页效果、jquery实现跑马灯效果,以便于您获取更多的相关知识。

时间: 2024-08-03 18:10:47

jQuery动态背景图片效果实现方法_jquery的相关文章

jQuery在页面加载时动态修改图片尺寸的方法_jquery

本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

基于jQuery创建鼠标悬停效果的方法_jquery

本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

jQuery实现返回顶部效果的方法_jquery

本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor

jQuery动态修改超链接地址的方法_jquery

本文实例讲述了jQuery动态修改超链接地址的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: <a id="jb51" href="http://www.haotu.net">好图网</a> 通过jQuery更换此超级链接的链接地址为http://www.jb51.net,代码如下: $("button").click(function(){ $("#jb51").attr(&quo

jquery隔行换色效果实现方法_jquery

本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javasc

jQuery简单tab切换效果实现方法_jquery

本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)

jQuery实现tab选项卡效果的方法_jquery

本文实例讲述了jQuery实现tab选项卡效果的方法.分享给大家供大家参考.具体如下: var tabs = { init: function(){ var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav'); $tab_contents.find('.tab-content:not(:first)').hide(); $tab_nav.find('li:first').addClass('active'); $tab_nav.on(

jQuery纵向导航菜单效果实现方法_jquery

本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $

jquery动态添加元素事件失效问题解决方法_jquery

今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(".x .y").click(function)...失效问题. 刚开始网上找到了用live函数,方法如下: 事件绑定:$(".x .y").click(function) 需改为: 复制代码 代码如下: $(".x .y").live('click',function); 但是由于1.8版本后live这种方法不再支持,所以需要用下述jquery中on方法解决脚本动态添加