响应式jquery小效果实现思路

有很多同学在实现jquery效果时,不知道怎样符合响应式布局。我写了个小案例,帮大家找找思路,希望能帮到你。 效果如下:

代码如下:

<!doctype html>

<html>

<head>

<style>

body{margin:0;}

.box{width:48%;/*图片原宽度为480像素*/overflow:hidden;background-color:black;}

.img_box{width:200%;/*两张图就是960像素*/overflow:hidden;}

.img_box img{width:50%;/*每张图占960像素的一半*/display:block;float:left;}

</style>

<script src="jquery.js"></script>

<script>

$(function(){

var n=0;

function run(){

if(n<1){

n=n+1;

}else{

n=0;

}

/*获得图片的宽度*/

var imgW = $(".img_box img:first").width();

/*将图片宽度作为动画补间距离*/

$(".img_box").animate({marginLeft:-imgW*n},1000);

}

setInterval(run,2000);

})

</script>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<div class="box">

<div class="img_box">

<img src="images/low_banner01.png">

<img src="images/low_banner02.png">

</div>

</div>

</body>

</html>

原文发布于微信公众号 - 我分享我快乐(duan_uid)

原文发表时间:2015-04-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏熊二哥

Html与CSS快速入门02-HTML基础应用

这部分是html细节知识的学习。 ? 示例代码:https://github.com/wanliwang/Bjork.Demo htmlDemo 最近胡乱删除...

3426
来自专栏生信宝典

WB图片处理-教你利用PPT做出漂亮的WB图片!

WB是很科研多小伙伴都会用到的实验技术,而对于最终WB图片的处理也是各自有各自的手段,不过主流主要分为两大派:PPT或者Adobe Photoshop/Illu...

1.7K2
来自专栏知无涯

PS给照片换背景的小技巧[易学易用]

46117
来自专栏企鹅号快讯

6个超实用的AI小工具

? 6个超实用的AI小工具 BGM:鬼火の童・鬼切、虎徹にございます! 今天学习的AI实用小工具,分分钟帮我们提高666倍工作效率,让我们听着这首欢快魔性的小...

2438
来自专栏我的前端

如何用纯 CSS 创作一个小球上台阶的动画

https://github.com/comehope/front-end-daily-challenges

1162
来自专栏数据小魔方

条件格式单元格图表

今天跟大家分享条件格式单元格图表! ▼ 这类图表比较特殊,不是通过excel的内置图标库制作,而是通过excel的条件格式工具制作的存放在单元格中的图表。这种图...

3928
来自专栏AI研习社

GPU 加速到底是个啥?

众所周知,网页不仅应该被快速加载,同时还应该流畅运行,比如快速响应的交互,如丝般顺滑的动画…… 一. GPU 加速能做什么? ? 首先我们要了解什么是 16...

4247
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(2)

接着来,也是刚刚遇到的 panel怎么进行收缩 这会panel就会出现这个 ? 点这个就可以收缩了 collapsible: true, pa...

3276
来自专栏Web行业观察

简单了解下无障碍设计模式

一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的...

3004
来自专栏大数据钻研

手把手教你打造一个纯CSS图标库

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉...

3234

扫码关注云+社区

领取腾讯云代金券