导航:首页 > 文字图片 > jquery按文字改变图片

jquery按文字改变图片

发布时间：2022-06-21 03:35:33

㈠一段鼠标经过文字显示图片的jquery代码

我看了代码，css和js都有点小问题，我简单改了一下

css问题。

.pcdownp.show{display:block;}

上面那段代码比原来的p.show优先级高，所以没效果。

js是下面这么改，这么改js，上面的css可以不用，js直接就控制隐藏和显示。

$(function(){
$('.pcdownli').mouseover(function(){
$(this).siblings().find('p').hide();
$(this).find('p').show();
});
});

先把所有的p隐藏，然后显示当前的。就行了。测试有效

㈡ jquery中如何做到鼠标经过文字显示图片

这是一个事件，触发条件就是鼠标覆盖在上面，比如：$('.text').hover()，然后就是事件，具体如下：
html：代码如下
<p>这是触发文字</p>
<img src='这是图片'>
css:
img{
display:none
}
JQ:
$('p').hover( function(){
$('img').css('display','block');
});

㈢ jquery文字图片切换效果

$("li").hover({
function(){

$(this).find("a").html("<img scr=\"图片路径\" />");

},

function(){

$(this).find("a").html("文字内容");

}

});

㈣ JQuery展开收起div 求大神帮忙添加上下箭头图片

<a href="#" id="toggle" class="top">展开<img src="img/1401957442.png" /> </a><br />

$("#toggle").click(function() {
$(this).html($("#content").is(":hidden") ? "收起"+"<img src='img/1401957442.png' />" : "展开"+"<img src='img/1401957442.png' />");
$("#content").slideToggle();
});

按你这种写法，直接把三角的图片跟那个文字写在一起，要不然还真不太方便控制。把text方法改成html方法。
图片路径记得改

㈤ jquery点击一个事件更换图片，在点击更换回来

这是你现在的结构；建议星星图标可以用作背景图片；

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<style>
*{margin:0;padding:0;}
ul.stars{display:block;margin:100px100px30px;overflow:hidden;}
ul.starsli{display:block;float:left;padding:04px;cursor:pointer;}
ul.starsliimg{display:block;width:30px;height:30px;}
ul.starsliimg.full{display:none;}
ul.starsli.onimg.empty{display:none;}
ul.starsli.onimg.full{display:block;}
</style>
<script>
$(document).ready(function(e){
	$("ul.starsli").click(function(){
		$(this).toggleClass("on");
		varstars=$("ul.stars").find("li.on").size();
		$("input#stars").val(stars);
	});
});
</script>
	<formmethod="get">
		<ulclass="stars">
			<li>
				<imgclass="empty"src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg"/>
				<imgclass="full"src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg"/>
			</li>
			<li>
				<imgclass="empty"src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg"/>
				<imgclass="full"src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg"/>
			</li>
			<li>
				<imgclass="empty"src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg"/>
				<imgclass="full"src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg"/>
			</li>
			<li>
				<imgclass="empty"src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg"/>
				<imgclass="full"src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg"/>
			</li>
			<li>
				<imgclass="empty"src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg"/>
				<imgclass="full"src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg"/>
			</li>
		</ul>
		<inputtype="hidden"id="stars"name="stars"/>
		<inputtype="submit"value="提交"style="margin:0100px;">
	</form>
</body>
</html>

最好的方式是把图片处理一下作为ul的背景图，通过点击li获取索引值来改变ul的背景图片位置；不能上传附件了。。还是上代码吧。。

<!DOCTYPEHTML>
<html>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<title>评价</title>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(document).ready(function(){
	//星级评分
	$("formpspan.radiolabel.radio").click(function(){
		$(this).parent("span.radio").css("background-position-y",-($(this).index()*19)+"px");
	});
});
</script>
<style>
*{margin:0;padding:0;}
formp{display:block;overflow:hidden;padding:10px20px;}
formplabel{display:block;height:36px;line-height:36px;color:#444;font-size:14px;float:left;}
formpspan.radio{display:block;width:150px;height:19px;background:url(stars.png)left0pxno-repeat;float:left;margin:8px00;}
formpinput.radio{display:none;}
formplabel.radio{width:20%;height:100%;margin:0;cursor:pointer;}
forminput.btn{display:block;width:210px;height:36px;line-height:36px;*line-height:normal;color:#fff;font-size:15px;background:#ffb81f;border:0;border-radius:6px;cursor:pointer;float:left;margin-top:10px;}
</style>
<body>

<form>
	<p>
		<label>服务态度：</label>
		<spanclass="radio">
			<inputclass="radio"type="radio"name="star1"value="0"checked/>
			<labelclass="radio"for="star11"></label>
			<labelclass="radio"for="star12"></label>
			<labelclass="radio"for="star13"></label>
			<labelclass="radio"for="star14"></label>
			<labelclass="radio"for="star15"></label>
			<inputid="star11"class="radio"type="radio"name="star1"value="1"/>
			<inputid="star12"class="radio"type="radio"name="star1"value="2"/>
			<inputid="star13"class="radio"type="radio"name="star1"value="3"/>
			<inputid="star14"class="radio"type="radio"name="star1"value="4"/>
			<inputid="star15"class="radio"type="radio"name="star1"value="5"/>
		</span>
	</p>
	<p>
		<label>运输速度：</label>
		<spanclass="radio">
			<inputclass="radio"type="radio"name="star2"value="0"checked/>
			<labelclass="radio"for="star21"></label>
			<labelclass="radio"for="star22"></label>
			<labelclass="radio"for="star23"></label>
			<labelclass="radio"for="star24"></label>
			<labelclass="radio"for="star25"></label>
			<inputid="star21"class="radio"type="radio"name="star2"value="1"/>
			<inputid="star22"class="radio"type="radio"name="star2"value="2"/>
			<inputid="star23"class="radio"type="radio"name="star2"value="3"/>
			<inputid="star24"class="radio"type="radio"name="star2"value="4"/>
			<inputid="star25"class="radio"type="radio"name="star2"value="5"/>
		</span>
	</p>
	<p>
		<label>货款发放：</label>
		<spanclass="radio">
			<inputclass="radio"type="radio"name="star3"value="0"checked/>
			<labelclass="radio"for="star31"></label>
			<labelclass="radio"for="star32"></label>
			<labelclass="radio"for="star33"></label>
			<labelclass="radio"for="star34"></label>
			<labelclass="radio"for="star35"></label>
			<inputid="star31"class="radio"type="radio"name="star3"value="1"/>
			<inputid="star32"class="radio"type="radio"name="star3"value="2"/>
			<inputid="star33"class="radio"type="radio"name="star3"value="3"/>
			<inputid="star34"class="radio"type="radio"name="star3"value="4"/>
			<inputid="star35"class="radio"type="radio"name="star3"value="5"/>
		</span>
	</p>
	<p>
		<inputclass="btn"type="submit"value="提交"/>
	</p>
</form>
</body>
</html>

附上图片素材

㈥ jquery怎么实现把一段带图片的文本里的图片替换成其他文字！

1、使用正则替换

//声明正则
varreg="<(img|a|p|b|div|br)\s*([\w]*=("|')([^"'<]*)("|')\s*)*(/>|>)";
//读取文本
$.get('Scripts/data.txt').success(function(content){
//content就为文件data.txt的文本内容了,注意txt文件的编码需要与html文件的编码一///致，最好保存成utf-8

//替换操作
varresult=content.replace(reg,'你要替换的文字');
});

2、文本内容作为string字符串，然后使用indexof()查找ing标签下标，img标签长度，一个个的替换（很麻烦，不推荐）

㈦使用jquery更换图片如何实现

一般是改css
$('#x').click(function(){
var img = $(this).css('background-image');
if(img =='xxx.png'){
img = 'yyy.png';
}else{
img='xxx.png';
}
$(this).css('background-image','url("'+img+'")')
})

㈧ jquery点击改变背景图片

css("background-image","url(image[n])");

问题出在这里了吧！
你这么写不相当于 background-image:url(image[n]) 了么？

这样试试：
$(".slider_image").css("background-image","url("+image[n]+")");

㈨ jquery怎么实现点击一个元素更换背景图片，连续点击永远在2张图片之间更换

实现的方法和操作步骤如下：

1、首先，打开html编辑器，创建一个新的html文件，例如index.html，然后引入jquery，如下图所示。

阅读全文

与jquery按文字改变图片相关的资料

热点内容

横拍两人看夕阳图片高清发布：2025-07-02 18:31:18 浏览：310

不是你的别动文字图片发布：2025-07-02 18:22:02 浏览：326

骑自行车女孩图片大全发布：2025-07-02 18:19:45 浏览：978

动漫元宝发型图片发布：2025-07-02 18:16:45 浏览：561

白底无文字图片发布：2025-07-02 18:15:57 浏览：17

抑郁女生图片背影发布：2025-07-02 18:15:55 浏览：951

男生的情侣头像图片大全发布：2025-07-02 18:13:58 浏览：233

头像动漫图片高清女生发布：2025-07-02 18:13:52 浏览：573

如何将相册中图片位置调换发布：2025-07-02 18:02:33 浏览：969

性感图片美女诱惑发布：2025-07-02 17:55:57 浏览：248

word怎么把图片排列在两页上发布：2025-07-02 17:50:26 浏览：60

女生眉毛变淡图片发布：2025-07-02 17:35:57 浏览：925

最新红衣服图片发布：2025-07-02 17:22:18 浏览：808

龙虾简单图片大全发布：2025-07-02 17:20:14 浏览：169

耿直男生霸气的图片发布：2025-07-02 17:15:52 浏览：790

小女孩和学生证图片我想他发布：2025-07-02 17:14:22 浏览：213

带宝宝买衣服高兴的图片发布：2025-07-02 17:13:22 浏览：667

苹果图片表格转换成word文档发布：2025-07-02 16:50:33 浏览：1001

医院挂吊瓶实拍图片女生发布：2025-07-02 16:46:37 浏览：563

怎么将图片放入背景中更融合发布：2025-07-02 16:45:51 浏览：238