导航:首页 > 文字图片 > jquery图片文字

jquery图片文字

发布时间:2022-02-22 01:44:26

① js点击图片在文本框内显示文字

亲,改一下js代码,改成这样就可以了

<scripttype="text/javascript">
tb=document.getElementById('textbox');
spans=document.getElementsByTagName("span");
for(vari=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].onclick=function()
{
alert(spans[this.index-1].innerHTML);
}
}
</script>

② 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标签长度,一个个的替换(很麻烦,不推荐)

③ js点击图片后所点的图片变成一段文字

<div>
<imgid="img1"src="1.jpg"onclick="Cmd(this,'span1');"/>
<spanid="span1"style="display:none;"onclick="Cmd(this,'img1');">介绍文字</span>
</div>
<script>
functionCmd(v,id){
v.style.display="none";
document.getElementById(id).style.display="";
}
</script>

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

图片的html信息是给定的还是从内容中截取的?给定的话简单点,截取的话估计还要增则表达式过滤,很麻烦的。
楼上的方法很不错。
1.js取到html信息图片节点--IMG
2.然后 remove 整个IMG节点
3.添加新的节点 比如p
4..html内容

⑤ jquery 怎么样同时输出文字和图片

我们创建一个div存放文字的,一个div存放图片的。
利用jquery,如何实现在文字和图片间切换显示?
2

接着加上一些css样式,先设置图片默认是隐藏的。
利用jquery,如何实现在文字和图片间切换显示?
3

因为我们是借助jquery来操作的,所以需要先引入脚本文件。
利用jquery,如何实现在文字和图片间切换显示?
4

然后添加js脚本逻辑,先为txt的div添加事件。点击后,把自身隐藏,然后为img的div显示出来。
利用jquery,如何实现在文字和图片间切换显示?
5

同样为img的div添加点击事件,也是把自身隐藏,而把文字div显示出来。
利用jquery,如何实现在文字和图片间切换显示?
6

运行页面,先显示的文字内容。我们点击这个div。
利用jquery,如何实现在文字和图片间切换显示?
7

点击后,就切换为图片显示了。再点击这个图片,会切换回去刚才的文字内容的。

⑥ jquery文字图片切换效果

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

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

},

function(){

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

}

});

⑦ 一段鼠标经过文字显示图片的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隐藏,然后显示当前的。就行了。测试有效

⑧ 怎么在js控制的背景图片里添加文字

将 id="bg" 这个 div 的 style(样式)中的 position(位置)设置为 relative(相对),
然后在里面加一个 div 写文字,将它的 position 设置为 absolute(绝对),调整 top 和 left 来改变它的显示位置。

把 div 替换为下面这样

<div id="bg" style="position: relative;">
<div id="text" style="position: absolute; top: 100px; left: 200px;"><p>添加文字</p></div>
<img src="图片地址自己换上" alt="HIGH">
</div>

⑨ js图片+文字切换

下面是我写过的js类似flash的全码:调用完全类同于flash

<script>
//-----WNum 为图片宽度
//-----HNum 为图片高度
//-----TNum 为文字高度(可为空 ,即不显示)
function go_Img(WNum,HNum,TNum){
Go_Num=(imgUrl.length-1);key=0;adNum=0;theTimer='';
var C_lass;
var $=function $(str){return document.write(str);};
var C_ss="<style>";
C_ss=C_ss+"div{overflow:hidden;}";
C_ss=C_ss+".W_Ord{overflow;hidden;text-align:center;color:#F00;font-weight:bold;clear:both;width:"+WNum+"px;height:"+TNum+";background-color:#eee;}";
C_ss=C_ss+".Min_On{color:#fff;Float:right;background-color:#f00;cursor:pointer;width:30px;height:20px;padding-top:1px;border:1px solid #f60;text-align:center;font-weight:bold;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;}";
C_ss=C_ss+".Min_Off{color:#fff;Float:right;cursor:pointer;width:30px;height:20px;padding-top:1px;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;text-align:center;font-weight:bold;}";
C_ss=C_ss+"</style>";
$(C_ss);C_ss='';
$("<Div style='width:"+WNum+"px;height:"+HNum+"px;border:1px solid #eee;'>");
$("<div style='width:"+WNum+"px;height:"+HNum+"px;'><img style='Cursor:Pointer;Filter:revealTrans(ration=2,transition=12);width:"+WNum+"px;height:"+HNum+"px;' src='"+imgUrl[1]+"' name=imgInit onclick=go_Url();></Div>");
$("<div class='Rig' style='width:"+WNum+"px;height:20px;margin-top:-20px;'>");
for (var i=100;i>0 ;i=i-2){
$("<Div style='float:right;width:4px;height:20px;background-color:#000;filter:alpha(opacity="+i/2+");-moz-opacity:0."+i/20+";opacity: 0."+i/20+"; '></Div>");
}
$("</Div>");
$("<Div class='Rig' style='width:"+WNum+"px;height:"+HNum+"px;margin-top:-20px;'>");
for (var j=Go_Num;j>0 ;j--){
if (j==1){C_lass='Min_On';}else{C_lass='Min_Off';}
$("<Div Id='Min"+j+"' class='"+C_lass+"' onmouseover=nextAd("+j+");>"+j+"</Div>");
}
$("</Div>");
$("</Div>");
if (TNum && TNum!=''){
$("<Div Id='W_Ord' class='W_Ord'>"+imgWord[1]+"</Div>");
}
nextAd(1);
}
function nextAd(GetNum){
var O=function O(objid){return document.getElementById(objid);}
adNum=adNum%Go_Num;
adNum++ ;
if(GetNum!=undefined && GetNum!=0){adNum=GetNum;}
if(key==0){key=1;}
else if(document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
imgInit.filters.revealTrans.play();
if (document.all.W_Ord!=undefined){document.all.W_Ord.innerHTML=imgWord[adNum];}
for (var i=1;i<(Go_Num+1);i++ ){O('Min'+i).className='Min_Off';}
O('Min'+adNum).className='Min_On';
}
document.images.imgInit.src=imgUrl[adNum];
if (GetNum==undefined){theTimer=setTimeout(nextAd, 6000);}
else{clearTimeout(theTimer);theTimer=setTimeout(nextAd, 6000);}
}
function go_Url(jumpTarget){
jumpUrl=imgLink[adNum];
jumpTarget='_blank'; //_blank
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>

<script>
//-------建产数组
var imgUrl=new Array();
var imgLink=new Array();
var imgWord=new Array();
imgUrl[1]='http://hfxhyy.35hf.cn/back/UpPic/8vzrlf5v1czut.jpg';
imgLink[1]='http://hfxhyy.35hf.cn/Object.asp?StrId=20';
imgWord[1]='Six信息';
imgUrl[2]='http://hfxhyy.35hf.cn/back/UpPic/q6hxyzon6by4b.jpg';
imgLink[2]='http://hfxhyy.35hf.cn/Object.asp?StrId=18';
imgWord[2]='Five';
imgUrl[3]='http://hfxhyy.35hf.cn/back/UpPic/kdiqte-0rune7.jpg';
imgLink[3]='/Object.asp?StrId=17';
imgWord[3]='Four';
imgUrl[4]='http://hfxhyy.35hf.cn/back/UpPic/mrocr4k8v1f40.jpg';
imgLink[4]='http://hfxhyy.35hf.cn/Object.asp?StrId=16';
imgWord[4]='Three';
imgUrl[5]='http://hfxhyy.35hf.cn/back/UpPic/rsba4jy1m7mf6.jpg';
imgLink[5]='http://hfxhyy.35hf.cn/Object.asp?StrId=15';
imgWord[5]='Two';
imgUrl[6]='http://hfxhyy.35hf.cn/back/UpPic/ttqnfeij7_d8p.jpg';
imgLink[6]='http://hfxhyy.35hf.cn/Object.asp?StrId=14';
imgWord[6]='one';

// 调用方法
go_Img(290,205,20); //-----------------------------调用方法
</script>

阅读全文

与jquery图片文字相关的资料

热点内容
可爱手绘图片漫画女生 浏览:354
愚人节文字图片大全 浏览:225
扫马路的男生图片 浏览:385
word图片排版参照 浏览:64
临摹图片素材高清 浏览:40
紫色中发发型图片 浏览:839
情侣头像带文字图片 浏览:40
孕期发型图片大全 浏览:220
word插入图片放不开咋回事 浏览:22
美女无赤裸裸解图片 浏览:928
小飞在线图片文字识别 浏览:775
酷酷的墨镜女生图片 浏览:110
安全动漫图片大全图片 浏览:615
小钓箱价格及图片 浏览:237
美女潮流图片 浏览:261
美食背景大全高清图片 浏览:703
手机扫描王中的图片如何微信发送 浏览:270
精选图片美女 浏览:708
宣统三年大清铜币价格和图片 浏览:170
黄瓜装盘花式图片大全简单 浏览:740