jqurey相册放大浏览效果。
/*图片弹窗与切换*/
function honorLayer(){
var honorArray = honorArr();
var $msk = $('.js-mask'),$layer = $('.js-honor-layer'),$close = $('.js-hl-close');
var $honorpic = $('.js-honorpic');
var $showpic = $('#js-honorshow');
var showpic = document.getElementById('js-honorshow')
if(showpic) {
var showpicBg = showpic.style.backgroundImage;
showpicBgstr = showpicBg.substring(5,showpicBg.length-2);
}
var index = 0;
var $prev = $('.js-prev'),$next = $('.js-next');
$honorpic.on('click',function(){
$msk.fadeIn()
$layer.fadeIn()
var src = $(this).attr('src');
index = honorArray.indexOf(src);
$showpic.attr('data-index',index)
src='url("'+src+'")';
document.getElementById('js-honorshow').style.backgroundImage = src;
return index;
})
$close.on('click',function(){
$msk.fadeOut()
$layer.fadeOut()
})
$msk.on('click',function(){
$msk.fadeOut()
$layer.fadeOut()
}) $prev.on('click',function () {
honpicPrev()
})
$next.on('click',function () {
honpicNext()
})
}
/*图片组成数组*/
function honorArr(){
var $honorpic = $('.js-honorpic');
var honorArray = []; for(var i=0,l=$honorpic.length;i<l;i++){
honorArray = honorArray.concat($honorpic.eq(i).attr('src'))
}
return honorArray
}
function honpicPrev(){
var honorArray = honorArr();
var $honorshow = $('#js-honorshow');
var src = '';
var e = $honorshow.attr('data-index')
e--;
if(e<0){
e=honorArray.length-1;
}
src = 'url("'+honorArray[e]+'")';
document.getElementById('js-honorshow').style.backgroundImage = src;
$honorshow.attr('data-index',e)
}
function honpicNext(){
var honorArray = honorArr();
var $honorshow = $('#js-honorshow');
var e = $honorshow.attr('data-index')
console.log(e);
var src = ''
e++;
if(e==honorArray.length){
e=0;
}
src = 'url("'+honorArray[e]+'")';
console.log(honorArray[e]);
document.getElementById('js-honorshow').style.backgroundImage = src;
$honorshow.attr('data-index',e)
}
<div class="honor-layer js-honor-layer">
<div class="hl-close js-hl-close">
×
</div>
<div class="honor-pic-l-w">
<div class="honor-pic-l" id="js-honorshow" style="background-image:url('<{$t_url}>images/b21.jpg')" data-index="">
</div>
<a href="javascript:;" class="honor-pic-prev js-prev" ></a>
<a href="javascript:;" class="honor-pic-next js-next" ></a>
</div> </div>
jqurey相册放大浏览效果。的更多相关文章
- 【unity3D】鼠标控制camera的移动、放大(俯视浏览效果、LOL摄像机移动效果)
在Unity开发中,用鼠标滚轮来实现摄像机的视野范围,鼠标左键拖拉控制摄像机的移动,代码如下: 1.俯视浏览效果 using UnityEngine; using System.Collections ...
- iOS Swift WisdomScanKit二维码扫码SDK,自定义全屏拍照SDK,系统相册图片浏览,编辑SDK
iOS Swift WisdomScanKit 是一款强大的集二维码扫码,自定义全屏拍照,系统相册图片编辑多选和系统相册图片浏览功能于一身的 Framework SDK [1]前言: 今天给大家 ...
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- WPF换肤之八:创建3D浏览效果
原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 ...
- 实现图片旋转木马3D浏览效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于CSS3鼠标滑过放大突出效果
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...
- 一款由jQuery实现的手风琴式相册图片展开效果
之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...
随机推荐
- PyCharm中批量查找及替换
选中需要操作的字符 Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换 源自: PyCharm中批量查找及替换 - Ella_Wu - 博客 ...
- C++开发系列-友元函数 友元类
友元函数 默认一个类的私有属性只能在该类的内部可以直接访问.友元函数申明在内的内部,实现在类的外部可以直接访问类的私有属性. class A1 { public: A1() { a1 = 100; a ...
- LeetCode 28.实现strStr()(Python3)
题目: 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存 ...
- Pascal的sin^-1函数实现
function unsin(t:real):real; var l,r,ans,mid:longint; function dsin(z:real):real; begin exit(sin(z*p ...
- css,js文件后面加一个版本号
由于前几天,更新了项目,更新的文件有js文件,今天客人截图过来,我发现修改之后的效果没有显示出来,我回复说清理浏览器缓存.到了晚上,客人找老板,说还没有处理到這个,说客人不懂這个.所以想到之前自己为了 ...
- 健壮的 Java 基准测试
健壮的 Java 基准测试 健壮的 Java 基准测试,第 1 部分: 问题 了解 Java 代码基准测试的问题 Brent Boyer, 程序员, Elliptic Group, Inc. 简介:程 ...
- leetcode-213-打家劫舍二
题目描述: 方法一: class Solution(object): def rob(self, nums): """ :type nums: List[int] :rt ...
- leetcode-137-只出现一次的数字②
题目描述: 方法一:数学 class Solution: def singleNumber(self, nums: List[int]) -> int: return (sum(set(nums ...
- angularjs中使用swiper时不起作用,最后出现空白位
controller.js中定义swipers指令: var moduleCtrl = angular.module('newscontroller',['infinite-scroll','ngTo ...
- 清空标签间的内容(innerHTML)和 value
jquery 方式: 清空标签的innerHTML: $("#divId").html(""); 清空标签的value: $("#divId" ...