html5css3实现图片选择 美化图片选择效果 - jQueryfuns
上传于 3年前|
html5-css3-实现图片选择
// item selection
$('li').click(function () {
$(this).toggleClass('selected');
if ($('li.selected').length == 0)
$('.select').removeClass('selected');
$('.select').addClass('selected');
counter();
// all item selection
$('.select').click(function () {
if ($('li.selected').length == 0) {
$('li').addClass('selected');
$('.select').addClass('selected');
$('li').removeClass('selected');
$('.select').removeClass('selected');
counter();
// number of selected items
function counter() {
if ($('li.selected').length & 0)
$('.send').addClass('selected');
$('.send').removeClass('selected');
$('.send').attr('data-counter',$('li.selected').length);
立即下载 ( 文件大小：0.14 M)
Mozilla Firefox
Google Chrome
也许你还喜欢
键盘快捷键:Hugh 已赞助30元宋小强 已赞助10元
红豆生南国，春来发几枝
当前位置：
& JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的，仅仅几行代码即可实现。
首先在网页中嵌入背景音乐，html5代码为：
&script src="/jquery.js"&&/script&
&a class="mscBtn" id="audioBtn" title='最幸福的人' style="cursor:"&&/a&
&audio id="bgMusic" src="/zuixingfuderen.mp3" autoplay="autoplay"&&/audio&
通过audio的id即可控制音乐的播放（play()）和暂停（pause()），同时通过改变class改变按钮的背景图片，js代码为（切记要引入jq库）：
$(function(){
var music = document.getElementById("bgMusic");
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}});
css样式为：
.pause {background-position: 0}
.mscBtn {height: 50
background: #fff url(/musicbtn.png) no-
demo效果就是本页面，当你打开了该页面之后一定有音乐播放，如果你按以下的按钮没反应，请刷新页面后再点击下面的图标。
应大伙的要求，改进了下,让网页背景音乐支持多首歌曲，播放完在随机播放下一首并且不会和上一首重复，并提供播放暂停按钮，本来这篇文章只是提供最简单的功能让大家自行扩展的，既然大家都提到了这个，我在评论里面也回了，在把最终的版本写在这篇文章后续上，主要就是js换成以下的：
$(function(){
var music = document.getElementById("bgMusic");
var musicArr=[//下面对应歌曲链接和歌名，自行添加用,隔开
{url:'/tbhdqx.mp3',title:"唐伯虎点秋香"},
{url:'/abzxh.mp3',title:"敖包再相会"},
{url:'/lmzda.mp3',title:"辣妹子的爱"},
{url:'/32.mp3',title:"32号嫁给你"},
{url:'/tongxinjishou.mp3',title:"痛心疾首"},
{url:'/rgangdst.mp3',title:"如果爱能感动上天"},
{url:'/cz.mp3',title:"车站"},
{url:'/hn.ogg',title:"很难"},
{url:'/aqlmysdsc.mp3',title:"爱情里没有谁对谁错"},
{url:'/dlaqdln.mp3',title:"丢了爱情丢了你"},
{url:'/cty.mp3',title:"闯天涯"}
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}
function randomMusic(){
var isone=$("#bgMusic").attr('src');
var noone=musicArr[parseInt(Math.random()*musicArr.length)];
if (noone.url==isone){var noone=musicArr[parseInt(Math.random()*musicArr.length)];}
$("#bgMusic").attr('src',noone.url);
$("#audioBtn").attr('title',noone.title);
randomMusic();
$("#bgMusic").on('ended',function(){
randomMusic();
转载请保留链接： | 出处：| 本文链接地址：
阅读本文的用户还浏览了
30首精选dj 2012珍藏版 音质感受...
功能齐全好用的tooltip jquer...
简易无缝滚动功能齐全轮播组件...
Javascript截取混合中英文为等宽...
http-proxy代理nodejs服务...
智取百度、谷歌分词技术实现智能模糊搜索...
总共有: 75条评论
0.356秒内172次SQL查询|内存26MB
版权所有&& -&秋叶网络博客34被浏览26375分享邀请回答&div id="image-wrap"&
&div&&/div&
/* scss 语法 */
#image-wrap {
width: 100%;
padding-bottom: 70%;/* 比例 10 比 7 */
background: url(/path/to/your/image) no-
top: 0; bottom: 0; left: 0; right: 0;
background-size: 100%;
04 条评论分享收藏感谢收起&div class="image-wrap"&
&video id="videoxx" width="默认大小" height="默认大小" poster="默认poster"&&source /&&/video&
&script language="js部分"&
$("videoxx").设置onload = function() {
aspect_ratio = this.videoWidth / this.videoH
// 根据得到的宽高比来算video标签高度
$("videoxx").width=this.videoWidth&img-wrap宽度 ? this.videoWidth : img-wrap宽度;
$("videoxx").height=$("videoxx").height/aspect_
// FIXME: 根据poster的情况可以考虑裁剪或者重新指定另外一张poster
＝＝＝＝＝＝＝ 补充 ＝＝＝＝＝＝＝＝另外，我搜索了一下，也有人写了响应式媒体标签的经验，可以参考下：6添加评论分享收藏感谢收起查看更多回答iOS中加载HTML数据，并点击图片或链接进行相应的操作 - CSDN博客
iOS中加载HTML数据，并点击图片或链接进行相应的操作
开发中，有时候我们需要展现HTML类型的数据，这时候，我们多数选择用UIWebView加载，但是当我们需要加载大量的HTML数据时，使用UIWebView加载，性能会降低，尤其是当UITableViewCell需要放大量的HTML数据时，如果你用UIWebView加载这些HTML数据，你会发现，tableview会有卡顿的现象。
那怎样去优化这个卡顿现象呢？我们知道WKWbebView的加载速度比UIWebView提升差不多一倍的, 内存使用上面,反而还少了一半，所以我们可以采用WKWebView对其进行优化。今天把一个三方类介绍给大家，那就是,这个类兼容WKWebView和UIWebView，实现了UIWebView到WKWebView的对接，即使你之前的项目是用的UIWebView,那也没关系，只要将UIWebView换成IMYWebView就可以了。
另外，加载HTML数据自然绝多数会有图片和内置链接，我们也会希望可以点击图片进行浏览、放大和缩小，可以点开链接，那么，该怎样去实现呢？
1、在工程中导入IMYWebView
#import "IMYWebView.h"
2、创建IMYWebView,并嵌套到TableView中，实现tableview的相关代理方法
@interface ViewController ()&UITableViewDataSource, UITableViewDelegate,IMYWebViewDelegate,HZPhotoBrowserDelegate&
@property(nonatomic, strong)UITableView *tableV
@property(nonatomic, assign)CGFloat webviewH
@property(nonatomic, copy)NSString *HTMLD
@property(nonatomic, strong)NSMutableArray *imageA
@property(nonatomic, strong)IMYWebView *IMYwebV
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.navigationBar.translucent = NO;
self.title = @"tableviewcell嵌套webview载HTML";
self.view.backgroundColor = [UIColor whiteColor];
[self getHTMLData];
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width , self.view.frame.size.height - 64) style:UITableViewStylePlain];
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.tableHeaderView = [[UIView alloc] init];
[self.view addSubview:_tableView];
_htmlWebView = [[IMYWebView alloc] init];
_htmlWebView.frame = CGRectMake(0, 0, _tableView.frame.size.width, 1);
_htmlWebView.delegate = self;
_htmlWebView.scrollView.scrollEnabled = NO;
_htmlWebView.scrollView.bounces = NO;
_htmlWebView.opaque = NO;
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row != 3) {
return 60;
return _webviewH
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
if (indexPath.row == 3) {
[cell.contentView addSubview:_htmlWebView];
[_htmlWebView loadHTMLString:_HTMLData baseURL:nil];
cell.textLabel.text = [NSString stringWithFormat:@"第%ld行",(long)indexPath.row];
3、实现IMYWebView的相关代理方法
-(void)webViewDidFinishLoad:(IMYWebView *)webView{
[self.htmlWebView evaluateJavaScript:@"document.documentElement.scrollHeight" completionHandler:^(id object, NSError *error) {
CGFloat height = [object integerValue];
if (error != nil) {
_webviewHight =
[_tableView beginUpdates];
self.htmlWebView.frame = CGRectMake(_htmlWebView.frame.origin.x,_htmlWebView.frame.origin.y, _tableView.frame.size.width, _webviewHight );
[_tableView endUpdates];
[webView evaluateJavaScript:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.for(var i=0; i &i++){img=imgs[i];if(\\"ad\\" ==img.getAttribute(\\"flag\\")){var parent = this.parentNif(parent.nodeName.toLowerCase() != \\"a\\")}img.onclick=function(){window.location.href='image-preview:'+this.src}}}" completionHandler:^(id object, NSError *error) {
[webView evaluateJavaScript:@"assignImageClickAction();" completionHandler:^(id object, NSError *error) {
[self getImgs];
-(BOOL)webView:(IMYWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if ([request.URL isEqual:@"about:blank"])
return true;
if ([request.URL.scheme isEqualToString: @"image-preview"])
NSString *url = [request.URL.absoluteString substringFromIndex:14];
if (_imageArray.count != 0) {
HZPhotoBrowser *browserVc = [[HZPhotoBrowser alloc] init];
browserVc.imageCount = self.imageArray.count;
browserVc.currentImageIndex = [_imageArray indexOfObject:url];
browserVc.delegate = self;
[browserVc show];
return NO;
if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
WebViewURLViewController *webViewVC = [WebViewURLViewController new];
webViewVC.URLString = request.URL.absoluteString;
[self.navigationController pushViewController:webViewVC animated:YES];
return NO;
return YES;
4、获取文章图片个数的方法
#pragma mark -- 获取文章中的图片个数
- (NSArray *)getImgs
NSMutableArray *arrImgURL = [[NSMutableArray alloc] init];
for (int i = 0; i & [self nodeCountOfTag:@"img"]; i++) {
NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].src", i];
[_htmlWebView evaluateJavaScript:jsString completionHandler:^(NSString *str, NSError *error) {
if (error ==nil) {
[arrImgURL addObject:str];
_imageArray = [NSMutableArray arrayWithArray:arrImgURL];
return arrImgURL;
- (NSInteger)nodeCountOfTag:(NSString *)tag
NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('%@').length", tag];
int count =
[[_htmlWebView stringByEvaluatingJavaScriptFromString:jsString] intValue];
5、点击图片进行浏览的相关方法，这个图片浏览是封装好的一个浏览器，在这里暂时不做介绍
#pragma mark - photobrowser代理方法
- (UIImage *)photoBrowser:(HZPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
return [UIImage imageNamed:@"gg_pic@2x"];
- (NSURL *)photoBrowser:(HZPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
NSString *urlStr = [self.imageArray[index] stringByReplacingOccurrencesOfString:@"thumbnail" withString:@"bmiddle"];
6.有时候我们需要给webview加个头视图或者尾视图，跟随webview一起滚动，如果这时我们的webview不是嵌在tableview中的，那该怎么办呢？很简单，只要将头视图加在webview的scrollview上，设置scrollview的contentInset(UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)头视图的高度为top，尾视图的高度为bottom,根据自己的需要去设置相应的高度)就可以了
//给scrollview添加头视图
//设置web view的scrollView的上、左、下、右的距离
_wkwebView.scrollView.contentInset = UIEdgeInsetsMake(40, 0, 0, 0)
_titleLabel = [[UILabel alloc] init]
[_wkwebView.scrollView addSubview:_titleLabel]
_titleLabel.frame = CGRectMake(0, -40, self.wkwebView.frame.size.width, 40)
[self.wkwebView.scrollView addSubview:_titleLabel]
_titleLabel.text = @"web view的头视图"
7、最后，给大家分享一些用js获取网页一些相关元素的代码
document：属性
document.title
//设置文档标题等价于HTML的&title&标签
document.bgColor
//设置页面背景色
document.fgColor
//设置前景色(文本颜色)
document.linkColor
//未点击过的链接颜色
document.alinkColor
//激活链接(焦点在此链接上)的颜色
document.vlinkColor
//已点击过的链接颜色
document.URL
//设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate
//文件建立日期，只读属性
document.fileModifiedDate
//文件修改日期，只读属性
document.fileSize
//文件大小，只读属性
document.cookie
//设置和读出cookie
document.charset
//设置字符集 简体中文:gb2312
document：方法
document.write()
//动态向页面写入内容
document_createElement_x_x(Tag)
//创建一个html标签对象
document.getElementByIdx_x_x(ID)
//获得指定ID值的对象
document.getElementsByName(Name)
//获得指定Name值的对象
document.body.a(oTag)
body：子对象
document.body
//指定文档主体的开始和结束等价于&body&&/body&
document.body.bgColor
//设置或获取对象后面的背景颜色
document.body.link
//未点击过的链接颜色
document.body.alink
//激活链接(焦点在此链接上)的颜色
document.body.vlink
//已点击过的链接颜色
document.body.text
document.body.innerText
//设置&body&...&/body&之间的文本
document.body.innerHTML
//设置&body&...&/body&之间的HTML代码
document.body.topMargin
//页面上边距
document.body.leftMargin
//页面左边距
document.body.rightMargin
//页面右边距
document.body.bottomMargin
//页面下边距
document.body.background
//背景图片
document.body.a(oTag) //动态生成一个HTML对象
location：子对象
document.location.hash
// #号后的部分
document.location.host
// 域名+端口号
document.location.hostname
document.location.href
// 完整URL
document.location.pathname
// 目录部分
document.location.port
document.location.protocol
// 网络协议(http:)
document.location.search
// ?号后的部分
常用对象事件:
documeny.location.reload()
//刷新网页
document.location.reload(URL)
//打开新的网页
document.location.assign(URL)
//打开新的网页
document.location.replace(URL)
//打开新的网页
selection-选区子对象
document.selection
本文已收录于以下专栏：
相关文章推荐
NSString * htmlString = @& Some html string \n This is some text! &;
NSAttributedString * attrSt...
HYBHyperlinkLabel.h
CloudShopping
Created by sixiaobo on 14-7-10.
Copyright (c...
本人加载的一段html代码，但是只有文字显示，但是图片不显示
html文件如下：
&meta content=&width=device-width, initial-scale=1.0, m...
uiwebview显示服务器上的html，图片显示成问号，在电脑上用浏览器打开，图片显示403。但是将html保存到本地后打开就可以显示。
所以我在IOS中也是将服务器返回的html内容保存到了本地...
iOS中UIWebView的使用详解
一、初始化与三种加载方式
     UIWebView继承与UIView，因此，其初始化方法和一般的view一样，通过alloc和init进行初始化，其加载数...
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//这里是js，主要目的实现对url的获取
NSString * ...
正常情况下，UIWebView中的内容是不能操作的（除了copy之类的），当然图片更不能操作，但是能不能实现点击图片来做一些其他处理呢？比如点击图片，跳转到单独显示该图片的页面，答案是肯定的，而且相当...
在iOS与html混合开发中，往往会使用到webview去加载自己编写或者服务器分发的html代码，这其中就会设计到html代码不能完美适配到移动端，在一些地方我们就要做相应的修改。
如果我们需要修...
在iOS开发中经常会遇到一些图文混排的情况，特别是在微博类应用的开发过程中经常会遇到各种表情，各种链接的解析。笔者在实践开发中经历了几次这种类型的开发，由最开始的利用WebView进行布局到最后利用富...
他的最新文章
讲师：王禹华
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}