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=" ...
随机推荐
- js运动框架之掉落的扑克牌（重心、弹起效果）
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- ubuntu下postgreSQL安装配置
一.安装并配置,并设置远程登陆的用户名和密码 1.安装postgreSQL sudo apt-get update sudo apt-get install postgresql-9.4 在Ubunt ...
- U盘安装CentOS 7.0
U盘安装CentOS 7.0 由于学习需要centos环境,so上网下载centos安装镜像,发现版本已经到7.0了,(╮(╯▽╰)╭,上次折腾还是6.4的版本呢,)花了一点时间下载下来按照装6.4的 ...
- Linux下搭建SVN服务器及自动更新项目文件到web目录（www）的方法
首先搭建SVN服务器 1,安装SVN服务端 直接用apt-get或yum安装subversion即可(当然也可以自己去官方下载安装) sudo apt-get install subversion ...
- 尚学堂Spring视频教程（五）：Spring AOP
在第一节中,我们自己模拟了一个Spring,实现一个保存用户的操作,假如现在有一个需求,在保存的时候记录日志,该怎么做呢? 暂且将记录日志操作就简单的变为在保存用户前输出一句话“save start. ...
- Win10 disable 最近打开
1. 开始菜单 -> Settings -> Personalization -> Start 2. Set "Show most used apps" Off ...
- oracle 删除旧的归档文件或跟踪文件
2016-02-16 可以使用两种方法完成删除旧文件的操作: 一.是使用find命令结合-exec rm; 二.是使用find命令结合使用xargs rm. 例如: 把5天之前的归档文件删除: [or ...
- JS中的split
个人理解spilt函数是javascript中字符串和正则表达式的一个联合应用.功能是根据指定的正则表达式(如果是字符串的话也会转为正则表达式)对字符串进行分割.返回值是一个被分割后的字符串数组. 最 ...
- Linux里的2>&1
我们在Linux下经常会碰到nohup command>/dev/null 2>&1 &这样形式的命令.首先我们把这条命令大概分解下首先就是一个nohup表示当前用户和系统 ...
- Jmeter分布式测试
随着并发量的增大,一台机器就不能满足需求了,所以我们采用分布式(Master-Slaver)的方案去执行高并发的测试 注意事项: Master机器一般我们不执测试,所以可以拿一台配置差些的机器,主要用 ...