jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片旋转展示收缩效果</title>
<style>
*{margin:0;padding:0;list-style-type:none;}
img{border:0;}
body{background:#F1F1F1;}
.comp{background:url(http://demo.lanrenzhijia.com/2015/pic0106/images/7.png) no-repeat center center;width:200px;height:200px;display:block;cursor:pointer;position:relative;margin:230px auto 0 auto;}
.comp ul.reset li{position:absolute;}
</style>
</head>
<body>
<!--代码部分begin-->
<div class="comp">
<ul class="reset" style="display: block; z-index: 50; opacity:0;">
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/2.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/3.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/4.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/5.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/6.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/7.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/8.png" alt="懒人之家" /></a></li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery-1.7.2.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/mobilyblocks.js"></script>
<script>
$(function(){
$('.comp').mobilyblocks({
trigger:'click',
direction:'counter',
duration:500,
zIndex:50,
widthMultiplier:1.1
});
});
</script>
<!--代码部分end-->
</body>
</html>
jQuery图片旋转展示收缩效果的更多相关文章
- jQuery图片组展示插件----Galleria使用简介
1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...
- jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
- jquery图片3D旋绕效果 rotate3Di的操作
这是一个图片效果,很简单实用,只需要一个"rotate3Di.js"的插件就行, 关于rotate的用法有如下几种: $(选择器).rotate3Di(30); //把图片3D旋转 ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- jquery+css实现菜单收缩效果并适应多种浏览器与移动平台
效果 出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease ...
- 纯css3图片旋转展示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- jQuery 3D旋转展示焦点图
在线演示 本地下载
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
随机推荐
- win7 audio repeater 虚拟声卡 屏幕录像专家
- HTTP 协议详解
相关文章:HTTP 协议之压缩 当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相 ...
- IE6 跟随滚动解决方法
position:fixed;_position:absolute; left:0px; top:350px;_top:expression(documentElement.scrollTop +do ...
- [DFNews] Touch ID不是神话，指模依旧能搞定。
扫描制作翻模,使用含石墨硅胶压膜,前者复制指纹纹路,后者欺骗活体检测.
- 04-c#入门（类型转换）
“无论是什么类型,所有的数据都是一系列的位,即一系列0和1.变量的含义是通过解释这些数据的方式来传达的.”——这句原话是书上翻译的,不过后一句话总感觉理解起来不是很通俗,自己觉得这样理解可能会合适些: ...
- （转）打印相关_C#图片处理Bitmap位图缩放和剪裁
原文地址:http://blog.sina.com.cn/s/blog_6427a6b50101el9d.html 在GDI+中,缩放和剪裁可以看作同一个操作,无非就是原始区域的选择不同罢了. /// ...
- 使用Maven加载项目有Dubbo框架时出现的常见异常情况
异常描述: The matching wildcard is strict, but no declaration can be found for element 'dubbo ...
- 安装完Pydev却无法创建Python工程
为了方便以后工作,今天在ADT里面安装了Pydev(http://pydev.org/updates),可是安装完之后,新建项目的时候却找不到Pydev,perference中也没有. 紧接着尝试安装 ...
- NOIP模拟赛-护花
[题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时候,他看到了一幕惨剧:牛们正躲在他的花园里,啃食着他心爱的美丽 ...
- 在requirejs中使用qunit
requirejs(['QUnit'], function(qunit) { qunit.test('test name', function(assert) { // 一些测试, assert }) ...