jQuery点击图片放大拖动查看效果
效果如图:
放大前:
放大后(可拖动图片浏览):
源码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery点击图片拖动放大查看效果</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageView.js"></script>
<script type="text/javascript">
$(function () {
$('#imageView_container').imageView({ width: 850, height: 708 });
});
</script>
<style type="text/css"> body {
background-color: #555;
color: #fff;
} a img {
border: none;
} #imageView_container {
border: 2px solid #000;
margin: 0 auto;
} #imageView_container.iv-loading {
border: 2px solid #ff6600;
}
</style>
</head>
<body>
<div id="imageView_container" class="" style="width: 850px; height: 708px; overflow: hidden; position: relative; cursor: -moz-zoom-in;">
<img src="http://www.xwcms.net/webAnnexImages/fileAnnex/201506/27268/images/12awe51.jpg" rel="http://www.xwcms.net/webAnnexImages/fileAnnex/201506/27268/images/sad2.jpg" alt="" id="image_view_1" style="visibility: visible; position: absolute; left: 0px; top: 0px;">
</div>
</body>
</html>
js资源下载地址:https://pan.baidu.com/s/1ew7iernrBAWZ0kuhr21s0A#list/path=%2F
jQuery点击图片放大拖动查看效果的更多相关文章
- jQuery点击图片放大显示原图效果
HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格
查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery点击图片选中特效
jquery点击图片选中特效 点击在线预览效果
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
随机推荐
- NFS 系统搭建 - 成功
NFS是Network File System的缩写,即文件系统.客户端通过挂载的方式将NFS服务器端共享的数据目录挂载到本地目录下. 工作流程 1.由程序在NFS客户端发起存取文件的请求,客户端本地 ...
- Daily Pathtracer!安利下不错的Pathtracer学习资料
0x00 前言 最近看到了我司大网红aras-p(Aras Pranckevičius)的博客开了一个很有趣的新系列<Daily Pathtracer~>,来实现一个简单的ToyPathT ...
- .Net深入实战系列—JSON序列化那点事儿
序 当前主流的序列化JSON字符串主要有两种方式:JavaScriptSerializer及Json.net(Nuget标识:Newtonsoft.Json).JavaScriptSerializer ...
- BIO,NIO与AIO的区别
Java NIO : 同步非阻塞,服务器实现模式为一个请求一个线程,即客户端发送的连接请求都会注册到多路复用器上,多路复用器轮询到连接有I/O请求时才启动一个线程进行处理.Java AIO(NIO.2 ...
- 十几分钟让你学会MySQL布尔和延迟盲注手工操作
作者:Max老白Gān丶链接:http://www.lofter.com/lpost/1fefbc76_12d25dc31来源:LOFTER 注入常用到的几个函数 1 mid(str,1,3) 字 ...
- [Swift]LeetCode199. 二叉树的右视图 | Binary Tree Right Side View
Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...
- [C#]批量修改文件后缀名
代码: /// <summary> /// 修改文件后缀 /// </summary> /// <param name="extension"> ...
- 互联网最新kafka技术面试题含答案
1.Kafka 的设计时什么样的呢? Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消费消息的程序成 ...
- slice全解析
slice全解析 昨天组内小伙伴做分享,给出了这么一段代码: package main import ( "fmt" ) func fun1(x int) { x = x + 1 ...
- Redis学习——数据结构介绍(四)
一.简介 作为一款key-value 的NoSQL数据库,Redis支持的数据结构比较丰富,有:String(字符串) .List(列表) .Set(集合) .Hash(哈希) .Zset(有序集合) ...