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

jquery图片显示文字

发布时间:2023-03-17 20:40:27

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

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

② 网页实现点击图片后图片消失显示文字

给你实现思路:

扑克翻页效果的原理在于利用眼睛观察物体的错觉,扑克翻页效果分解为两个步骤:

  1. 按扑克中轴线,以固定速率将img的width逐步变为0,这样扑克将消失;

  2. 动态替换img为扑克反面,以同样速率将img的width由0变为原宽度,完成翻页。


关键代码:

<div id="divad1" class="poker" style="text-align: center;">

<a onclick="javascript:flipPoker()" href="#"><img src="front.jpg" id="picad1" height="200" border="0" style="width: 200px; display: inline-block;"></a></div>


给这个div内的img元素绑定函数flipPoker

function flipPoker( ){

var tar = $('#picad1');

var origin = tar.attr('src');

var back = "back.jpg" //扑克背面图片名称

//以中轴线渐变将图片隐藏,并瞬间替换img图片内容

tar.animate({width:'0px'},"fast",function(){tar.attr('src',origin);});

//立即渐变还原图片width

tar.animate({width:'200px'},"fast");

}

=============

上述代码用到了jQuery1.8.3 的animate函数

html代码里的样式"text-align:center"很关键,没有这个样式,图片将会自左向右渐变,加了样式之后就是按中轴线渐变了


如果还不行就参考这个页面的代码:

http://vwfc-dealer.cneln.net/eln3_asp/index.do

③ 一段鼠标经过文字显示图片的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图片显示文字相关的资料

热点内容
表单中多个图片如何全选 浏览:853
wps的word怎么统一图片大小排版 浏览:606
额头宽的女孩图片 浏览:769
简单的黑白线描画图片大全 浏览:246
腰控男生图片 浏览:892
word图片无清晰度工具 浏览:626
一直播放古风衣服图片 浏览:494
男生男生简笔画图片大全 浏览:212
如何评价一张图片 浏览:977
美女观音菩萨图片 浏览:565
动漫马桶图片 浏览:890
35岁的衣服搭配图片 浏览:143
女人的衣服搭配图片 浏览:463
黑暗哥特萝莉动漫图片 浏览:486
英伦动漫人物图片 浏览:891
可爱汪星人卖萌图片 浏览:46
卡通女生漫画图片 浏览:98
动漫少女森系图片 浏览:503
大门把手图片及价格 浏览:82
怎么把电脑图片放大清晰 浏览:404