`
quakezh
  • 浏览: 19520 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用jQuery动态插入IMG时设定尺寸的一些问题

阅读更多
想在指定元素下动态插入IMG同时设置好尺寸, 代码如下

var e=$("#mp_c1_bg");
$("<img src='a.gif' />").attr({width:e.css('width'), height:e.css('height')}).appendTo(e);

结果IMG插入成功, 但尺寸为0;

alert(e.css('width'))

结果显示120px, 类型是String;

再试验直接写入:

$("<img src='a.gif' />").attr({width:'120px', height:'120px'}).appendTo(e);

居然尺寸还是0!再改成

$("<img src='a.gif' />").attr({width:'120', height:'120'}).appendTo(e);

可以了!难道是只能接受Number类型的赋值? 那又该如何表达呢?
后来找到jQuery.dimension(http://plugins.jquery.com/project/dimensions), 可以返回指定元素的各类尺寸信息, 而且是Number类型, 搞定!
最后写法:

$("<img src='a.gif' />").attr({width:e.width(), height:e.height()}).appendTo(e);

当然别忘了在前面

<script type="text/javascript" src="js/jquery.dimensions.min.js"></script>


..........................................................OVER
分享到:
评论

相关推荐

    Jquery 图片懒加载

    **jQuery 图片懒加载原理与实现** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会导致页面加载速度变慢,增加服务器负担。为了解决这个问题,引入了“图片懒加载”技术。它是一种优化策略,只在...

    html+css+jquery弹幕例子

    2. 动态添加弹幕:当用户触发某个事件(如点击按钮)时,可以使用 jQuery 的 `.append()` 或 `.prepend()` 方法将新的弹幕文本插入到容器中。 3. 动画效果:jQuery 的 `.animate()` 方法使得创建自定义动画变得简单...

    jquery自适应照片瀑布流

    在本教程中,我们将深入探讨如何使用jQuery实现一个自适应的照片瀑布流。 首先,我们需要理解瀑布流布局的核心思想:动态计算元素的宽度和高度,以保证不同大小的图片能在同一列中正确对齐。jQuery作为一个强大的...

    Jquery最近仿淘宝最近浏览

    2. **页面加载**:当页面加载时,使用jQuery读取LocalStorage中的浏览历史数据。通过`$.getJSON()`或`$.get()`方法获取数据,并转换为JavaScript对象。 3. **DOM操作**:获取数据后,我们需要动态创建DOM元素来展示...

    jquery ui页面滚动底部显示浮动弹出层图文列表展示

    本文将深入探讨如何使用 jQuery UI 实现一个功能:当页面滚动到底部时,显示一个浮动的弹出层,用于展示图文列表。这个功能在许多网站中常见,比如加载更多内容、展示评论或广告等。 首先,我们需要理解 jQuery UI ...

    jquery幻灯片效果

    对于图片,可以设定其尺寸、过渡效果(如淡入淡出)和位置。按钮样式也需要进行定制,确保它们在页面上可见且易于点击。 `jquery.js`是核心的JavaScript文件,其中包含了实现幻灯片效果的代码。jQuery提供了方便的...

    jquery图片栅格替换效果.zip

    在前端开发中,jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在这个“jquery图片栅格替换效果.zip”压缩包中,包含的是一组使用jQuery实现的图片栅格替换效果的示例。这个...

    jquery cycle 图片滚动详解

    如果你需要在运行时动态添加或删除图片,可以使用`add()`和`remove()`方法: ```javascript // 添加图片 $('#slideshow').cycle('add', '&lt;img src="newImage.jpg" /&gt;'); // 删除图片 $('#slideshow').cycle('...

    jquery仿flash图片轮播

    【jQuery仿Flash图片轮播】是一种使用JavaScript库jQuery实现的动态图像展示技术,它借鉴了早期Flash技术中的图片轮播效果,但不依赖Flash插件,因此在移动设备和不支持Flash的浏览器上也能正常工作。jQuery的灵活性...

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    jQuery仿百度搜索框下拉热门关键词列表代码

    最后,`img`目录可能包含了一些用于美化搜索框或下拉列表的图片资源,例如图标等。确保在CSS中正确引用这些图片,以提高视觉效果。 总的来说,这个功能通过jQuery实现了百度搜索框的热门关键词下拉列表,提升了用户...

    jQuery点击添加图片瀑布流布局效果

    4. **jQuery插件**:为了实现动态加载和瀑布流效果,可以使用第三方jQuery插件,如`jQueryPbl`。在页面加载完成后,调用插件初始化函数,例如`$("#container").masonry({})`,传入配置参数以定制行为。 5. **图片...

    正益无线首页jQuery焦点图.zip

    在这个项目中,JavaScript与jQuery结合,用于监听用户行为(如鼠标点击或触摸),实时更新焦点图的状态,并可能包含一些优化策略,如防止快速切换时的闪烁,或者处理边界情况(如首尾图片的无缝切换)。 综合来看,...

    jQuery爆炸切换效果焦点图.rar

    2. **CSS样式**:我们需要为图片添加一些基本样式,如尺寸、位置等,同时利用CSS3的`transition`和`transform`属性来实现爆炸和重组的动画效果。这些属性会在jQuery动画开始和结束时被修改。 3. **jQuery脚本**:...

    jQuery评论框插入QQ表情特效代码

    【jQuery评论框插入QQ表情特效代码】是一种在前端开发中常见的功能实现,它结合了JavaScript、ECMAScript和jQuery库,旨在为用户在评论输入框中提供类似QQ聊天中的表情选择和插入体验。这个功能在社交网站、博客、...

    jQuery输入域名网址生成二维码代码

    为了确保二维码图片的正确显示,可能还需要考虑错误处理,比如当输入的域名格式不正确或者生成二维码时出现问题。这时,可以使用jQuery显示错误提示信息,或者改变按钮状态以阻止进一步的尝试。 最后,这个功能可能...

    用html css jquery写的轮播图

    在创建轮播图时,我们需要使用`&lt;div&gt;`元素作为轮播容器,`&lt;img&gt;`元素来插入图片,并可能使用`&lt;a&gt;`元素来创建导航按钮。例如: ```html &lt;img src="image1.jpg" alt="Image 1"&gt; &lt;img src="image2.jpg" alt="Image ...

    jQuery+CSS3随机分布的心形图片签到墙代码

    `img`文件夹存储着所有待显示的图片,它们将在页面加载后被jQuery动态插入并动画化。`js`文件夹内的脚本,如`main.js`,则是整个特效的逻辑中心,负责处理图片的加载和动画的执行。 实现这个特效的过程大致分为以下...

    jquery 打开层表情

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果以及异步通信等多个方面的工作。"jQuery 打开层表情"这个主题主要涉及的是如何利用 jQuery 实现一个弹出层来展示表情...

    jQuery带缩略图电影站幻灯片.zip

    通过定义不同的选择器,可以设定幻灯片的尺寸、位置、颜色、边框、阴影等样式属性,同时,CSS3引入的过渡和动画效果可以让幻灯片在切换时呈现出平滑自然的视觉体验。 HTML5作为现代网页的标准,其新的语义化标签如`...

Global site tag (gtag.js) - Google Analytics